Что такое aria-labelledby? - Визуальная маркировка элементов с помощью WAI-ARIA

Атрибут aria-labelledby — один из самых мощных инструментов в Вашем инструментарии WAI-ARIA. Он позволяет Вам создать метку ("Accessible Name" — доступное имя) элемента из содержимого одного или нескольких других элементов на странице. Это особенно полезно, если видимая метка присутствует, но не связана напрямую с интерактивным элементом через нативный HTML-элемент, такой как <label>. Он создает программную связь, которая имеет решающее значение для вспомогательных технологий, таких как скринридеры, чтобы передать контекст и функцию компонентов пользовательского интерфейса.

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

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

"Identifies the element (or elements) that labels the current element. See related aria-describedby." [1]

По сути, это означает: атрибут содержит один или несколько ID других элементов на странице. Текстовое содержимое этих элементов затем используется вспомогательными технологиями в качестве метки для элемента, на котором установлен aria-labelledby.

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

Представьте, что у Вас сложный пользовательский интерфейс. Иногда текст, описывающий элемент, находится не прямо рядом с ним или его нельзя просто поместить в тег <label>. Здесь вступает в игру aria-labelledby.

Вы указываете атрибуту aria-labelledby список id-атрибутов, разделенных пробелами. Затем браузер собирает текстовое содержимое каждого из этих элементов в указанном порядке и объединяет их в одну строку. Эта строка становится Accessible Name (доступным именем) элемента — то есть именем, которое скринридер зачитывает, когда пользователь сталкивается с этим элементом.

Ключевым моментом является приоритет при расчете доступного имени. Если Вы используете aria-labelledby, он переопределяет другие методы поиска имени, такие как содержимое самого элемента или атрибут aria-label. Он имеет очень высокий приоритет.

Следующая диаграмма показывает процесс формирования доступного имени с помощью aria-labelledby:

Процесс расчета доступного имени с помощью aria-labelledby

Текстовое описание схемы "Процесс расчета доступного имени с помощью aria-labelledby"

Этот блок-схема иллюстрирует, как работает aria-labelledby.

1. Элемент имеет атрибут aria-labelledby="id1 id2".
2. Браузер и Accessibility API анализируют этот атрибут.
3. Они ищут элементы в DOM с ID "id1" и "id2".
4. Текстовое содержимое этих двух элементов извлекается.
5. Содержимое объединяется в одну строку в порядке "id1", затем "id2".
6. Этот объединенный текст становится доступным именем исходного элемента.
7. Скринридер произнесет это объединенное имя, когда пользователь сфокусируется на элементе.

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

aria-labelledby — это не универсальное решение, а специализированный инструмент для определенных ситуаций. Вот наиболее распространенные варианты использования:

1. Маркировка диалогов и модальных окон: Заголовок <h2> внутри диалогового окна может служить идеальной меткой для всего контейнера диалога (role="dialog").
2. Связывание полей формы с нестандартными метками: Если метка по дизайнерским причинам не может быть напрямую связана с помощью <label> (например, в сложных таблицах или сетках), aria-labelledby может создать этот мост.
3. Комбинирование нескольких текстовых источников: Иногда полная метка состоит из нескольких видимых текстовых элементов. С помощью aria-labelledby Вы можете объединить их в осмысленное целое.
4. Маркировка интерактивных элементов без видимого текста: Кнопка, содержащая только значок, может быть помечена близлежащим видимым текстовым фрагментом.
5. Структурирование сложных виджетов: В таких компонентах, как radiogroup, menu или tree, родительский элемент (например, div с заголовком) может пометить всю группу.

Практические примеры

Здесь Вы видите разницу между хорошим и плохим применением aria-labelledby.

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

Диалоговое окно с aria-labelledby

<!--
  Хороший пример:
  Контейнер диалога (role="dialog") маркируется заголовком (id="dialog-title").
  Скринридер произнесет "Редактировать настройки, Диалог" при открытии диалога.
-->
<div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
  <h2 id="dialog-title">Редактировать настройки</h2>
  <!-- ... Содержимое диалога ... -->
  <button>Сохранить</button>
  <button>Отмена</button>
</div>

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

Простое поле формы - Неправильное использование

<!--
  Плохой пример:
  Здесь aria-labelledby используется без необходимости вместо нативного элемента <label>.
  <label for="username"> дает больше преимуществ, например, фокусировку на поле ввода при клике на метку.
-->
<p id="user-label">Имя пользователя:</p>
<input type="text" id="username" aria-labelledby="user-label" />

<!--
  Вот как это было бы правильно и надежнее:
-->
<label for="username_correct">Имя пользователя:</label>
<input type="text" id="username_correct" />

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

Чтобы правильно и эффективно использовать aria-labelledby, Вам следует соблюдать несколько правил.

Всегда отдавайте предпочтение нативным HTML-решениям

Первое правило использования ARIA гласит:

Используйте нативные HTML-элементы и атрибуты, когда это возможно [2].

Для полей формы <label for="id"> почти всегда является лучшим выбором [3]. Это более надежно, предлагает большую область для клика и не требует JavaScript для работы. Используйте aria-labelledby только тогда, когда нативное решение невозможно реализовать.

Убедитесь, что ссылки на ID действительны

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

Объединяйте несколько ID обдуманно

Если Вы ссылаетесь на несколько ID, их текстовое содержимое будет соединено в указанном порядке с пробелом между ними. Проверьте результат с помощью скринридера, чтобы убедиться, что полученная метка звучит понятно и естественно.

Комбинация нескольких элементов маркировки

<h3 id="form-heading">Контактная форма</h3>
<!-- ... другие поля ... -->
<label id="date-label">Дата рождения</label>
<span id="date-format" class="small-text">(ДД.ММ.ГГГГ)</span>
<input type="text" aria-labelledby="form-heading date-label date-format" />
<!-- Скринридер скажет: "Контактная форма Дата рождения (ДД.ММ.ГГГГ), Поле ввода" -->

Не используйте aria-labelledby и aria-label одновременно

Согласно спецификации [4] по расчету доступного имени, aria-labelledby имеет приоритет над aria-label. Если Вы разместите оба атрибута на одном элементе, значение aria-label будет проигнорировано. Это может привести к путанице при поддержке кода. Выберите один из двух методов.

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

aria-labelledby — это то же самое, что и aria-describedby

Это распространенное заблуждение. Эти два атрибута имеют разные цели:

• aria-labelledby предоставляет имя элемента (существенную информацию, идентичность). Он отвечает на вопрос: "Что это?"
• aria-describedby предоставляет описание (дополнительную, второстепенную информацию). Он отвечает на вопрос: "Что еще мне нужно об этом знать?"

Скринридер обычно немедленно зачитывает имя, тогда как описание часто зачитывается после короткой паузы или по запросу пользователя.

aria-labelledby является универсальной заменой элемента <label>

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

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

• Accessible Name (Доступное имя)
• aria-label
• aria-describedby
• WAI-ARIA
• Label (Метка)

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

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

Используйте aria-labelledby, если текст для метки уже виден на странице. Используйте aria-label, если видимой метки нет, и Вам нужно предоставить исключительно "заэкранный" текст для вспомогательных технологий (например, для кнопки только со значком).

Что произойдет, если ID, указанный в aria-labelledby, не существует?

Если браузер не может найти ID, он просто игнорируется. Если все ссылки на ID недействительны, браузер обращается к следующему методу в иерархии для расчета доступного имени (например, текстовому содержимому элемента). В худшем случае элемент не имеет доступной метки, что является явным нарушением WCAG.

Могу ли я применить aria-labelledby к любому HTML-элементу?

Да, aria-labelledby является глобальным атрибутом ARIA и может быть применен к любому HTML-элементу. Однако имеет смысл использовать его только для элементов, которым требуется доступное имя. К ним относятся интерактивные элементы (такие как button, input, a), элементы с ролью виджета (такие как role="dialog", role="slider") и регионы-ориентиры (такие как <nav> или role="search").

Как скринридеры объединяют содержимое при наличии нескольких ID?

Скринридеры зачитывают текстовое содержимое элементов в том порядке, в котором их ID перечислены в атрибуте aria-labelledby. Между отдельными частями вставляется пробел. aria-labelledby="id1 id2" приводит к выводу "[Содержимое id1] [Содержимое id2]".

Примечание

Эта статья предназначена для передачи знаний и не является юридической консультацией. При реализации цифровой доступности всегда необходимо учитывать конкретные законодательные требования и стандарты.

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. W3C Web Accessibility Initiative (WAI), «W3C Using Aria: Erste Regel der ARIA-Nutzung». 2018 г. [Онлайн]. Доступно на: https://www.w3.org/TR/using-aria/#firstrule ⤴
3. W3C, «H44: Using label elements to associate text labels with form controls», 2023, [Онлайн]. Доступно на: https://www.w3.org/WAI/WCAG22/Techniques/html/H44 ⤴
4. «Accessible Name and Description Computation 1.2». W3C, октябрь 2025 г. Просмотрено: 6 ноябрь 2025 г. [Онлайн]. Доступно на: https://www.w3.org/TR/accname-1.2/ ⤴