On this page…
Goal
Ensure that the breadcrumbs on a page semantically reflect that they represent a list of links in a specific order.
Why this matters
See Why does it matter if our HTML is semantic?
How to implement
The preferred way to write a list of breadcrumbs is in an ordered list (<ol>
) within a <nav>
element.
A simplified view of this site’s breadcrumbs in an ordered list is follows.
<nav aria-label="Breadcrumbs">
<ol>
<li>
<!-- Home Link -->
<a href="https://accessibility.perpendicularangel.com"><i class="iconFont" aria-hidden="true"></i>Home</a>
</li>
<li>
<a href="https://accessibility.perpendicularangel.com/roles/">Roles</a>
</li>
<li>
<a href="https://accessibility.perpendicularangel.com/roles/ux-designer/">UX Designer</a>
</li>
<li>Identifying Image Types</li>
</ol>
</nav>
How to test
- Inspect the breadcrumb in the browser’s code inspection tool and ensure that it is coded as an ordered list. View the page and determine what order it would be read (top to bottom and left to right for English-speaking pages.)
If the breadcrumbs are in the wrong order, or if the breadcrumbs are not semantically marked up to reflect their order, raise an issue.