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.

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.

The side navigation component has been based on the following resources:

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.