The following example demonstrates the breadcrumb design pattern.
- The set of links is structured using an ordered list .
Breadcrumbidentifies 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 of
Breadcrumb. 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
No keyboard interaction needed.
Role, Property, State, and Tabindex Attributes
Provides a label that describes the type of navigation provided in the
||Applied to the last link in the set to indicate that it represents the current page.|
- CSS: breadcrumb.css