[HTML5] Add Semantic Styling to the Current Page of a Navigation Item with aria-current

In this lesson, we are going to use aria-current to give a screen reader user more context about what the current page is. Historically, many developers use an .active class to indicate that the page in a menu is the same that you're on.

Instead of using a class, we are going to use the aria-current attribute to add more semantic value to the HTML and use that attribute to style the active link.

Note: VoiceOver testing works best on the Native Safari Browser, hence why we should always use Safari to test.

More resources:

• Using the aria current attribute
• W3 WAI-ARIA - aria-current
• Breadcrumb Example - w3-WAI ARIA Practices

 

<nav>
        <ul class="menu">
          <li class="menu__item">
            <a href="/" class="menu__link" aria-current="page">Home</a>
          </li>
          <li class="menu__item">
            <a href="/" class="menu__link">About</a>
          </li>
          <li class="menu__item">
            <a href="/" class="menu__link">News</a>
          </li>
          <li class="menu__item">
            <a href="/" class="menu__link">Contact</a>
          </li>
        </ul>
      </nav>

.menu {
  display: flex;
  padding: 0;
  list-style: none;

  .menu__link {
    display: inline-block;
    position: relative;
    text-transform: uppercase;
    font-weight: bold;
    color: #6505cc;
    padding: 0.675rem;
    margin: 0 0.5rem;
    font-size: 1.5rem;
    text-decoration: none;

    &[aria-current="page"] {
      border-bottom: 8px solid #6505cc;
    }
  }
}