Атрибут aria-current – состояние (state) из спецификации WAI-ARIA (см. ARIA): он помечает элемент, который является текущим в наборе родственных элементов. Зрячий пользователь видит выделенный пункт меню – жирным, цветом, подчёркиванием; скринридер эту стилизацию не читает, и без атрибута активный пункт ничем не отличается от остальных. aria-current закрывает этот разрыв: программа чтения экрана озвучивает «текущая страница» вместе с текстом ссылки. Это один из самых дешёвых приёмов доступности (a11y): один атрибут, ноль JavaScript на классических сайтах, заметная польза для навигации.
Как это работает
Атрибут ставится на элемент внутри набора – пункт меню, хлебную крошку, шаг мастера, ячейку календаря – и принимает одно из семи значений:
| Значение | Что помечает | Типовой сценарий |
|---|---|---|
| page | Текущая страница в наборе ссылок | Меню, хлебные крошки, пагинация |
| step | Текущий шаг процесса | Чекаут, многошаговая форма, визард |
| location | Текущая точка в визуальном окружении | Подсвеченный узел блок-схемы |
| date | Текущая дата | Календарь, датапикер |
| time | Текущее время | Расписание |
| true | Текущий элемент набора, если точные значения не подходят | Общий случай |
| false | Не текущий элемент (значение по умолчанию) | Атрибут обычно просто не ставят |
Скринридер добавляет статус к озвучке элемента: ссылку «Услуги» с aria-current="page" NVDA объявит как «Услуги, текущая страница» – пользователь получает ту же информацию, что зрячий считывает по выделению цветом.
Два правила из спецификации. Первое: текущим помечают только один элемент набора – два aria-current в одном меню дезориентируют пользователя. При этом на одной странице спокойно сосуществуют разные наборы: page в главном меню и step в шагах оформления заказа. Второе: любое нераспознанное непустое значение трактуется как true. Опечатка вида aria-current="active" разметку не сломает, элемент будет объявлен текущим, но точную семантику – страница, шаг, дата – скринридер уже не передаст.
page или location: что ставить на хлебные крошки
Частая путаница – выбор значения для крошек. Паттерн Breadcrumb в W3C ARIA Authoring Practices Guide (APG) однозначен: ссылка на текущую страницу получает aria-current="page"; если последний элемент крошек не является ссылкой, атрибут опционален. Значение location зарезервировано за другим сценарием – текущей точкой в визуальном контексте вроде узла блок-схемы. Совет ставить в крошки location, который встречается в части статей, расходится с APG – ориентироваться стоит на первоисточник. Запомнить разницу просто: page отвечает на вопрос «на какой я странице», location – «в какой точке окружения я нахожусь».
Не подменяет aria-current и атрибут aria-selected: в ролях tab, option, gridcell и row используется aria-selected. Показательный случай – датапикер: сегодняшний день несёт aria-current="date", а выбранная пользователем дата – aria-selected="true". Это два разных состояния на соседних ячейках одного календаря.
Зачем это нужно
Классический подход к активному пункту меню – класс .active, который несёт только визуал. aria-current делает ту же работу сразу на двух уровнях:
- Семантика – скринридер объявляет «текущая страница», и пользователь понимает, где находится, не сопоставляя пункты меню с заголовком страницы.
- Стилизация – CSS-селектор атрибута заменяет класс:
nav a[aria-current="page"] { … }. Состояние и стиль живут в одном источнике правды, дублирующий класс .active становится не нужен.
Сценарии применения – вся навигация, где есть «текущий» элемент: главное меню, хлебные крошки, пагинация каталога, шаги чекаута, календарь. Приём давно вышел на уровень платформ: в ядре Drupal, например, ссылки на текущую страницу автоматически получают aria-current="page". В SPA атрибут переставляют скриптом при смене маршрута; на классических сайтах, где HTML собирает сервер, достаточно условия в шаблоне меню. Есть и косвенный бонус для машинного чтения: явная пометка «вот текущая страница» помогает парсерам, включая краулеры LLM, точнее восстанавливать структуру и навигацию сайта – та же логика семантической разметки, которая работает на GEO.
Пример
Меню Битрикс-сайта: компонент меню сам проставляет пунктам флаг SELECTED, так что правка сводится к шаблону – вместо класса выводим атрибут:
<nav aria-label="Основное меню">
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/services/" aria-current="page">Услуги</a></li>
<li><a href="/contacts/">Контакты</a></li>
</ul>
</nav>nav a[aria-current="page"] {
font-weight: 700;
border-bottom: 2px solid currentColor;
}Селектор атрибута заменил класс .active: PHP-шаблон выводит только атрибут, CSS реагирует на него, и рассинхрон «семантика есть, стиля нет» становится невозможным. Тот же приём – в хлебных крошках (паттерн APG) и шагах чекаута:
<nav aria-label="Хлебные крошки">
<ol>
<li><a href="/">Главная</a></li>
<li><a href="/guides/">Гайды</a></li>
<li><a href="/guides/aria/" aria-current="page">ARIA-атрибуты</a></li>
</ol>
</nav>
<ol>
<li><a href="/cart/">Корзина</a></li>
<li><a href="/delivery/" aria-current="step">Доставка</a></li>
<li>Оплата</li>
</ol>В пагинации каталога логика та же: aria-current="page" получает номер открытой страницы списка. Обратите внимание на aria-label у обоих nav: когда на странице несколько навигационных лендмарков, их различают именами – подробнее в статье про aria-label. А состояние раскрытия мобильного меню, внутри которого живёт этот список, сообщает уже другой атрибут – aria-expanded.
