Given that I am on a screen with
a
breadcrumb navigation
1 Keyboard only
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 HEARThe link names correspond to their destination page titles
I HEARLinks identify as a links in a breadcrumb navigation landmark
I HEARThe current page link is indicated when focused
I HEARIs discoverable with screenreader shortcuts as a navigation landmark
Then when I use the enter key to activate the link
I HEARmy browser goes somewhere
3
Mobile screenreader
WHEN I use a screenreader
AND
I swipe to focus on a link
I HEARThe link names correspond to their destination page titles
I HEARLinks identify as a links in a breadcrumb navigation landmark
I HEARThe current page link is indicated when focused
I HEARIs discoverable with screenreader shortcuts as a navigation landmark
Then when I doubletap with the link in focus
I HEARmy 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
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
breadcrumb navigation
must meet WCAG principles:
1
Perceivable
Is easy to identify as interactive
Color or weight are not used as the only means of conveying it is a link
2
Operable
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
3
Understandable
Its purpose is clear in the context of the whole page
4
Robust
Meets criteria across platforms, devices and viewports
Conveys the correct semantic role
Code example
<navclass="breadcrumbs"aria-label="Breadcrumb"><ol><li><ahref="/">
Home
</a></li><li><ahref="/web/"aria-label="Web accessibility checklist">
Web
</a></li><li><ahref="/accessible-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.