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

  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;

    }

  }

}

巴特西

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

最新文章

热门文章