Breadcrumb accessibility

WCAG 2.1 AA — release blocker

Semantics

• Root renders as <nav> with aria-label="Breadcrumb" (customisable).
• List uses <ol> for ordered semantic structure.
• Each link uses <a> for standard navigation semantics.
• Current page uses aria-current="page" and aria-disabled="true".

Separators

• Separator <li> elements use role="presentation" and aria-hidden="true".
• Screen readers skip separators entirely — they only announce the links.

Ellipsis

• Ellipsis uses aria-hidden="true" with a sr-only "More" label for screen readers.

Keyboard navigation

• Tab moves between breadcrumb links in document order.
• Enter activates a focused link.
• Current page (BreadcrumbPage) is not focusable — it has aria-disabled.

Labelling

• The <nav> aria-label identifies the landmark (default: "Breadcrumb").
• Link text should be concise and match the target page title.

Audit checklist

• Screen reader announces "Breadcrumb navigation" landmark.
• Links are announced in order without separator noise.
• Current page is announced with aria-current="page".
• Tab navigates through links only (skips separators and current page).
• Focus ring is visible on focused links (4.5:1 contrast).