How can I resolve the accesibility error for "Have an accessible name" on a toast?-CodePudding

What is the correct way to resolve this error on a toast (popup notification)? eg name? aria-labelledby? Is the to describe what is in the notification or what the component is?

I'm using https://bootstrap-vue.org/docs/components/toast

This renders something like this

<div role="alert" aria-live="assertive" aria-atomic="true">
    <div tabindex="0">
        <button type="button" aria-label="Close">×</button>
        <div>
            <p>Some notification text</p>
        </div>
    </div>
</div>

CodePudding user response：

Here is the two ways to resolve it:
 1. if you have a specific HTML element that holds the title of the toast, give the element an id and use the id as the value  of aria-labelledby in the parent elementNode e.g
 
  <div aria-labelledby="title" role="alert" aria-live="assertive" aria-atomic="true">
    <h3 id="title">I am the title</h3>
    ...
  </div>

 2. you can just use the aria-label attribute on the parent nodeElement e,g:

    <div aria-label="Your subscription is about to expire" role="alert" aria-live="assertive" aria-atomic="true">
        ...
    </div>

In summary, what this does is; it tells the screen-reader what the pop-up is about as a kind of summary just the way we get a quick grasp of what an input field is all about when a label is added.

CodePudding user response：

For users using a screen reader, there is no title for this alert. With a title, the screen reader announces to the user what is the new content about.

aria-labelledby or aria-describedby can be used to point to an element to be used as a title for the alert.

If you do not want to add a heading that is visible, just make an invisible heading and point to it.

h2{
font-size: 0px;
}

<h2>XXX</h2>

<div role="alert" aria-live="assertive" aria-atomic="true">
    <h2>Your title</h2>
    <div tabindex="0">
        <button type="button" aria-label="Close">×</button>
        <div>
            <p>Some notification text</p>
        </div>
    </div>
</div>

h2{
font-size: 0px;
}