aria-current

Определение

aria-current – атрибут WAI-ARIA, помечающий текущий элемент в наборе: активный пункт меню, хлебную крошку, шаг чекаута, дату в календаре. Скринридер озвучивает его как "текущая страница" или "текущий шаг".

4 мин 168 21 июля 2026 Обновлено 15 октября

Атрибут aria-current – состояние (state) из спецификации WAI-ARIA (см. ARIA): он помечает элемент, который является текущим в наборе родственных элементов. Зрячий пользователь видит выделенный пункт меню – жирным, цветом, подчёркиванием; скринридер эту стилизацию не читает, и без атрибута активный пункт ничем не отличается от остальных. aria-current закрывает этот разрыв: программа чтения экрана озвучивает "текущая страница" вместе с текстом ссылки. Это один из самых дешёвых приёмов доступности (a11y): один атрибут, ноль JavaScript на классических сайтах, заметная польза для навигации.

Как это работает

Атрибут ставится на элемент внутри набора – пункт меню, хлебную крошку, шаг мастера, ячейку календаря – и принимает одно из семи значений:

Значения aria-current

Значение	Что помечает	Типовой сценарий
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.

Частые вопросы

Что делает aria-current и зачем он, если есть класс .active?

Класс .active несёт только визуал – скринридер его не читает. aria-current сообщает состояние программно: вместе с текстом ссылки будет озвучено "текущая страница". Стилизовать активный пункт при этом можно селектором [aria-current="page"], так что дублирующий класс становится не нужен.

Какие значения принимает aria-current?

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

Что ставить на хлебные крошки – page или location?

page: паттерн Breadcrumb в W3C APG прямо указывает, что ссылка на текущую страницу получает aria-current="page", а если последний элемент крошек не ссылка – атрибут опционален. location зарезервирован для текущей точки в визуальном контексте вроде узла блок-схемы. Советы ставить в крошки location расходятся с APG.

Можно ли пометить aria-current несколько элементов?

В одном наборе – нет: текущим помечают ровно один элемент, иначе пользователь скринридера дезориентирован. На странице при этом могут сосуществовать разные наборы со своими пометками: page в меню и step в шагах оформления заказа.

aria-current или aria-selected – что ставить на активный таб?

aria-selected: в ролях tab, option, gridcell и row используется именно он, aria-current там не замена. Показательный пример – датапикер: сегодняшний день помечен aria-current="date", а выбранная пользователем дата – aria-selected="true".

Что произойдёт, если написать невалидное значение вроде aria-current="active"?

Любая нераспознанная непустая строка трактуется как aria-current="true". Разметка не сломается и элемент будет объявлен текущим, но точную семантику – страница, шаг, дата – скринридер не передаст. Поэтому значение стоит брать только из списка семи валидных.

Как скринридер озвучивает aria-current="page"?

Вместе с текстом ссылки объявляется её статус: NVDA, например, читает "текущая страница" (current page). Пользователь сразу понимает, на каком пункте меню или крошке находится, не изучая остальную навигацию.

168

Связанные термины

a11y (веб-доступность) a11y – нумероним слова accessibility: между "a" и "y" стоит 11 букв. Обозначает веб-доступность – проектирование сайтов, пригодных для людей с ограничениями зрения, слуха, моторики и когнитивных функций. Главный стандарт – WCAG. ARIA ARIA (WAI-ARIA, Accessible Rich Internet Applications) – стандарт W3C: атрибуты role и aria-*, передающие вспомогательным технологиям роль, свойства и состояния элементов интерфейса. Актуальная версия – 1.2 (2023). aria-expanded aria-expanded – атрибут WAI-ARIA со значениями true/false: сообщает скринридеру, раскрыт ли блок, которым управляет элемент. Ставится на кнопку-триггер аккордеона или меню, а не на скрываемую панель. aria-label (доступное имя элемента) aria-label – атрибут WAI-ARIA, задающий элементу доступное имя (accessible name) для скринридеров. Обязателен для кнопок-иконок без текста; перекрывает видимый текст и не работает на div и span без роли.

Материалы по теме

Что почитать дальше по этой теме

Инструкция Уведомления о заявках с сайта в MAX: что нужно для подключения Что нужно, чтобы заявки с сайта приходили в MAX: верифицированная организация, модерация бота, токен из веб-версии и группа для заявок. Плюс разбор для разработчика. 7 мин 219 4 октября 2026 Статья Что боты находят на сайте, а вы – нет Боты ходят по изнанке сайта, куда живой человек не забредёт, и фиксируют в логах то, чего не видно ни в Метрике, ни на витрине: падающие с ошибкой 500 страницы каталога, битый файл с 747 обращениями, поток сканеров секретов. Разбираю на реальных логах, что искать и как чинить. 7 мин 436 22 июля 2026 Инструкция Как выгрузить и читать access-логи, если хостинг хранит их три дня Access-лог (журнал обращений к серверу) – единственное место, где виден весь трафик сайта, включая ИИ-ботов, которых не замечают счётчики. Разбираю на практике: где взять логи, как не потерять их из-за ротации, какие команды показывают ботов, ошибки и подозрительную активность. 7 мин 431 21 июля 2026 Флагманский гайд ИИ-анализ email-обращений: методика на стыке Яндекс.Метрики и Claude Code Классический email-трекинг отвечает на вопрос "откуда пришло обращение". ИИ-слой отвечает на вопросы, которые раньше требовали ручного аналитика: значим ли email на фоне звонков, форм и мессенджеров, почему один источник даёт качественные обращения, а другой – пустые, какие сегменты визитов предшествуют письму, что написать в ответ с учётом пути пользователя. Здесь – как я собираю это на уже имеющемся стеке: Logs API Метрики, PostgreSQL и Claude Code, без новых платных сервисов. 11 мин 458 26 мая 2026 Флагманский гайд Майкор: ИИ-аудит проекта по 4 точкам контакта Майкор – это перекрёстный ИИ-аудит проекта в 4 точках контакта: сайт, контекстная реклама, ИИ-поиск и Яндекс.Карты. Я анализирую каждую систему и смотрю связки между ними – где маркетинг рассказывает одно, реклама ведёт на другое, а ИИ-системы цитируют третий номер телефона. В одном из моих аудитов медицинской клиники в Москве у организации в индексе ИИ-сервисов оказалось 6 разных номеров и всего 7 упоминаний на 64 проверочных запроса – при том, что в обычной выдаче Яндекса клиника была в топ-1. Майкор закрывает такие разрывы за один аудит вместо четырёх раздельных. 16 мин 744 13 мая 2026