Side navigation
Side navigation
Easy to use for everyone
The side navigation component forms an app's main navigation. Therefore, it always appears at the start of a page's tab index. It also uses anavigation
landmark to allow quick navigation from anywhere within a page's content.
The side navigation is essentially a group of links ordered vertically in the component. Tabbing through the side navigation content follows the logical order by moving from the top most item to the bottom most item, with the expansion toggle button being the last focusable element in the component before focus is moved to page content.
In a collapsed side navigation, menu option labels are always available in a tooltip by hovering or focusing on the icon button. Any truncated text can also be accessed through use of tooltips in this way.
For Assistive Technology
Icon-only menu options have accessible labels that are announced by a screen reader when focused.
Collapsible option groups usearia-expanded
to indicate whether the group is open or closed. If closed, focus skips over the group's content to the next elements. If open, each menu item in the group is included in the tab order. Collapsible option groups can be opened or closed using the
enter
or
space
key.
Based on
The side navigation component has been based on the following resources:
-
Using ARIA landmarks to identify regions of a page , W3, accessed June 2022. -
Accessible Accordion , Aditus.io, accessed June 2022. -
Accordion Example , W3, accessed June 2022.
Testing
We’ve tested this component against WCAG 2.2 Level AA. It’s been tested with NVDA and VoiceOver, and several different users with different interaction methods.