Accessibility
The breadcrumb follows the WAI-ARIA Breadcrumb pattern and meets WCAG 2.1 AA. It is a labelled navigation landmark holding an ordered list of links, from the home page down to the current page. An accessible breadcrumb shows a screen-reader user the same hierarchy a sighted user sees, marks which page they are on, and keeps the collapsed levels reachable from the keyboard.
For designers
Section titled “For designers”- Every link and the current page must meet 4.5:1 contrast against the bar on every supported surface. Source: WCAG 1.4.3 Contrast (Minimum).
- The home and ellipsis icons must meet 3:1 against the bar. Source: WCAG 1.4.11 Non-text Contrast.
- The current page must look different from the parent links in more than colour. It is heavier and has no underline. Source: WCAG 1.4.1 Use of Color.
- Focus styles on the links and icon controls must stay visible on every supported surface. Source: WCAG 2.4.7 Focus Visible.
- Labels must name the page they lead to, so each link makes sense on its own. Source: WCAG 2.4.4 Link Purpose (In Context).
For developers
Section titled “For developers”Mark the breadcrumb up as a navigation list, not as plain text with loose separators. The <ol> already tells assistive technology how many levels there are and in what order. The chevron icons carry aria-hidden="true", so screen readers never announce them, and the list structure carries the sequence instead. Source: WCAG 1.3.1 Info and Relationships.
is-collapsed hides the middle levels with display: none. They stay in the DOM but leave the tab order and the accessibility tree. While collapsed, the ellipsis is the only way to reach them. The consumer owns the expand and collapse behaviour; the Develop tab’s recipe shows a working version. Source: WCAG 2.4.3 Focus Order.
If you truncate a long label with tng-overflow-ellipsis, the full text stays in the DOM, so screen readers still read the whole name.
A breadcrumb is one of the ways a user can find where they are within a set of pages. Source: WCAG 2.4.8 Location.
Keyboard interaction
Section titled “Keyboard interaction”| Key | Action |
|---|---|
| Tab / Shift + Tab | Move through the home link, the ellipsis and each parent link. The current page is text and is never a stop. |
| Enter / Space | On the ellipsis: expand the trail in place and move focus to the first revealed link |
| Enter | On a link: follow it |
| Escape | Collapse an expanded trail and return focus to the ellipsis |
Clicking or tapping outside the bar also collapses the trail. Source: WCAG 2.1.1 Keyboard.
Labelling elements
Section titled “Labelling elements”Give every element the role, name and state that assistive technology needs.
Navigation
A <nav> landmark named with aria-label="Breadcrumb". Translate the label, and keep it distinct from the page’s other <nav> landmarks.
List
An <ol> with role="list". Removing the list style makes Safari drop list semantics, and role="list" restores them.
Home link
The icon is the link’s only content, so name the link with aria-label="Home".
Ellipsis
A native <button type="button"> named with aria-label, for example “Show full path”. It discloses the hidden levels in place rather than opening a menu, so it carries aria-expanded kept in sync with the trail and no aria-haspopup.
Parent links
Plain <a href> elements, named by their visible text.
Current page
The last item is text, not a link: no href, and aria-current="page" so screen readers announce it as the current page.
Source: WCAG 4.1.2 Name, Role, Value.