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

Question

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>

Are you using some framework or plain HTML? Please add relevant code — Tushar Shahi
– Tushar Shahi, Commented Sep 27, 2021 at 7:56
@TusharShahi apologies! Added relevant code and details of used framework — DumbDevGirl42069
– DumbDevGirl42069, Commented Sep 27, 2021 at 8:03
Note that your aria-live is superfluous since role="alert" already gives you an assertive region. — slugolicious
– slugolicious, Commented Sep 28, 2021 at 5:36
What's the purpose of the <div tabindex="0">? Why does the user need to tab to the container? I think that's the crux of the problem. If you're using a scanning tool such as axe or wave and you're getting that error, it's probably seeing that an element can receive focus (tabindex=0) but that element does not have an accessible name. — slugolicious
– slugolicious, Commented Sep 28, 2021 at 5:38

slugolicious · Accepted Answer · 2021-09-28 05:33:55Z

3

Here are the two ways to resolve it:

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>

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.

edited Sep 28, 2021 at 5:33

slugolicious

17.9k2 gold badges35 silver badges48 bronze badges

answered Sep 27, 2021 at 8:28

Emmanuel Chikwendu Onah

6086 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

slugolicious Over a year ago

Using aria-labelledby is generally the "best practice" approach if there's already an element on the page that contains the text you need (such as the <h2>).

medeaoblongata Over a year ago

Addendum to slugolicious' already excellent comments, if you plan on going with aria-label rather than aria-labeledby - ask yourself why sighted users wont benefit from a visible title. For a smaller alert such as this, the notification text itself can often work as the accessible name, so you don't need to dream up an additional, potentially redundant heading.

Tushar Shahi · Accepted Answer · 2021-09-27 08:32:17Z

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;
}

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related