Orvain UI

Breadcrumb

How the Breadcrumb works with a keyboard and assistive tech, and where it stands against WCAG 2.2 AA.

FreeReact and VueBreadcrumb blocks21 blocksPro
AAWCAG 2.2 target
6/6contrast pairs passing
4keyboard interactions

The Breadcrumb is a <nav> around an ordered list of links, with the current page marked and not linked. It needs no custom keys: each crumb is a link, and the ellipsis is a button. It follows the WAI-ARIA Breadcrumb pattern and helps meet WCAG 2.4.8 Location.

Keyboard#

Tab

Moves to the next crumb link, or the ellipsis button. The current page is not a link and is skipped.

Shift+Tab

Moves to the previous crumb.

Enter

Follows the focused crumb, or opens the full trail from the ellipsis.

Space

Opens the full trail from the ellipsis. Space does not follow a link.

Semantics#

<nav aria-label="Breadcrumb">

A navigation landmark named Breadcrumb, so it is listed apart from the main navigation.

Always
<ol>

An ordered list, so screen readers announce it as a list and give its length.

Always
aria-current="page"

Announced as the current page. It is a <span>, not a link, because it would go nowhere.

Last crumb
aria-hidden="true"

Chevrons, slashes and dots are decorative. The list already says how the crumbs relate.

Separators
aria-label="Show all breadcrumbs"

Names the ellipsis button. Pressing it reveals the hidden crumbs and moves focus to the first one it revealed.

Collapsed trail
aria-label

An icon-only crumb is named from iconLabel (Home by default). Its tooltip is aria-hidden, so the name is read once.

Icon only

Colour contrast#

Every variant and state has to meet WCAG 2.2 Level AA. Measure the colours as they land on screen: a translucent hover or press wash over whatever sits behind it.

4.5:1

Crumb text · Default, Hover, Current

The 14px Medium label against the page in every state, with Fill's 6% hover pill laid over white.

WCAG 1.4.3 Contrast (Minimum) ↗
3:1

Ellipsis glyph · Collapsed trail

The ellipsis is an icon-only button drawn in #cbcbcb: 1.62:1 on white at rest, rising to 4.54:1 on hover. At rest it falls short.

WCAG 1.4.11 Non-text Contrast ↗
Not required

Separators · Always

The #cbcbcb separators (1.62:1) are decorative and hidden from assistive tech; the crumbs themselves carry the trail.

WCAG 1.4.11 Non-text Contrast ↗
3:1

Focus indicator · Focus visible

A 2px #1a6ef8 ring with a 2px white gap, 4.54:1 against white. Crumbs sit close together, so check the ring is not hidden by a sticky header above the trail.

WCAG 1.4.11 Non-text Contrast ↗WCAG 2.4.13 Focus Appearance ↗WCAG 2.4.11 Focus Not Obscured ↗
Not colour alone

Current page · Current

The current crumb is darker, but it is also the last item and not a link, and aria-current says so to assistive tech.

WCAG 1.4.1 Use of Color ↗WCAG 2.4.8 Location ↗

Measured contrast#

Crumb label against a white page in each state, with Fill's hover wash laid over white. All 6 pairs reach their minimum.

Crumb · styleDefaultHoverCurrent
Crumb · plain5.17passes14.35passes14.35passes
Crumb · Fill5.17passes12.60passes14.35passes

Motion#

  • The icon-only tooltip fades in over 120ms and appears at once under prefers-reduced-motion.
  • Opening a collapsed trail is instant; nothing slides.

Checklist#

Put the Breadcrumb above the page title and keep it on every page at the same depth.

The last crumb matches the page's own title, so people can tell they are in the right place.

The ellipsis glyph is 1.62:1 at rest. Draw it in #6d6d6d or darker before the code library ships.

Crumb links have a 24px-tall hit area, the WCAG 2.5.8 minimum, and the ellipsis is 24 × 24px. Don't tighten the separator gap below the drawn 6px.

The chevron on the current crumb is a picture, not a menu. If it should open sibling pages, make it a real menu button.

On a narrow screen the trail wraps by crumb rather than scrolling sideways.