On this page…
In breadcrumbs, the final link of the breadcrumb trail may be a link to the current page. When that’s the case, the link also needs to include information that it is the current page.
Why this matters
Screen readers will inform their users that the link is the current page, which will most likely prevent them from clicking it and reloading the current page when they thought they’d be taken somewhere else.
How to implement
Ensure that the <a>
wrapping the current page includes the aria-current
attribute set to the value of page
.
Ensure that none of the other links in the breadcrumb include the aria-current
attribute.
<nav aria-label="Breadcrumbs">
<ol>
<li><!-- Home Link --> ...</li>
<li>...</li>
<li>...</li>
<li><a aria-current="page" href="https://accessibility.perpendicularangel.com/roles/ux-designer/identifying-image-types/">Identifying Image Types</li>
</ol>
</nav>
How to test
Right-click and inspect the page, confirming that:
- The
<a>
wrapping the current page includes thearia-current
attribute set to the value ofpage
. - None of the other links in the breadcrumb include the
aria-current
attribute.