Should Screen Reader reads "Home, Link, Menu Item" or "Home, Menu Item"

user_9324000 0
Viewed 440

If the menu items are links, should the screen reader read it as "home, link, menu item" or "home, menu item"?

Currently the screen reader is reading it as "home, link, menu item" but I am getting mixed information about it. Some information says it should be "home, link, menu item" because we want users to know the button is a link. However, some say that it should just be announced as "home, menu item"

Here's my code:

<ul role="menu">
        <li role="menuitem">
            <a aria-label="Home" href="/en-us/">
                <span class="">Home</span>
            </a>
        </li>
        <li role="menuitem">
            <a aria-label="Search" href="/en-us/">
                <span class="">Search</span>
            </a>
        </li>
</ul>

I was wondering which version is correct?

screen-readers accessibility menu html
2 Answers

If your html is correct, then don't worry about how the screen reader announces it. JAWS, NVDA, VoiceOver, Talkback, Narrator, ChromeVox, etc may all announce it slightly different and that's ok. As long as the code is correct, then you're good.

As a side note, if you use the menu roles, then you are committing to implementing arrow key navigation. That is, think of the menu role as an old school desktop app menu where you can press alt to get to the top menu (such as file, edit, view) and then left/right arrows to navigate through the menu and up/down arrows to navigate through the submenu. It's fine to do that on a web application but it makes the code more complicated. I rarely use the menu roles and just rely on basic tabbing to navigate through a list of links.

user_767140

Just for anyone who stumbles across this, aria-role="menu" and aria-role="menu-item" are not for site navigation (as appears to be the case here).

They are designed for application menus (such as drop downs with commands).

For site navigation the correct (and much simpler) mark-up is to simply use the <nav> element with a nested <ul> (unless you are supporting HTML4...and even then the <ul> would probably be enough!).

Additionally there is no real need for an aria-label in the above given examples as the aria-label is the same as the programatically determinable text (a web browser can work out that the "Home" text is within the <a> element and so will present that information to a screen reader via the accessibility tree).

As such for site navigation the following is all that is needed:

<nav>
  <ul>
    <li>
      <a href="/en-us/">
        <span class="">Home</span>
      </a>
    </li>
    <li>
      <a href="/en-us/">
        <span class="">Search</span>
      </a>
    </li>
  </ul>
</nav>

Don't use WAI-ARIA unless you have explored every other option or you need to support ancient browsers!

Additional

With aria-role="menu" you don't only have to implement arrow key navigation. You also should have functionality added that ensure that:-

  • the menu can be closed with Esc key.
  • you can skip to options using letters (so d might skip to "details", the next press of d might skip to "delete" if those were menu options).
  • Home should jump to the start of the list
  • End should jump to the last item in the list

Finally

If this is indeed a drop down menu and you have implemented all the above, your mark-up isn't quite right anyway.

The <li> should have role="presentation none" (use both "presentation" and "none" as per guidance) to remove semantic meaning and the role="menu-item" should be on the anchor itself.

<ul role="menu" id="some-menu">
  <li role="presentation none">
    <a role="menuitem" aria-label="Home" href="/en-us/">
      <span class="">Home</span>
    </a>
  </li>
  <li role="presentation none">
    <a role="menuitem" aria-label="Search" href="/en-us/">
      <span class="">Search</span>
    </a>
  </li>
</ul>

Also don't forget that you need to associate the <button> that opened the menu with the menu itself, so you must have an ID on the role="menu", and finally don't forget that when the menu is closed you have to return focus to the button that opened it.

<button aria-haspopup="true" aria-controls="some-menu"><!--same ID as the menu above for aria-controls-->
   Open Menu 
</button>
user_27028940
Related