How to design
a
breadcrumb navigation
A
breadcrumb navigation
must meet WCAG principles:
2
Operable
-
The click/tap target area and is no smaller than 24x24px - 2.5.8 AA (not applicable to text links)
-
The click/tap target area and is no smaller than 44x44px - 2.5.5 AAA (not applicable to text links)
-
The focus indication is visible (in some way) 2.4.7 AA
-
The focus indication has a 3:1 minimum contrast ratio against default and adjacent elements - 2.4.13 AAA
-
The focus indication has a minimum area equal to the width of the element and 2px in height - 2.4.13 AAA
4
Robust
-
Name, role, state is documented - 4.1.2 A
-
Meets criteria across platforms, devices and viewports 4.0.0 AA
A
breadcrumb navigation
must work for people with disabilities:
✓ Motor
-
The focus indication is visible (in some way) 2.4.7 AA
-
The focus indication has a 3:1 minimum contrast ratio against default and adjacent elements - 2.4.13 AAA
-
The focus indication has a minimum area equal to the width of the element and 2px in height - 2.4.13 AAA
✓ Blindness
-
Name, role, state is documented - 4.1.2 A
-
Meets criteria across platforms, devices and viewports 4.0.0 AA
Usage
- Breadcrumbs convey your current location in the information architecture
- Breadcrumbs are not your browsing history (for some reason we have to keep saying this)
- Breadcrumbs are a feature that people rarely use, so why have them?
- When people do need them they do it’s incredibly helpful
- It takes up little space and is generally cheap to produce and maintain
Working example
Annotations for Web
If you’re documenting breadcrumbs in a design system:
<nav aria-label="Breadcrumbs"> for the component wrapper<ol> ordered list for the breadcrumb structure'link to URL' for each breadcrumb linkaria-current="page" for the last link in the breadcrumbs
Further reading
Related breadcrumb navigation entries