Breadcrumbs

Requirements

Users should be able to:

• Navigate to and from each breadcrumb link using a keyboard or other assistive technology.
• Understand that the breadcrumb links are for the purpose of navigation.
• Identify the current page within the breadcrumb trail.
• Distinguish the breadcrumb navigation from other navigation landmarks on the page through clear labelling.

Interactions

• Breadcrumb links should have a visual indication that they are interactive.
• The current page should be presented in plain text.
• When hovered over with a mouse, the cursor should change to a pointer.

Keyboard interactions

• Tab. Moves focus from the previous interactive element to the first breadcrumb link.
• Pressing tab again moves focus to the next link within the breadcrumb trail.
• The current page in the breadcrumb trail does not receive focus as it is not interactive.
• Enter. Activates the selected link.

Design considerations

• Do not truncate or remove sections of the breadcrumb trail on smaller screen sizes. Instead, wrap the breadcrumb trail so that all elements in the list are visible.
• Interactive elements in the breadcrumb trail must be visually distinguishable from non-interactive elements.

Development considerations

• The breadcrumb contains a set of links that are structured using an .
• The is contained within a or a with role=”navigation”.
• Where possible, use native HTML nav roles over the use of role=”navigation” as support of ARIA attributes across different browsers can be inconsistent.
• Give the nav an aria-label of “breadcrumb” to differentiate it from other navigation landmarks on the page.
• The current page is indicated using aria-current=”page”.
• Any visual separators between links are programmatically hidden using aria-hidden.