Breadcrumbs

How to test a breadcrumbs

Gherkin Condensed WCAG

Given that I am on a page with a breadcrumbs

1 Keyboard for mobile & desktop

WHEN I use the tab key to move focus to a link I SEE focus is strongly visually indicated
Then when I use the enter key to activate the link I SEE my browser goes somewhere

2 Desktop screenreader

WHEN I use a desktop screenreader (NVDA, JAWS, VoiceOver) AND I use the tab key to move focus to a link
- I HEAR The link names correspond to their destination page titles
- I HEAR Links identify as a links in a breadcrumb navigation landmark
- I HEAR The current page link is indicated when focused
- I HEAR Is discoverable with screenreader shortcuts as a navigation landmark
Then when I use the enter key to activate the link I HEAR my browser goes somewhere

3 Mobile screenreader

WHEN I use a mobile screenreader (Talkback, VoiceOver) AND I swipe to focus on a link
- I HEAR The link names correspond to their destination page titles
- I HEAR Links identify as a links in a breadcrumb navigation landmark
- I HEAR The current page link is indicated when focused
- I HEAR Is discoverable with screenreader shortcuts as a navigation landmark
Then when I doubletap with the link in focus I HEAR my browser goes somewhere

1 Keyboard & screen reader actions

When I use	I see/hear
Tab	Focus visibly moves to the link
Enter	Activates the link

2 Mobile screenreader gestures

When I use	I hear
Swipe	Focus moves to the link
Doubletap	Activates the link

3 Screenreader output for all devices

Reads	I hear
Name	The link names correspond to their destination page titles
Role	Links identify as a links in a breadcrumb navigation landmark
State	The current page link is indicated when focused
Group	Is discoverable with screenreader shortcuts as a navigation landmark

A breadcrumbs must meet these WCAG principles.

1Perceivable

Is easy to identify as interactive
Color or weight are not used as the only means of conveying it is a link

2Operable

Is keyboard operable
The click/tap target area is no smaller than 44x44px
The focus state has a 3:1 minimum contrast ratio against default
The focus indication has a 3:1 minimum contrast ratio against adjacent elements
The focus indication has a minimum area equal to the width of the element and 2px in height

3Understandable

Its purpose is clear in the context of the whole page

4Robust

Meets criteria across platforms, devices and viewports
Conveys the correct semantic role

Code example

<nav class="breadcrumbs" aria-label="Breadcrumb">
  <ol>
    <li>
      <a href="/">
        Home
      </a>
    </li>
    <li>
      <a href="/web/">
        Web
      </a>
    </li>
    <li>
      <a href="/checklist-web/breadcrumbs/" 
         aria-current="page">
        Breadcrumbs
      </a>
    </li>
  </ol>
</nav>

Developer notes

Breadcrumb link names must correspond to their destination page titles.
- In the example here, the “Web” link uses an aria-label that corresponds to the full title of the destination page.
Use a <nav> with a unique name like aria-label=”breadcrumbs”
Placing the links inside <ol> and <li> provides context to users about a given breadcrumb’s position in a list and of the total number of breadcrumbs.
Add aria-current="page" to the last link in the breadcrumb. This represents the current item within a container or set of related elements.
ARIA Authoring Practices Guide (APG) Breadcrumb Example