Breadcrumbs accessibility requirements
Adaptability
Helping people by honouring user preferences and by allowing adaptations to content presentation and time limits.
View test scenarios: Adaptability
| Standard | Description |
|---|---|
| 1.3.4 Orientation, Level AA |
Content is not restricted to a single orientation, unless it's essential |
| 1.4.4 Resize Text, Level AA |
Text can scale up to 200% without loss of content or functionality |
| 1.4.10 Reflow, Level AA |
Content reflows without horizontal scrolling when the viewport is 320px wide |
| 1.4.12 Text Spacing, Level AA |
Line, letter and word spacing can be increased without a loss of content |
| 1.4.8 Visual Presentation, Level AAA |
People can see their preferences for text colour, width, alignment, spacing, and size reflected in the visual presentation |
| Recommendation | Content and information remain visible and understandable when using high contrast themes |
Animation and movement
Helping people to limit animation or reduce motion within content.
No component-specific requirements
Assistive technologies and semantics
Helping people who use a screen reader or other assistive tech by using appropriate code.
View test scenarios: Assistive technologies and semantics
| Standard | Description |
|---|---|
| 1.3.1 Info and Relationships, Level A |
If text characters are used as visual separators between breadcrumb items to indicate hierarchy, these are not conveyed to screen readers |
| 1.3.1 Info and Relationships, Level A |
If the last item in the breadcrumbs represents the current page and is visually different, the aria-current attribute is present to programmatically identify it as the current item |
| 1.3.2 Meaningful Sequence, Level A |
The order of content in the HTML matches the reading order |
| 2.5.3 Label in Name, Level A |
Each link has an accessible name that matches or includes the visible label |
| 4.1.2 Name, Role, Value, Level A |
Each link has an accessible name |
| 4.1.2 Name, Role, Value, Level A |
Each link has a role of link |
| 4.1.2 Name, Role, Value, Level A |
If using a navigation landmark, the correct role is applied |
| 1.3.6 Identify Purpose, Level AAA |
A navigation landmark is used to identify a navigation region |
| Recommendation | If using a navigation landmark, this has a descriptive accessible name, such as "Breadcrumb" |
| Recommendation | An ordered list is used to communicate a structure for the list of links |
| Recommendation | Each link is implemented as an <a> element with an href attribute |
| Recommendation | Markup can be parsed without errors |
Colour and contrast
Helping people who struggle with colour perception or low vision.
View test scenarios: Colour and contrast
| Standard | Description |
|---|---|
| 1.4.1 Use of Color, Level A |
Colour is not the only visual means of conveying information, such as identifying links or the current page |
| 1.4.3 Contrast (Minimum), Level AA |
Each link has a contrast ratio of 4.5:1 against the background |
| 1.4.11 Non-text Contrast, Level AA |
Visual separators between each Breadcrumb item have a minimum contrast ratio of 3:1 against their background |
| 1.4.6 Contrast (Enhanced), Level AAA |
Text contrast ratio at least 7:1 (or 4.5:1 for large text) |
Consistency and predictability
Helping people by keeping functionality and content consistent and predictable.
View test scenarios: Consistency and predictability
| Standard | Description |
|---|---|
| 3.2.1 On Focus, Level A |
A control receiving focus does not initiate a change of context |
| 3.2.3 Consistent Navigation, Level AA |
Breadcrumbs should consistently appear in the same location across pages and maintain a predictable structure that reflects the same hierarchy and order across pages |
| 3.2.4 Consistent Identification, Level AA |
The Breadcrumbs component is identified consistently on multiple pages |
Images and media
Helping people to access (and remove distractions caused by) image, video and audio content.
View test scenarios: Images and media
| Standard | Description |
|---|---|
| 1.1.1 Non-text Content, Level A |
If images are used as visual separators between breadcrumb items to indicate hierarchy, they are not conveyed to screen readers |
Input assistance
Helping people to complete forms, enter data and pass authentication.
No component-specific requirements
Keyboard
Helping people who use a keyboard.
| Standard | Description |
|---|---|
| 2.1.1 Keyboard, Level A |
Each link is focusable using the Tab key and clickable using the Enter key |
| 2.1.2 No Keyboard Trap, Level A |
Each link does not trap focus |
| 2.4.3 Focus Order, Level A |
Each link receives focus in logical order |
| 2.4.7 Focus Visible, Level AA |
Each link has a visible focus indicator |
| 2.4.11 Focus Not Obscured (Minimum), Level AA |
Each link is not fully hidden by other content when it receives keyboard focus |
| 2.1.3 Keyboard (No Exception), Level AAA |
Keyboard operability without exception |
| 2.4.12 Focus Not Obscured (Enhanced), Level AAA |
Focus is not even partially hidden by other content |
| 2.4.13 Focus Appearance, Level AAA |
Each link has a custom focus style with a solid 2 pixel thick perimeter, or equivalent, and a contrast ratio of at least 3:1 against the background colour |
Pointer and touch
Helping people use single pointer or touch interactions.
View test scenarios: Pointer and touch
| Standard | Description |
|---|---|
| 2.5.2 Pointer Cancellation, Level A |
Each link is activated on the up event, not on the down event |
| 2.5.8 Target Size (Minimum), Level AA |
Each link has a target area size and spacing of at least 24 by 24 CSS pixels |
| 2.5.5 Target Size (Enhanced), Level AAA |
Each link has a target area size and spacing of at least 44 by 44 CSS pixels |
Text comprehension (optional)
Helping people to read and understand text content.
No component-specific requirements