Issue #4 - the current page

published on

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

Did you enjoy this tip?

Sign up for the HTMHell newsletter and receive an HTML tip or trick every week via e-mail.