Что такое aria-label? - Доступные метки для элементов

Атрибут aria-label является одним из самых известных и в то же время наиболее неправильно понимаемых инструментов в мире цифровой доступности. При правильном использовании он невероятно эффективен для улучшения пользовательского опыта для пользователей вспомогательных технологий (ВТ), таких как скринридеры. Однако при неправильном использовании он может принести больше вреда, чем пользы. Давайте вместе углубимся и выясним, как вы можете правильно и эффективно использовать aria-label.

Что такое aria-label?

Официальная спецификация определяет aria-label следующим образом:

Defines a string value that labels the current element. [1]

В переводе на русский язык это означает: Он определяет строковое значение (последовательность символов), которое является меткой для текущего элемента.

Подробное объяснение

Представьте, что у вас есть интерактивный элемент, например, кнопка, содержащая только иконку – например, классический "X" для закрытия окна. Зрячий пользователь сразу понимает функцию. Но что слышит пользователь, использующий скринридер? Без дополнительной информации он может услышать только "Кнопка". Это бесполезно.

Именно здесь вступает в игру aria-label. Он обеспечивает этот элемент "доступным именем" (Accessible Name). Это имя невидимо для зрячих пользователей, но считывается вспомогательными технологиями. В случае нашей кнопки "X" вы бы добавили aria-label="Закрыть". Пользователь скринридера услышит "Закрыть, Кнопка" – и сразу поймет, что произойдет, если он ее активирует.

Самое важное, что вы должны понять: aria-label имеет высокий приоритет и переопределяет любое видимое текстовое содержимое элемента для вспомогательных технологий. Если кнопка имеет текст "Узнать больше", и вы дадите ей aria-label="Нажмите здесь", скринридер прочитает "Нажмите здесь", а не "Узнать больше". Это может привести к сильной путанице.

Доступное имя определяется согласно установленной иерархии, которая определена в спецификации "Accessible Name and Description Computation" [2]. aria-label находится высоко в этой иерархии.

Упрощенная иерархия расчета доступного имени

Текстовое описание для схемы "Упрощенная иерархия расчета доступного имени"

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

1. Сначала проверяется, присутствует ли атрибут aria-labelledby. Если да, его содержимое используется как имя.
2. Если нет, проверяется, присутствует ли атрибут aria-label. Если да, его значение используется как имя.
3. Если нет, видимое текстовое содержимое элемента используется как имя.
4. В качестве последней возможности в качестве резервного варианта используется атрибут title.
5. Если ни один из этих методов не дает имени, элемент не имеет доступного имени, что представляет собой проблему доступности. Таким образом, aria-label переопределяет видимое текстовое содержимое.

Для чего он используется?

aria-label — это ваш инструмент выбора, когда нет видимой метки или когда видимая метка недостаточно информативна.

Типичные случаи использования:

• Кнопки-иконки: Кнопки, которые отображают только иконку (например, шестеренка для "Настроек", лупа для "Поиска", "X" для "Закрыть").
• Графические элементы управления: Элементы управления, функция которых представлена ​​чисто визуально.
• Однозначное именование областей-ориентиров (Landmark-regions): Если у вас есть несколько элементов навигации (<nav>) на странице, вы можете различать их, например, с помощью aria-label="Основная навигация" и aria-label="Боковая навигация".
• Уточнение двусмысленных ссылок: Ссылка "Читать далее" неясна без контекста. С aria-label="Читать далее о нашем новом продукте" она становится понятной для пользователей скринридеров. (Хотя часто существуют лучшие методы для этого!)

Вот небольшое дерево решений, которое поможет вам:

Дерево решений по использованию `aria-label`

Текстовое описание для схемы "Дерево решений по использованию aria-label"

Эта диаграмма помогает в принятии решения о том, следует ли использовать aria-label. 1. Вопрос: Имеет ли элемент видимую метку? 2. Если нет: aria-label — отличный выбор. 3. Если да, следующий вопрос: Достаточна ли видимая метка? 4. Если да: aria-label не требуется. 5. Если нет, следующий вопрос: Можно ли улучшить видимый текст? 6. Если да: Улучшите видимый текст. Это предпочтительное решение. 7. Если нет: aria-label может быть использован в качестве последней опции для дополнения контекста, но следует проявлять осторожность.

Примеры из практики

Хороший пример

Кнопка-иконка для закрытия

<!--
  Хороший пример:
  Кнопка без видимого текста.
  aria-label дает ей доступное имя.
-->
<button aria-label="Закрыть диалог">
  <svg aria-hidden="true" focusable="false" ...>
    <!-- Иконка здесь -->
    <path
      d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
    ></path>
  </svg>
</button>

Плохой пример

Кнопка с видимым текстом

<!--
  Плохой пример:
  Эта кнопка уже имеет видимый текст ("Поиск").
  aria-label="Начать поиск" переопределяет этот текст.
  Это приводит к несоответствию.
-->
<button aria-label="Начать поиск">Поиск</button>

Плохой пример создает проблему:

• Пользователь скринридера услышит "Начать поиск, Кнопка".
• Пользователь программного обеспечения для распознавания речи может сказать "Нажать Поиск", что приведет к ошибке, так как доступное имя — "Начать поиск".
• Зрячий пользователь скринридера будет сбит с толку, потому что он читает "Поиск", но слышит "Начать поиск".

Лучшие практики и рекомендации

• Используйте aria-label только при отсутствии видимой метки. Это золотое правило. Если текст присутствует, почти всегда лучше оформить этот текст так, чтобы он был содержательным.
• Никогда не переопределяйте видимый текст. Если элемент имеет видимый текст, этот текст должен быть частью доступного имени. Это прямое требование критерия успеха WCAG 2.5.3 Метка в имени (Label in Name). [3]
• Отдавайте предпочтение нативным HTML-элементам. Для полей форм элемент <label>, связанный с атрибутом for, всегда является лучшим, более надежным и семантически корректным решением, чем aria-label на элементе <input>. [4]
• Будьте точны и кратки. Содержимое aria-label должно быть как настоящая, короткая метка, а не как роман. Для более длинных описаний используйте aria-describedby.
• Не используйте его на статических элементах, таких как <div> или <span>, если только они не имеют специфической ARIA-роли (например, role="navigation" или role="region"), требующей метки. aria-label на простом <div> без роли будет проигнорирован большинством скринридеров.
• Протестируйте вашу реализацию! Ничто не заменит тестирование с использованием настоящего скринридера (NVDA, VoiceOver, JAWS). Таким образом вы убедитесь, что пользовательский опыт действительно такой, как вы его себе представляете.

Распространенные заблуждения

aria-label — это как всплывающая подсказка (Tooltip)

Это неверно. Атрибут title в HTML создает всплывающую подсказку, которая появляется при наведении мыши. aria-label не создает никакого визуального вывода. Он предназначен исключительно для API-взаимодействия со вспомогательными технологиями. Хотя атрибут title иногда служит последним резервом для доступного имени, он notoriously ненадежен и часто недоступен для мобильных пользователей или пользователей, управляющих с помощью клавиатуры. Поэтому не путайте их.

aria-label предназначен для длинных объяснений

Нет, для этого он не подходит. aria-label должен быть короткой, емкой меткой ("именем"). Если вы хотите предоставить дополнительную информацию или инструкции ("описание"), то aria-describedby — это правильный инструмент. Он связывает один элемент с другим элементом на странице, содержимое которого затем зачитывается как описание.

Связанные понятия

• Доступное имя (Accessible Name)
• aria-labelledby
• aria-describedby
• role (Атрибут)
• WAI-ARIA

Часто задаваемые вопросы

В чем разница между aria-label и aria-labelledby?

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

Когда мне НЕ следует использовать aria-label?

Вы не должны использовать aria-label, если элемент уже имеет видимую и содержательную текстовую метку. Кроме того, вы не должны использовать его на общих, неинтерактивных элементах, таких как <div>, <p> или <span>, без соответствующей ARIA-роли, так как там он часто игнорируется.

Влияет ли aria-label на SEO?

Нет, aria-label, как правило, не имеет прямого влияния на поисковую оптимизацию (SEO). Поисковые роботы сосредоточены на видимом содержимом и семантической структуре DOM. aria-label предназначен для пользовательского опыта пользователей ВТ, а не для поисковых систем.

Могут ли все HTML-элементы иметь aria-label?

Технически вы можете установить этот атрибут почти на любой HTML-элемент. Однако он имеет смысл и эффективен только для элементов, которым требуется метка. Как правило, это интерактивные элементы (такие как button, a, input), элементы с ролью ориентира (такие как nav, main) или виджеты с ARIA-ролью (такие как tab, dialog).

Примечание

Информация, содержащаяся в этой статье, в частности ссылки на законодательные нормы или стандарты, такие как WCAG, служит исключительно для общей информации и не является юридической консультацией. По конкретным юридическим вопросам, касающимся цифровой доступности, вы всегда должны обращаться к квалифицированному юристу.

1. World Wide Web Consortium (W3C), «Accessible Rich Internet Applications (WAI-ARIA) 1.2». 2023 г. [Онлайн]. Доступно на: https://www.w3.org/TR/wai-aria-1.2/ ⤴
2. «Accessible Name and Description Computation 1.2». W3C, октябрь 2025 г. Просмотрено: 6 ноябрь 2025 г. [Онлайн]. Доступно на: https://www.w3.org/TR/accname-1.2/ ⤴
3. W3C, «Success Criterion 2.5.3 Label in Name», 2023, [Онлайн]. Доступно на: https://www.w3.org/TR/WCAG22/#label-in-name ⤴
4. W3C, «H44: Using label elements to associate text labels with form controls», 2023, [Онлайн]. Доступно на: https://www.w3.org/WAI/WCAG22/Techniques/html/H44 ⤴