Use semantic HTML
This semantic HTML contains all accessibility features by default.Skip to example navigation
Keep custom menus as simple as possible
Use semantic elements where possible.
When you can’t use semantic HTML
This custom navigation requires extra attributes.
Multiple navigation elements
When there is more than one navigation element, they should have a name.
- If there are multiple
<nav>elements (site menu, pagination, categories) it may be helpful to name them
aria-label="Menu name"when there is not a visible nav title.
aria-describedby="menu-name-id"can be used when the nav title is a visible heading.
- Identifies itself as navigation
- DO NOT add menu or option roles with arrow key event listeners unless you’re building an actual application like Gmail.
- When skip links are used, add
tabindex="-1"so that focus can move to the
navelement, (not just bring it into view).