2

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?

2 Answers 2

5

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.

1
  • 2
    Thanks. when you press Enter or click, menu listbox opens where you can tab through the options. I need NVDA to announce "select product menubutton", which works fine using area-label. But I also after that need to announce navigation message (ex. Enter to open, tab to navigate). I tried to use aria-describedby for that, when JAWS it work, when NVDA it doesnt
    – Denny89
    Commented Aug 29, 2016 at 8:23
2

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().

4
  • 1
    Without adding additional JS, he shouldn't clearly not add aria-haspopup="true". Commented Aug 26, 2016 at 10:27
  • 1
    Thank you for answer. Yes, this button opens dropdown menu, which is listbox of options where you can navigate by tab and open by Enter. I need NVDA to announce "select product menubutton", which works fine using area-label. But I also after that need to announce navigation message (ex. Enter to open, tab to navigate). I tried to use aria-describedby for that, when JAWS it work, when NVDA it doesnt
    – Denny89
    Commented Aug 29, 2016 at 8:14
  • 1
    @alexander agreed, the answer includes that statement.
    – AlastairC
    Commented Sep 2, 2016 at 16:46
  • 1
    @Denny89 as both answers (so far) have said, reading out a statement about how you use your software is at best a waste (for something so basic), but in some cases counter-productive (i.e. wrong if you aren't using nvda/jaws).
    – AlastairC
    Commented Sep 2, 2016 at 16:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.