How to correctly set aria-current for the active breadcrumb item

user_17333349 0
Viewed 443

I was following the breadcrumb example of Bootstrap 5.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

You can see the last item has aria-current:

    <li class="breadcrumb-item active" aria-current="page">Data</li>

However, I also see others put the aria-current on anchor:

    <li class="breadcrumb-item active">
        <a href="#" aria-current="page">Data</a>
    </li>

I test both with Talkback, only the second implementation successfully announces "current page". But I still want to figure out how to correctly implment the aria-current for breadcrumb.

Thank you for help.

bootstrap-5 wai-aria accessibility
1 Answers

Short Answer

The first example is still accessible even though aria-current is not announced.

Both examples you have given can be used in production and will be perfectly accessible.

Longer Answer

While according to the spec you should be able to use aria-current on a none interactive item, in reality most screen readers / browser combinations will not support it on an item you can't interact with.

Your second example is the "correct" usage, adding it to a hyperlink!

Both of the patterns you provide will be accessible without any issues. The aria-current not being announced in the first example is not a problem as the pattern is well known an indicates that "data" is the current page (as it is not a link).

With that being said, you can provide the extra information to screen reader users just for completeness!

We can add "(current page)" in a <span>. We can then visually hide that span with CSS so that it is still read by a screen reader but does not change the visual design using a visually hidden CSS class.

I recommend replacing the Bootstrap .sr-only class with the one in the fiddle below just because it is more robust.

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}
<nav aria-label="breadcrumbs">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active">Data
      <span class="visually-hidden">(current page)</span>
    </li>
  </ol>
</nav>

This pattern will work in every browser and is the most robust if you want to convey the current page in breadcrumbs to Screen Reader users.

user_27028940
Related