Issue #4 - the current page

I really enjoy writing these e-mails because I learn something every time. Even today, when I wrote this pretty short post I’ve learned a few things. If you’re thinking about blogging about web development, don’t hesitate, just do it and if you do it, make sure to send me a link to your blog so that I can read it. :)

Have a great weekend,
Manuel

View in the browser.

HTMHell Newsletter 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.

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)

Read this issue in your browser or share it with others: htmhell.dev/tips/the-current-page