User Tools

Site Tools


accessibility:menus

Navigation Menus

Top-level menu items should be <a> links if they go directly to another page or route, and <button> if they contain a dropdown or trigger some other JavaScript-based action. The top level link text and caret indicator should be part of the same button, not separated. The button should use the aria-expanded attribute rather than aria-haspopup.

Within a dropdown menu, the containing element should have the [ngbDropdownMenu] directive, and the individual items should have the [ngbDropdownItem] directive. This allows the user to navigate within a submenu using the up and down arrow keys as well as the tab key. See the ng-bootstrap documentation.

ARIA for Navigation

ARIA Labels

When multiple landmarks have the same role, like multiple <nav> elements on one page, you can use ARIA labels to give them unique and descriptive names, like "Main navigation" and "Search results pagination." Without labels, <nav> elements used for the main navigation, breadcrumbs, and pagination might all appear as “navigation” in the landmarks menu.

Navigation menus should not use the ARIA menu role, which is intended for operating system menus.

aria-current

In navigation menus, including pagination links, the element containing the current page should include the aria-current="page" attribute. See aria-current documentation at MDN for more details.

Further reading on navigation menus

See also: Pagination

accessibility/menus.txt · Last modified: 2024/01/08 17:05 by scl

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki

© 2008-2022 GPLS and others. Evergreen is open source software, freely licensed under GNU GPLv2 or later.
The Evergreen Project is a U.S. 501(c)3 non-profit organization.