Breadcrumb
Breadcrumb
Easy to use for everyone
Breadcrumbs are formed out of a set of links. Each of these links is individually focusable. The breadcrumbs form a navigation landmark with an accessible name of ‘breadcrumbs’ so that they can be easily accessed.
For Assistive Technology
The separators between links are added programmatically so that they aren't read out by screen readers. The separators are purely decorative so don't need to be announced to the user.
Based on
The breadcrumbs component has been based on the following resources:
-
Navigation landmarks , WCS, accessed May 2022. -
A11y breadcrumbs , Scott O’Hara, accessed May 2022. -
Breadcrumbs , Nielsen Norman Group, accessed May 2022. -
Breadcrumbs authoring practices , WCS, accessed May 2022.
Testing
We've tested this component against WCAG 2.2 Level AA. It's been tested with NVDA and VoiceOver, and several different users with different interaction methods.