Экранные дикторы и первое правило ARIA

Первое правило ARIA велит обходиться без неё: если родной элемент HTML уже делает нужное, например button, используй его, а не добавляй роль к div.

С чем работает экранный диктор

Экранный диктор не читает пиксели. Браузер строит из HTML дерево доступности, упрощённую копию страницы, в которой у каждого важного элемента есть роль (кнопка, ссылка, заголовок, флажок), имя (текст, который его обозначает) и иногда состояние (отмечен, развёрнут, отключён). Экранный диктор читает это дерево вслух или передаёт его на брайлевский дисплей. Критерий успешного применения 4.1.2 «Название, роль, значение» уровня A в WCAG 2.2 требует, чтобы каждый элемент управления на странице сообщал эти три вещи.

Пользователи редко слушают страницу сверху донизу. Экранные дикторы, встроенные в основные операционные системы, и бесплатные, которые можно установить, позволяют вызвать список заголовков, ссылок или ориентиров, перейти к следующему полю формы или читать по одной строке. Вот почему прошлые уроки так важны: настоящие заголовки, подписанные поля, кнопки, которые действительно являются кнопками, и альтернативный текст прямо попадают в это дерево. Важен и атрибут lang у элемента html. Его требует критерий 3.1.1 «Язык страницы», и экранные дикторы по нему выбирают правильный голос и произношение.

Что добавляет ARIA

WAI-ARIA (Accessible Rich Internet Applications) является набором атрибутов, которые меняют то, что попадает в дерево доступности: role задаёт роль, атрибуты вроде aria-label задают имя, а такие, как aria-checked или aria-expanded, задают состояние. ARIA меняет только то, что объявляется. Она не делает элемент фокусируемым, не добавляет поведения клавиатуры и не меняет его вид. Руководство W3C ARIA Authoring Practices Guide выносит это в заголовок: «Лучше без ARIA, чем с плохой ARIA» (No ARIA is better than bad ARIA). Неправильная ARIA сообщает пользователю экранного диктора неправду о странице.

Правила использования ARIA

Документ W3C Using ARIA излагает короткие правила, которые цитируют повсюду (в феврале 2026 года он отмечен как прекращённый черновик, но сами правила не изменились). Правило 1: если можно использовать родной элемент или атрибут HTML, в котором нужный смысл и поведение уже встроены, используй его, а не переделывай другой элемент с помощью ARIA. Правило 2: не меняй родную семантику без крайней необходимости. Правило 3: каждым интерактивным элементом управления ARIA должно быть можно пользоваться с клавиатуры. Правило 4: не ставь role="presentation" или aria-hidden="true" на элемент, который может получить фокус, иначе некоторые пользователи попадут в «ничто».

А помогает ARIA там, где нужно закрыть пробелы, с которыми HTML не справляется. У кнопки, в которой только значок, нет текста, а значит, нет имени; aria-label="Close" даёт ей имя. Значок SVG рядом с видимым текстом служит украшением, и aria-hidden="true" на svg не пускает его в дерево. Это два атрибута, которые нужны большинству начинающих. Для целых виджетов, например вкладок или меню, следуй подходящему шаблону из Authoring Practices Guide, а не придумывай свой.