aria-current

Состояние виджета из WAI-ARIA. Означает, что пользователь сейчас находится на определённом элементе из группы. Например, на четвёртом шаге регистрации или на четвёртой странице с результатами поиска.

Хлебные крошки с aria-current="page".

        
          
          <nav aria-label="Страницы">  <ul>    <li>      <a href="#dogs-breed">        Породы собак      </a>    </li>    <li>      <a href="#irish-breed">        Ирландские породы      </a>    </li>    <li>      <a href="#irish-wolfhound" aria-current="page">        Ирландский волкодав      </a>    </li>  </ul></nav>
          <nav aria-label="Страницы">
  <ul>
    <li>
      <a href="#dogs-breed">
        Породы собак
      </a>
    </li>
    <li>
      <a href="#irish-breed">
        Ирландские породы
      </a>
    </li>
    <li>
      <a href="#irish-wolfhound" aria-current="page">
        Ирландский волкодав
      </a>
    </li>
  </ul>
</nav>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Скринридеры прочитают демку примерно так: «Страницы, навигация. Список из трёх пунктов. Породы собак, ссылка. Ирландские породы, ссылка. Ирландский волкодав, посещённая ссылка, текущая страница».

Добавьте к любому тегу или элементу с ARIA-ролью атрибут aria-current. У него может быть одно из этих значений:

• false (по умолчанию) — это не текущий элемент.
• true — любой текущий элемент.
• page — текущая страница.
• step — текущий шаг.
• location — текущее положение на странице, экране или в контексте выполнения действия.
• date — текущая дата.
• time — текущее время.

Если используете атрибут без значения, для браузеров и вспомогательных технологий это равносильно aria-current="false".

aria-current пригодится в календарях, где можно выбрать дату или время, пагинации по страницам, хлебных крошках, навигации по шагам при заполнении форм и в похожих ситуациях. В дизайне текущий элемент часто выделяют визуально. Например, меняют цвет и размер активного шага или обводят рамкой выбранную дату. Атрибут делает то же самое, но на уровне кода. Благодаря ему пользователи скринридеров узнают, где сейчас находятся.

Текущим может быть один элемент из группы, так что задавайте aria-current только одному тегу. Когда на текущем элементе нельзя сделать фокус, можете не использовать атрибут. Так часто бывает в хлебных крошках, когда текущая страница — это <span> или <a> без атрибута href.

Чтобы атрибут работал правильно, нужен JavaScript. Найдите на странице ссылку или другой элемент, который выбрал пользователь, и добавьте к нему aria-current с нужным значением. Когда пользователь переключился на другой элемент, удалите атрибут у предыдущего тега и добавьте его к выбранному на этот раз. Конечно, можно просто переключать значение с true на false, но не все скринридеры правильно рассказывают об этом. К примеру, некоторые версии NVDA не различают эти значения ☹️

Список шагов при оформлении заказа с aria-current="step".

        
          
          <nav aria-label="Оформление заказа">  <ol>    <li>      <a href="#pay">        Оплата      </a>    </li>    <li>      <a href="#address">        Адрес доставки      </a>    </li>    <li>      <a href="#time" aria-current="step">        Время доставки      </a>    </li>    <li>      <a href="#details">        Детали      </a>    </li>  </ol></nav>
          <nav aria-label="Оформление заказа">
  <ol>
    <li>
      <a href="#pay">
        Оплата
      </a>
    </li>
    <li>
      <a href="#address">
        Адрес доставки
      </a>
    </li>
    <li>
      <a href="#time" aria-current="step">
        Время доставки
      </a>
    </li>
    <li>
      <a href="#details">
        Детали
      </a>
    </li>
  </ol>
</nav>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Пагинация с aria-current="page".

        
          
          <nav aria-label="Страницы с результатами">  <ol>    <li>      <a href="#1">        <span class="visually-hidden">Страница</span>        1      </a>    </li>    <li>      <a href="#2" aria-current="page">        <span class="visually-hidden">Страница</span>        2      </a>    </li>    <li>      <a href="#3">        <span class="visually-hidden">Страница</span>        3      </a>    </li>  </ol></nav>
          <nav aria-label="Страницы с результатами">
  <ol>
    <li>
      <a href="#1">
        <span class="visually-hidden">Страница</span>
        1
      </a>
    </li>
    <li>
      <a href="#2" aria-current="page">
        <span class="visually-hidden">Страница</span>
        2
      </a>
    </li>
    <li>
      <a href="#3">
        <span class="visually-hidden">Страница</span>
        3
      </a>
    </li>
  </ol>
</nav>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

💡 Не путайте aria-current с другим атрибутом выбора aria-selected. aria-current можно использовать со всеми элементами, а aria-selected только в выпадающих списках, панелях вкладок и интерактивных таблицах.

💡 Обычно aria-current используют в навигации, так что хорошо оборачивать нужную группу в <nav> и подписывать её с помощью видимого заголовка и aria-labelledby или видимого только скринридерам aria-label.