Overview
Breadcrumbs should be accessible via keyboard navigation and provide clear navigation context to screen readers.
Use proper semantic markup to help assistive technologies understand the hierarchical relationship.
Maintain adequate colour contrast (4.5:1 minimum) and make sure interactive elements have sufficient size for easy interaction.
Keyboard Interactions
|
tab |
Moves focus between breadcrumb links |
|
Shift + Tab |
Moves focus backwards through breadcrumb links |
|
enter |
Activates the focused breadcrumb link |
Semantic Markup
- Use <nav> element with aria-label="breadcrumb" to identify the breadcrumb navigation.
- Use <ol> (ordered list) to represent the hierarchical sequence of breadcrumb items.
- Use aria-current="page" on the current page item to indicate the user's current location.
- Make sure breadcrumb links are properly labelled and provide clear context about their destination.
- Consider using structured data markup to help search engines understand the site hierarchy.