Navigation Tabs Accessibility

Best Practices

Navigation tabs is a navigation pattern. The “tabs” are simply a list of links with no additional JavaScript behaviour. For dynamic tabs that hide & show content, use the tabs pattern instead.

Each navigation tab must be a real <a> element with a valid href . A value of “javascript” (or any such variant) is not a valid URL.

The aria-current attribute must be used to programmatically denote the current page/link.

Interaction Design

This section provides interaction design for keyboard and screen reader users.

Keyboard

TAB key navigates between navigation tabs.

ENTER key activates a navigation tab (i.e. it navigates to the link's href ).

Screen Reader

Upon entering the list, the number of list items must be announced.

The “current” navigation tab must be announced as the current item (exact words may differ depending on the screen reader).

ARIA Reference