Перейти к содержимому
Pandus
ru Сменить язык
Меню

WCAG 4.1.2 Имя, роль, значение

Обновлено 14 октября 2026 г. · 3 мин чтения

Уровень
A · WCAG 2.0
EN 301 549
9.4.1.2
Что проверяет тестер
Частично автоматически: У кликабельных областей изображения нет описания, Атрибуты доступности стоят не на тех элементах, У некоторых элементов есть подпись для шрифта Брайля, но нет обычного названия, У нестандартных кнопок нет названия, Атрибуты доступности использованы в неподходящей ситуации, Некоторые элементы используют устаревшие роли доступности, Вся страница скрыта от скринридеров, На скрытые элементы всё ещё можно попасть с клавиатуры, У нестандартных полей ввода нет подписи, Некоторые подписи стоят там, где скринридеры их игнорируют, Нестандартным элементам управления не хватает нужных данных, Некоторые элементы используют несуществующую роль, У некоторых переключателей и флажков нет названия, Некоторые подсказки пустые, В названиях атрибутов доступности опечатки, У атрибутов доступности неверные значения, У некоторых кнопок нет названия, Некоторые подписи указывают не на тот элемент, У встроенного содержимого нет названия, У нескольких встроенных фреймов одинаковое название, У некоторых кнопок форм нет названия, У кнопки-изображения нет текстового описания, У полей формы нет подписей, Некоторые ссылки не сообщают, куда ведут, Кликабельные элементы вложены друг в друга, У выпадающего списка нет подписи, У некоторых раскрывающихся разделов нет названия
Официальный текст
Understanding 4.1.2 Name, Role, Value (W3C, на английском)

Критерий успеха 4.1.2 нужен для того, чтобы программы экранного доступа (скринридеры), голосовое управление и другие вспомогательные технологии могли понять каждый элемент управления на странице и воспользоваться им. Пользователь скринридера слышит «кнопка, В корзину»; пользователь голосового управления говорит «нажать В корзину». Если у элемента нет имени, у него неправильная роль или состояние, которое никогда не обновляется, такие пользователи не могут делать покупки. Это уровень A, в EN 301 549 он представлен как пункт 9.4.1.2. Тот же стандарт принят в Украине как ДСТУ EN 301 549:2022.

Что требует критерий

Для всех компонентов пользовательского интерфейса — в том числе элементов форм, ссылок и компонентов, созданных скриптами:

  • имя и роль могут быть определены программно;
  • состояния, свойства и значения, которые может задавать пользователь, могут быть заданы программно;
  • уведомления об изменениях этих элементов доступны пользовательским агентам, включая вспомогательные технологии.

W3C отмечает, что критерий в основном адресован авторам, которые сами создают или программируют компоненты. Стандартные элементы управления HTML, используемые по спецификации, уже ему соответствуют. Самодельным виджетам — меню, вкладкам, аккордеонам, слайдерам, нестандартным выпадающим спискам — нужны роли и состояния, заданные через ARIA, и эти состояния должны меняться вместе с виджетом.

Типичные ошибки в интернет-магазине

  • кнопки только с иконкой (корзина, поиск, закрыть, сердечко избранного) без текста и без aria-label;
  • ссылки-изображения товаров, у картинки которых нет альтернативного текста, поэтому у ссылки нет имени;
  • выбор размера или цвета из элементов div с обработчиками клика, без роли и состояния выбора;
  • кнопка мобильного меню, у которой aria-expanded остаётся «false», когда меню открыто;
  • поля формы без подписи или select без имени;
  • элементы, скрытые через aria-hidden="true", которые всё ещё получают фокус с клавиатуры;
  • iframe с видео, картами или оплатой без title;
  • атрибуты ARIA с опечатками, недопустимые для данной роли или с неверными значениями.

Как проверить

Автоматически: наша проверка запускает для этого критерия много правил, среди них button-name, link-name, label, select-name, input-button-name, frame-title, aria-hidden-focus, nested-interactive, aria-required-attr, aria-valid-attr-value и другие правила ARIA (см. список правил). Она сообщает о каждом проблемном элементе с его селектором. Она не может оценить, осмысленно ли имя и обновляются ли состояния при использовании элемента.

Вручную: используйте скринридер (NVDA в Windows, VoiceOver в macOS или iOS) и пройдите шапку, страницу товара и оформление заказа. Для каждого элемента управления прислушайтесь, есть ли разумное имя, правильная роль и текущее состояние. Откройте и закройте меню, аккордеоны и выбор вариантов товара и проверьте, что изменения состояния объявляются.

Как исправить

  • Используйте нативные элементы: <button> для действий, <a href> для ссылок, <input>, <select> с <label>.
  • Дайте элементам управления только с иконкой доступное имя — визуально скрытым текстом или через aria-label.
  • Для самодельных виджетов следуйте шаблонам ARIA Authoring Practices и обновляйте aria-expanded, aria-checked, aria-selected вместе с интерфейсом.
  • Никогда не размещайте фокусируемые элементы внутри содержимого с aria-hidden; дайте каждому iframe title.

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

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

Что означает «имя, роль, значение»?

Имя — это то, как называется элемент управления («В корзину»), роль — какого он типа (кнопка, ссылка, чекбокс), а значение или состояние — его текущая настройка (отмечен, раскрыт, 3 товара). Вспомогательным технологиям нужны все три.

Выполняют ли 4.1.2 стандартные элементы HTML?

Да, если они используются по спецификации. Настоящая кнопка, ссылка, input или select с подписью передают имя, роль и значение. Проблемы обычно возникают у самодельных элементов управления из div и span.

Может ли автоматическая проверка найти проблемы 4.1.2?

Многие — да: кнопки и ссылки без имени, поля формы без подписи, неверные или отсутствующие атрибуты ARIA, скрытые элементы, которые всё ещё получают фокус. Она не может определить, осмысленно ли имя и правильно ли обновляются состояния при использовании элемента.

Всегда ли решение — добавить ARIA?

Нет. Нативный элемент HTML обычно надёжнее, чем ARIA, добавленная к div. Неправильная ARIA может сделать элемент управления хуже, чем вообще без ARIA.