Issue #4 - the current page

Use the aria-current attribute to highlight the current page in a navigation, both visually and semantically.

<nav>
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about-us" aria-current="page">About us</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

If you use a class like .active to highlight the current page within a set of links, only sighted users will be hinted at which page is the current page.

<nav>
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about-us" class="active">About us</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

.active {
  font-weight: bold;
}

Instead of a simple class, you can use the aria-current attribute with the page value. The attribute communicates the active page to assistive technology and you can use it to select the link in CSS.

<nav>
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about-us" aria-current="page">About us</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

[aria-current="page"] {
  font-weight: bold;
}

Here's a quick demo of this pattern used with TalkBack on Android. (Heads up! The recorded audio is pretty loud, sorry.)

There are more usages for the aria-current attribute. Check out the links below to learn more.

Resources

• Aditus - aria-current
• Using the aria-current attribute by Léonie Watson
• aria-current (state)