Accessibility
- Availability of navbar items to assistive technology requires the use of
aria-controls.
- Navbars must be contained in
<nav> elements with unique accessible labels for each navigational element on the page, if there’s more than one.
- The name of each item should include the attribute
role="button".
- Provide a label for all menu items that can be read by assistive technologies. You may use
visually-hidden text or add an aria-label to each menu item. If you need the menu item name to be translatable, use visually-hidden.
- When a navigation item is tapped, provide visual feedback to the user that the item is selected: The active indicator appears and the icon state changes from default to selected.
- When hovered, the active indicator appears, providing a visual cue to the user that the destination is interactive.
- If the bottom navbar is the only interactive element on the screen, initial focus should be directly on the first navigation item.
- “Tab” focus lands on the first navigation destination. Space / Enter
selects the focused navigation destination.
- The accessibility label for a navigation item should typically be the same as the destination name.
