Navigation List

Provides local navigation for the current context and indicates the current view. It is typically placed in the sidebar of the page and changes what is shown in the main area.

WCAG Score - 2.2 A Compliant


Provided by the component

  • Navigation list has attribute aria-labelledby set to unique ID of the heading
  • Navigation list items are focusable via tab key
  • Current item has attribute aria-current="page"
  • Item can be activated with Enter key

Navigation item with sub items

  • Item has attribute aria-expanded="true || false"
  • Item has attribute aria-controls set to ID of sub-navigation
  • Item can be expanded/collapsed with enter || space key
  • sub-items are focusable via tab key
  • Current sub-item has attribute aria-current="page"

 


Implementation considerations

Developers must do the following in the implementation to be considered fully accessible: