Что такое Accessible Name? – Имя для вспомогательных технологий

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

Довольно непрактично, не так ли?

Именно так чувствуют себя пользователи вспомогательных технологий (ВТ), таких как, например, скринридеры, когда интерактивные элементы на веб-странице не имеют имени. Accessible Name (Доступное имя) — это решающая метка для цифрового мира. Он дает элементу идентификатор, который может быть программно считан программным обеспечением и передан пользователям.

Без него кнопка — это просто "Кнопка", а поле ввода — просто "Поле ввода" – без какого-либо контекста того, что они делают или для чего предназначены.

Что такое Accessible Name?

Официальная спецификация W3C "Accessible Name and Description Computation 1.1" определяет Accessible Name следующим образом:

The accessible name is the programmatic name of a user interface element that is presented to an accessibility API. The accessible name is used by assistive technologies to identify and refer to an object. [1]

В переводе это означает: Accessible Name — это программное имя элемента пользовательского интерфейса, которое предоставляется API доступности. Accessible Name используется вспомогательными технологиями для идентификации объекта и ссылки на него.

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

Accessible Name — это центральная концепция цифровой доступности. Он представляет собой текстовое представление элемента, которое передается в Дерево доступности (Accessibility Tree). Это дерево представляет собой специальное представление веб-сайта, созданное браузерами и оптимизированное для вспомогательных технологий. Скринридер не читает напрямую HTML-код (DOM), а взаимодействует с этим Деревом доступности.

Браузер рассчитывает Accessible Name для каждого релевантного элемента в соответствии с установленным списком приоритетов. Если Вы как разработчик знаете эти механизмы, Вы можете целенаправленно управлять тем, как элементы Вашего пользовательского интерфейса воспринимаются скринридерами и другими инструментами. Расчет удивительно логичен и следует каскаду, который гарантирует, что самый надежный метод имеет приоритет.

Следующая диаграмма значительно упрощает этот процесс принятия решений:

Упрощенная иерархия расчета Accessible Name

Текстовое описание схемы "Упрощенная иерархия расчета Accessible Name"

Блок-схема начинается с утверждения, что элементу требуется имя. Первый шаг проверки — наличие атрибута aria-labelledby. Если да, то содержимое элементов, на которые он ссылается, используется как Accessible Name, и процесс завершается. Если нет, проверяется наличие атрибута aria-label. Если да, его значение становится Accessible Name. Если нет, ищется нативная HTML-метка, например, элемент <label> для поля ввода или атрибут alt для изображения. Если такая метка найдена, ее содержимое становится Accessible Name. Если нет, проверяется, имеет ли сам элемент текстовое содержимое, как в случае с кнопкой. Если да, этот текст является Accessible Name. В качестве последнего средства проверяется наличие атрибута title. Если да, его значение используется как резерв. Если ни одно из этих условий не выполнено, элемент не имеет Accessible Name, что является проблемой доступности.

Важно понимать, что этот каскад прерывается при первом успешном методе. Таким образом, aria-label всегда переопределяет текстовое содержимое кнопки. Это может быть полезно, но также является частым источником ошибок.

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

Accessible Name необходим практически для каждого интерактивного или значимого элемента на веб-странице. Его основные задачи:

• Идентификация элементов управления: Кнопки, ссылки, поля ввода, чекбоксы, радиокнопки и другие элементы формы нуждаются в четком имени, чтобы пользователи знали, какое действие они вызывают или какую информацию ожидают.
• Описание изображений: Для изображений, передающих информацию, текст alt служит Accessible Name. Он описывает, что изображено на картинке, и позволяет незрячим пользователям понять визуальное содержимое.
• Контекст для регионов и ориентиров (Landmarks): ARIA-ориентиры, такие как <nav>, <main> или <aside>, также могут получить Accessible Name (например, через aria-label="Главная навигация"), чтобы помочь пользователям ориентироваться на странице, особенно если присутствуют несколько одинаковых ориентиров.
• Выполнение критериев WCAG: Корректный Accessible Name является базовым условием для выполнения многочисленных критериев успеха Web Content Accessibility Guidelines (WCAG), в частности, в рамках принципов "Воспринимаемость" и "Управляемость".

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

Вот несколько типичных примеров, демонстрирующих разницу между элементом с Accessible Name и без него.

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

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

<!--
  Хороший пример: Текст "Удалить профиль" содержится непосредственно в кнопке.
  Он служит надежным, видимым и доступным именем.
-->
<button type="button">
  <svg aria-hidden="true" focusable="false" ...>
    <!-- ... Путь к иконке ... -->
  </svg>
  Удалить профиль
</button>

Кнопка-иконка с aria-label

<!--
  Хороший пример: Кнопка не имеет видимого текста.
  `aria-label` дает ей четкое Accessible Name для скринридеров.
-->
<button type="button" aria-label="Открыть настройки">
  <svg aria-hidden="true" focusable="false" ...>
    <!-- ... Иконка шестеренки ... -->
  </svg>
</button>

Поле ввода с нативной меткой

<!--
  Хороший пример: Элемент <label> прочно связан с <input> через атрибут `for`.
  Это лучший метод для полей формы.
-->
<label for="username">Имя пользователя</label>
<input type="text" id="username" name="username" />

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

Кнопка только с иконкой без имени

<!--
  Плохой пример: Эта кнопка не имеет ни текстового содержимого, ни ARIA-метки.
  Скринридер объявит только "Кнопка" – функция не ясна.
-->
<button type="button">
  <svg aria-hidden="true" focusable="false" ...>
    <!-- ... Иконка шестеренки ... -->
  </svg>
</button>

Поле ввода только с плейсхолдером

<!--
  Плохой пример: `placeholder` не является заменой для <label>.
  Он исчезает при вводе и не используется надежно как Accessible Name
  некоторыми комбинациями браузеров/ВТ.
-->
<input type="text" name="username" placeholder="Имя пользователя" />

Ссылка вокруг изображения без Alt-текста

<!--
  Плохой пример: Ссылка окружает изображение без атрибута alt.
  Скринридеры могут прочитать имя файла изображения ("logo.png")
  или только "Ссылка", что бесполезно.
-->
<a href="/startseite">
  <img src="/logo.png" />
</a>

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

Чтобы гарантировать, что Ваши элементы всегда имеют корректный и полезный Accessible Name, Вы должны следовать нескольким основным правилам.

По возможности всегда используйте видимые метки

Лучшая метка — это та, которую могут видеть все пользователи [2]. Используйте текстовое содержимое кнопки или ссылки непосредственно в качестве ее имени. Для полей формы элемент <label>, связанный с id поля через атрибут for, является наиболее надежным и предпочтительным методом.

aria-label только как последнее средство для невидимых меток

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

предостережение

aria-label не переводится автоматически службами перевода браузера. Это может создать проблемы для международных пользователей. Видимая метка, скрытая с помощью CSS (например, с классом sr-only), часто является лучшей альтернативой.

aria-labelledby для сложных меток

Иногда имя элемента состоит из уже существующего текста на странице. Вместо того чтобы дублировать текст в aria-label, Вы можете сослаться на ID соответствующих текстовых элементов с помощью aria-labelledby. Затем браузер объединяет их содержимое в Accessible Name.

Пример: Ссылка 'Читать далее', которая ссылается на заголовок.

<h2 id="article-title">Интересная статья о доступности</h2>
<p>Краткое введение к статье...</p>
<a href="..." aria-labelledby="read-more-link article-title">
  <span id="read-more-link">Читать далее</span>
</a>

Accessible Name здесь будет: "Читать далее Интересная статья о доступности".

Видимая метка должна содержаться в Accessible Name

Пользователи программ распознавания речи навигируют, произнося то, что они видят. Если кнопка видимо подписана "Отправить", Accessible Name должен содержать слово "Отправить" [3]. Пользователь говорит "Нажмите Отправить", но если Accessible Name — "Отправить форму", команда не сработает.

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

"Атрибут title — это хороший Accessible Name"

Это распространенное заблуждение. Атрибут title является самым последним и наименее надежным вариантом в каскаде расчета имени. Поддержка браузерами и скринридерами непоследовательна. Часто он игнорируется или читается только при определенных условиях (например, после паузы). Никогда не полагайтесь на атрибут title для передачи важной информации. Он предназначен в первую очередь для всплывающей подсказки при наведении мыши и не является надежной доступной меткой.

"placeholder — это хорошая метка для поля ввода"

placeholder — это помощь при вводе или пример формата, а не метка. Он исчезает, как только пользователь начинает печатать, и больше не доступен как контекст. Старые скринридеры часто не читают плейсхолдеры, и они, как правило, имеют слишком низкий цветовой контраст, чтобы считаться меткой. Каждое поле ввода нуждается в правильном, постоянном <label>.

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

• Accessible Description
• ARIA (Accessible Rich Internet Applications)
• Дерево доступности (Accessibility Tree)
• Скринридер (Screenreader)
• WCAG (Web Content Accessibility Guidelines)
• Name, Role, Value

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

В чем разница между Accessible Name и Accessible Description?

Accessible Name — это короткое, точное обозначение элемента (как текст на кнопке). Accessible Description (Доступное описание) предоставляет дополнительную, но несущественную информацию. Обычно оно считывается после имени и роли, часто с короткой паузой. Пример: Ссылка с Accessible Name "Справочный центр" может иметь Accessible Description "Открывает Справочный центр в новой вкладке".

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

Основное правило: Используйте <label> всегда, когда это возможно, особенно для стандартных элементов формы. aria-label предназначен для случаев, когда видимая метка отсутствует по дизайнерским причинам (например, кнопки-иконки) или когда нативных HTML-механизмов недостаточно.

Может ли изображение иметь Accessible Name?

Да, безусловно. Для элемента <img> содержимое атрибута alt является Accessible Name. Если изображение носит чисто декоративный характер, атрибут alt следует оставить пустым (alt=""), чтобы скринридеры его игнорировали.

Почему критерий WCAG 2.5.3 "Метка в имени" так важен?

Этот критерий успеха является решающим для пользователей программ распознавания речи. Они взаимодействуют со страницей, произнося видимые метки (например, "Нажмите 'Купить сейчас'"). Если Accessible Name кнопки — "Положить в корзину", а видимый текст — "Купить сейчас", программное обеспечение не сможет сопоставить команду. Таким образом, видимый текст должен быть частью Accessible Name.

Как я могу протестировать Accessible Name элемента?

Самый простой метод — использование инструментов разработчика Вашего браузера. В Chrome, Edge и Firefox есть вкладка "Доступность" (Accessibility). Если Вы выберете там элемент, браузер покажет Вам рассчитанный Accessible Name в Дереве доступности. Альтернативно, Вы, конечно, можете использовать скринридер, такой как NVDA (Windows), VoiceOver (macOS) или TalkBack (Android), для тестирования страницы и прослушивания того, как объявляются элементы.

Примечание

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

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