Атрибут aria-current для обозначения текущей страницы

Используйте атрибут aria-current, чтобы выделить текущую страницу в навигации как визуально, так и семантически.

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

Если вы используете классы вроде .active для выделения текущей страницы в наборе ссылок, только зрячие пользователи будут получать подсказки о том, какая страница является текущей.

Ниже, пример набора ссылок, среди которых текущая выделена классом .active:

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

Вместо использования классов можно применять атрибут aria-current со значением page. Благодаря ему программа экранного доступа будет сообщать пользователю, какая страница текущая, и вы можете использовать его для выделения ссылки через 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;
}

Вот краткая демонстрация, как данный атрибут объявляется программой экранного доступа TalkBack на Android. (Внимание! Записанный звук довольно громкий.)

Источник: the current page — HTMHell

Поделиться