0

I'd like the screenreader to read the text "Stories, menu item" when the mouse hovers over the "Stories" button in the menu bar. I have tried to add aria-label as well as aria-describedby inside the span but the screenreader is still reading the "Stories" text, instead of "stories, menu item" text.

Original code:

<li role="menuitem">
     <span class="">Stories</span>
</li>

Things that I tried but doesn't work:

(1) Adding aria-label

 <li role="menuitem">
         <span class="" aria-label="stories, menu item">Stories</span>
 </li>

(2) Adding aria-describedby

 <li role="menuitem">
         <span class="" aria-describedby="stories, menu item">Stories</span>
 </li>
superninja
  • 3,114
  • 7
  • 30
  • 63
  • @AryanBeezadhur thanks but `title` doesn't work either, it is still reading "Stories" for screen reader – superninja Sep 13 '21 at 21:06
  • Did you notice that your example for `aria-describedby` above still has `aria-label` inside the tag? Is that just a mistake in your copy/pasting into your question or was it that way in your actual code? – jontlymon Sep 13 '21 at 21:28
  • @jontlymon no it's my actual code. Are they not supposed to be inside the `span` tag? – superninja Sep 13 '21 at 21:44
  • I just mean that your (2) example also has `aria-label` instead of `aria-describedby` inside the `span` tag. – jontlymon Sep 13 '21 at 21:47
  • 1
    @jontlymon sry its a typo. I have edited the code – superninja Sep 13 '21 at 21:55
  • 1
    This seems perhaps like you are falling into an antipattern. If the screenreader isn't reading out the context regarding the role, this might be an indication that you haven't properly wired it up. I'd recommend taking a peek at [this answer that recommends against trying to create a `menuitem`](https://stackoverflow.com/questions/41141247/aria-role-menuitem-for-a-or-li). The gist of it is that a menu of this type follows specific rules and behaviors which you need to follow and implement-- if you're not prepared to do that, than don't use this role. Remember, no ARIA is better than bad ARIA. – Alexander Nied Sep 14 '21 at 00:46

2 Answers2

3

There are a few weirdnesses going on.

First off, in your OP, you asked about reading text when the "mouse hovers over" the element. Most screen reader users will not be using a mouse and will not hover over elements. The NVDA screen reader has a mouse hover option so that moving the mouse over elements will read it, but that feature is mainly for sighted testers. I have never found a use for the mouse hover NVDA feature.

So I'm guessing your question is more about when the user navigates to the item, you want it to read additional text. More than what is visually displayed.

The code you posted doesn't actually have a keyboard focusable element although you mention a "button" in your description. I'll gloss over that for now and assume you have a focusable element, preferably a native semantic HTML element.

Another weirdness is that you want to announce "menu item" (presumably because you're not hearing that announced) but that text should be announced based on the role of your element, which is "menuitem". You shouldn't have to force an announcement of the role of the element. You get that for free when using a semantic html element or the proper use of role. In this case, "menu item" should be announced if the element that receives focus has role="menuitem". In your case, your code example might be too simplified but as it stands, the <li> has the menuitem role but the <li> is not the element receiving focus. The element inside the <li> (a button?) is receiving focus.

Lastly, the crux of the problem is that an aria-label on a <span> is generally not supported unless that span has a role. See the third last bullet point on https://www.w3.org/TR/using-aria/#label-support. But again, you shouldn't have to force "menu item" to be announced.

Side note: Your third example that uses aria-describedby, the value of that attribute should be a space separated list of IDs. It should not be a literal string.

slugolicious
  • 15,824
  • 2
  • 29
  • 43
1

You can include some additional text for screen readers only:

<li role="menuitem">
    Stories<span class="screen-reader-only">, menu item</span>
</li>

CSS taken from Bootstrap 3:

.screen-reader-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

Adapted from this answer.

Aryan Beezadhur
  • 4,503
  • 4
  • 21
  • 42
  • 2
    While this may work, it would also be worth looking at [this post that advises against the use of `menu`](https://stackoverflow.com/questions/41141247/aria-role-menuitem-for-a-or-li); it is my suspicion that the OP is perhaps falling into an accessibility antipattern. – Alexander Nied Sep 14 '21 at 00:53