[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:

 

<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;
    }
  }
}

 

posted @ 2019-08-13 18:30  Zhentiw  阅读(249)  评论(0)  编辑  收藏  举报