CODEWITHSUNDEEP
javascripthtmlaccessibilityscreen-readersnvda
Denny89
Denny89

Reputation: 23

NVDA doesn't read aria-describedby with aria-label

I have a simple button.

.icon {
    border: 1px solid black;
    display: inline-block;
    height: 25px;
    text-indent: -999em;
    vertical-align: middle;
    width: 25px;
}

    <a role="button" href="javascript:void(0);" aria-label="select product" aria-describedby="navigation">
        <span id="navigation" class="icon >Enter to open, tab to navigate</span>
    </a>

When I tab to this link, I want to hear "select product button, Enter to open", but NVDA reads only "select product button" without navigation message.

Could someone know how to fix it or somehow provide additional navigation message for button?

Upvotes: 2

Views: 6769

Answers (2)

AlastairC
AlastairC

Reputation: 3297

I'm assuming that this opens a drop-down menu of some kind? I don't have NVDA to hand to test with, but I can re-frame this as something that I know works for that scenario.

There are several updates to make:

  1. If it is a button, use <button> rather than over-riding another element. (I think button is correct as it does something on the page, rather that going somewhere else.)
  2. Enter is how you activate things on NVDA (and Jaws), but it is different on other screenreaders. It is best not to tell people how to use their screenreader, you have to assume they know that (at least for the basics) otherwise they couldn't have gotten this far.
  3. Rather than providing a label, use aria-haspopup to indicate the button's function.

For example (adapted from HeydonWorks):

<div class="product-selector">  
  <button aria-haspopup="true">
    <span>Select product</span>
  </button>
  <ul class="pop-up" aria-hidden="true" aria-label="Product Menu">
    <li><a href="#">Test item</a></li>
  </ul>
</div>

Obviously you need the CSS/JS to make the pop-up work, and the aria-haspopup & aria-hidden should be added by JS in the first place. In VoiceOver that is read out as "Select product, pop-up button", and I think you'll get something similar in NVDA.

NB: If the pop-up opens immediately below the button in source-code order this is a good approach as it will be the next thing for the screenreader. If the pop-up opens elsewhere on the page, you would be best off using a link (without role=button) and moving the focus to the pop-up with .focus().

Upvotes: 2

alexander farkas
alexander farkas

Reputation: 14134

1. Why is aria-describedby not used in your example: aria-describedby is for additional not important informations. Often the title attribute is matched to aria-describedby automatically. (Note: if a label or content is missing the title is matched to the a11y name (i.e.: same thing as aria-label). Due to the fact that it is for additional usage and most developers are using it too often for unimportant things screenreaders don't announce it automatically (There might be shortcuts and settings for screenreader user to force reading those.). There are though exceptions: Most screenreaders will automatically read the description of a dialog for example.

2. Why your usage of aria-describedby is wrong: You describe how the user should activate this control, but this is clearly not necessary. Actually this is the main function of aria roles and properties. If you describe an element with semantic markup, it informs the user how to interact with it, you don't need to repeat it with words. For example: a <button>, role="button" means if you press enter or space or do a (mouse)click, it will execute the default action of this control (in case of a native button element this can be simply accomplished with a click event).

3. You can can use aria-haspopup="true", but if you do you must add additional JS: The point above also explains why simply adding <button aria-haspopup="true"> as described by the other answer, would sound great for you in the screenreader, but it is not always the best thing to do.

In fact <button aria-haspopup="true" aria-label="Settings"> reads "Settings, Menubutton", which might be semantically what you want. But from description it does not mean, this button opens a submenu/popupmenu in the first place. It means, it behaves as a menu button. And a menu button will execute it's default action also if you press "cursor down" (it also allows space/enter).

This means the linked tutorial with the submenu is bullshit. If you hit cursor down or space it does not open the submenu.

Here comes also a fun part. If you create a <button aria-haspopup="true" aria-label="Settings"> (including all menu button interactions (i.e.: space, enter, cursor down...) and then open a role="dialog" and move the focus inside this dialog. It would not be what the user would have expected, but it is totally fine/accessible, because your control behaves as described and as soon as the user switches to the dialog, he gets informed, that he is not in a menu, but in a dialog and can interact with it accordingly.

Upvotes: 6

Related Questions