Read This First
The code in this example is not intended for production environments. Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
See Also
How to Use Back to Start and Navigation on a Garmin WatchWhat Is Breadcrumbing?Breadcrumb Navigation: a Guide to Types, Benefits and Best PracticesBreadcrumbing: What It Is and How to Deal- There may be support gaps in some browser and assistive technology combinations, especially for mobile/touch devices. Testing code based on this example with assistive technologies is essential before considering use in production systems.
- The ARIA and Assistive Technologies Project is developing measurements of assistive technology support for APG examples.
- Robust accessibility can be further optimized by choosing implementation patterns that maximize use of semantic HTML and heeding the warning that No ARIA is better than Bad ARIA.
About This Example
The following example demonstrates the Breadcrumb Pattern.
Example
Accessibility Features
- The set of links is structured using an ordered list .
- A
navelement labeledBreadcrumb
identifies the structure as a breadcrumb trail and makes it a navigation landmark so that it is easy to locate. - To prevent screen reader announcement of the visual separators between links, they are added via CSS:
- The separators are part of the visual presentation that signifies the breadcrumb trail, which is already semantically represented by the
navelement with its label ofBreadcrumb
. So, using a display technique that is not represented in the accessibility tree used by screen readers prevents redundant and potentially distracting verbosity. - Each link has a border on one side that is skewed with the CSS’
transformproperty so it resembles a slash.
- The separators are part of the visual presentation that signifies the breadcrumb trail, which is already semantically represented by the
Keyboard Support
No keyboard interaction needed.
Role, Property, State, and Tabindex Attributes
| Role | Attribute | Element | Usage |
|---|---|---|---|
aria-label= | nav | Provides a label that describes the type of navigation provided in the nav element. | |
aria-current= | a | Applied to the last link in the set to indicate that it represents the current page. |
JavaScript and CSS Source Code
- CSS: breadcrumb.css
HTML Source Code
To copy the following HTML code, please open it in CodePen.
