aria-label

Определение

aria-label – атрибут WAI-ARIA, задающий элементу доступное имя (accessible name) для скринридеров. Обязателен для кнопок-иконок без текста; перекрывает видимый текст и не работает на div и span без роли.

4 мин 82 21 июля 2026 Обновлено 12 августа

Атрибут aria-label входит в спецификацию WAI-ARIA – набор атрибутов ARIA, которыми HTML-разметке добавляют семантику для вспомогательных технологий. Его единственная задача – задать элементу доступное имя (accessible name): строку, которую скринридер произнесёт вместо отсутствующего или невнятного текста. Зрячий пользователь видит иконку-крестик и понимает, что кнопка закрывает окно; программа чтения экрана без aria-label объявит только «кнопка», без имени. Это базовый инструмент доступности (a11y) и одновременно самый злоупотребляемый ARIA-атрибут: на аудитах проблемы чаще создаёт не его отсутствие, а избыточное или неправильное применение.

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

Браузер вычисляет доступное имя каждого элемента по алгоритму accessible name computation и передаёт его вспомогательным технологиям через дерево доступности. Источники имени имеют строгий приоритет: сначала aria-labelledby, затем aria-label, затем нативные механизмы – видимый текст элемента, label у поля формы, alt у изображения, title. Отсюда два следствия. Первое: aria-label перекрывает видимый текст кнопки, alt картинки и подпись инпута – скринридер услышит только его. Второе: если на элементе заданы оба ARIA-атрибута, победит aria-labelledby. Базовый пример – кнопка-иконка без текста:

<button type="button" aria-label="Закрыть">
  <svg aria-hidden="true" focusable="false">…</svg>
</button>

Второй нюанс – aria-label работает не везде. Спецификация запрещает именование для ролей generic (обычные div и span без role), paragraph, code, emphasis, strong, time и других статических ролей. По тестам скринридеров JAWS и NVDA игнорируют aria-label на статике без роли, VoiceOver и TalkBack озвучивают лишь частично – поведение непредсказуемо, полагаться на него нельзя. Практическое правило: атрибут надёжен только на интерактивных элементах, виджетах, лендмарках, изображениях и iframe.

Когда подходящий текст уже есть в разметке, вместо невидимой строки на него ссылаются через aria-labelledby:

<h2 id="billing">Платёжные данные</h2>
<form aria-labelledby="billing">…</form>

Такое имя обновится вместе с заголовком и корректно переведётся автопереводчиком – закрыты сразу два слабых места aria-label, о которых ниже.

aria-label, aria-labelledby, alt и title – в чём разница

Четыре способа задать доступное имя

Атрибут	Как задаёт имя	Когда использовать
aria-label	Невидимая строка прямо в атрибуте; перекрывает видимый текст, alt и title	Видимого текста нет: кнопки-иконки, поле поиска, лендмарки
aria-labelledby	Ссылка по id на видимый текст; имя обновляется вместе с ним; приоритет выше aria-label	Подходящий текст уже есть в разметке: заголовок секции, подпись
alt	Нативное доступное имя изображения	Всегда для содержательных img – ARIA не нужен
title	Тултип; низший приоритет, недоступен с клавиатуры и на тачскринах	Как источник имени не полагаться

Зачем это нужно

Легитимных сценариев немного: кнопки и ссылки, где вместо текста иконка (бургер, крестик, лупа, корзина); различение одинаковых лендмарков, когда на странице два nav – основное меню и хлебные крошки; iframe со сторонним виджетом. Во всех остальных случаях сначала пробуют нативную разметку: в иерархии способов именования aria-label стоит последним. Три антипаттерна, которые встречаются чаще всего:

aria-label на div и span – роль generic запрещает именование, скринридеры атрибут игнорируют или ведут себя по-разному. Типичный случай из вёрстки магазинов: <span aria-label="Скидка">-20%</span> – не работает.
Перекрытие видимого текста – нарушение критерия WCAG 2.5.3 Label in Name. Если у кнопки с текстом «Отправить» стоит aria-label="submit-form", пользователь голосового управления скомандует «нажать Отправить» – и команда не сработает, потому что доступное имя другое. Правило: доступное имя обязано содержать видимый текст, лучше в начале строки.
Ставка на автоперевод – сервис Google Translate не переводит aria-label вовсе, а встроенные переводчики Chrome, Edge и Firefox переводят нестабильно: пропускают скрытые (display:none) и динамически подставленные значения. Тесты Адриана Розелли, обновлённые в июле 2025, подтверждают: полагаться на автоперевод aria-label нельзя. Для мультиязычных сайтов – видимый текст или aria-labelledby.

Для инструкций и подсказок aria-label тоже не подходит: пояснение вроде «пароль не короче 12 символов» должно быть видимым текстом, связанным через aria-describedby, – инструкции нужны всем пользователям, а не только скринридерам. Есть и смежный эффект: корректные доступные имена делают разметку понятнее не только вспомогательным технологиям, но и парсерам поисковиков и LLM, которые восстанавливают структуру страницы для ответов, – это часть базовой гигиены GEO.

Пример

Типовая задача на Битрикс-проектах – шапка интернет-магазина: три кнопки-иконки (поиск, избранное, корзина) и бургер мобильного меню. Без ARIA скринридер объявит четыре безымянные кнопки подряд. Исправленная разметка:

<button type="button" aria-label="Поиск по сайту">
  <svg aria-hidden="true">…</svg>
</button>
<button type="button" aria-label="Избранное">
  <svg aria-hidden="true">…</svg>
</button>
<a href="/cart/" aria-label="Корзина, 3 товара">
  <svg aria-hidden="true">…</svg>
</a>
<button type="button" aria-label="Открыть меню" aria-expanded="false">
  <svg aria-hidden="true">…</svg>
</button>

Иконки закрыты aria-hidden="true", чтобы SVG не озвучивался отдельно, а состояние бургера дополнительно сообщает атрибут aria-expanded. Активный пункт меню, к которому ведёт бургер, помечают атрибутом aria-current. А вот кнопке «Оформить заказ» с нормальным текстом aria-label не нужен вовсе: текст уже является доступным именем, и лишний атрибут только создаст риск расхождения между тем, что видит зрячий пользователь, и тем, что слышит пользователь скринридера.

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

Что делает aria-label и когда он нужен?

Атрибут задаёт элементу доступное имя – строку, которую скринридер озвучит вместо видимого текста. Нужен, когда текста нет: кнопки-иконки (крестик, бургер, лупа), поле поиска без label, различение одинаковых лендмарков вроде двух nav на странице. Если у элемента есть понятный видимый текст, aria-label не нужен.

Чем aria-label отличается от aria-labelledby и что победит, если указать оба?

aria-label содержит строку-имя прямо в атрибуте, а aria-labelledby ссылается по id на видимый текст в разметке и может собирать имя из нескольких элементов. При одновременном указании побеждает aria-labelledby – он стоит выше в алгоритме вычисления доступного имени. Когда подходящий видимый текст уже есть, предпочтителен aria-labelledby: имя обновляется вместе с текстом и нормально переводится.

Почему aria-label не работает на div и span?

У div и span без атрибута role роль generic, а для неё спецификация ARIA запрещает именование. JAWS и NVDA такой aria-label игнорируют, VoiceOver и TalkBack озвучивают частично – поведение непредсказуемо. Надёжно атрибут работает только на интерактивных элементах, виджетах, лендмарках, изображениях и iframe.

Перекрывает ли aria-label видимый текст кнопки?

Да, полностью: скринридер озвучит только значение aria-label, а не текст. Это риск нарушения WCAG 2.5.3 Label in Name – пользователь голосового управления командует по видимому тексту («нажать Отправить»), и если доступное имя другое, команда не сработает. Поэтому доступное имя обязано включать видимый текст, желательно в начале строки.

Переводится ли aria-label автопереводчиками?

Ненадёжно. Сервис Google Translate не переводит aria-label вовсе; встроенные переводчики Chrome, Edge и Firefox переводят видимые значения, но пропускают скрытые и динамически подставленные – это подтверждают тесты Адриана Розелли, обновлённые в июле 2025. Для мультиязычных сайтов надёжнее видимый текст или aria-labelledby.

Чем aria-label отличается от alt и title?

alt – нативное доступное имя изображения, для img используют его, а не ARIA. title создаёт тултип и считается ненадёжным источником имени: у него низший приоритет, он недоступен с клавиатуры и на тачскринах. aria-label при этом перекрывает и alt, и title, если задан на том же элементе.

Нужен ли aria-label ссылке или кнопке с нормальным текстом?

Нет – видимый текст уже является доступным именем. Лишний aria-label в лучшем случае бесполезен, в худшем перекроет текст другим значением и нарушит WCAG 2.5.3. Если нужно добавить контекст, доступное имя всё равно должно начинаться с видимого текста.

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

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

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

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

Статья Что боты находят на сайте, а вы – нет Боты ходят по изнанке сайта, куда живой человек не забредёт, и фиксируют в логах то, чего не видно ни в Метрике, ни на витрине: падающие с ошибкой 500 страницы каталога, битый файл с 747 обращениями, поток сканеров секретов. Разбираю на реальных логах, что искать и как чинить. 7 мин 216 22 июля 2026 Инструкция Как выгрузить и читать access-логи, если хостинг хранит их три дня Access-лог – единственное место, где виден весь трафик сайта, включая ИИ-ботов, которых не замечают счётчики. Разбираю на практике: где взять логи, как не потерять их из-за ротации, какие команды показывают ботов, ошибки и подозрительную активность. 7 мин 170 21 июля 2026 Флагманский гайд AI-анализ email-обращений: методика на стыке Яндекс.Метрики и Claude Code Классический email-трекинг отвечает на вопрос «откуда пришло обращение». AI-слой отвечает на вопросы, которые раньше требовали ручного аналитика: значим ли email на фоне звонков, форм и мессенджеров, почему один источник даёт качественные обращения, а другой – пустые, какие сегменты визитов предшествуют письму, что написать в ответ с учётом пути пользователя. Здесь – как я собираю это на уже имеющемся стеке: Logs API Метрики, PostgreSQL и Claude Code, без новых платных сервисов. 11 мин 297 26 мая 2026 Флагманский гайд Майкор: ИИ-аудит проекта по 4 точкам контакта Майкор – это перекрёстный ИИ-аудит проекта в 4 точках контакта: сайт, контекстная реклама, AI-поиск и Яндекс.Карты. Я анализирую каждую систему и смотрю связки между ними – где маркетинг рассказывает одно, реклама ведёт на другое, а AI-системы цитируют третий номер телефона. В одном из моих аудитов медицинской клиники в Москве у организации в индексе AI-сервисов оказалось 6 разных номеров и всего 7 упоминаний на 64 проверочных запроса – при том, что в обычной выдаче Яндекса клиника была в топ-1. Майкор закрывает такие разрывы за один аудит вместо четырёх раздельных. 16 мин 501 13 мая 2026 Гайд FAQPage Schema: как разметить блок частых вопросов и попасть в AI-ответы FAQPage schema – один из самых эффективных типов разметки для попадания в AI-ответы. Страницы с FAQPage schema цитируются AI-поисковиками в 2,7 раза чаще. В этом гайде – формат разметки, правила написания ответов для AI, реализация на 1С-Битрикс и типичные ошибки, которые обнуляют эффект. 8 мин 331 25 апреля 2026