If the current page is a link, is it marked with aria-current=”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 the aria-current attribute set to the value of page.
  • None of the other links in the breadcrumb include the aria-current attribute.