WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: ARIA for main navigation bar

for

From: Bryan Garaventa
Date: Apr 23, 2015 12:08PM

> The submenu that the developers are working contains a brief list in a horizontal layout just below the main menubar. Otherwise, it seems to function the same as the examples.

Does this mean that after you arrow into the submenu, you need to press Left/Right to navigate the submenu?

If the menu trigger includes a visual indication such as a downward pointing triangle or the like, then it's up to you whether the submenu visually opens on focus. Either way though, the triggering role=menuitem element must include aria-haspopup="true" to indicate that there is an attached submenu for non-sighted screen reader users.

Also, if pressing Enter on the triggering menuitem A+href=url tag will navigate to another page, it is necessary to surround the container element of the menubar construct with role=application, otherwise when you press Enter on the menu while navigating in Virtual Cursor or Browse mode using JAWS or NVDA, it will open the new page instead of entering Applications mode for interacting with the menus. After Application mode is invoked, pressing Enter again at this point will activate the onclick on the A tag, or pressing Down will navigate into the submenu.

If this dual functionality is the case, then I recommend adding an aria-describedby on each of the A tag role=menuitem elements to reference a hidden element for indicating the correct keystroke to use for doing one or the other action, since it won't be clear that pressing Enter again at this point will open a different browser page.