Дерево доступности: что слышат программы чтения с экрана

Браузер превращает ваш DOM во вторую структуру, называемую деревом доступности. Именно эту версию читает вспомогательная технология.

Дерево доступности строится непосредственно из вашего HTML. Хорошая семантика на входе даёт содержательное дерево, а суп из div на входе — пустое и бесполезное дерево.

Каждый узел содержит роль, которая сообщает, чем он является: кнопкой, заголовком, ссылкой или списком. Настоящая кнопка получает роль кнопки без каких-либо усилий с вашей стороны.

У каждого узла также есть доступное имя — текст, который произносит программа чтения с экрана. Для кнопки это обычно видимая подпись внутри неё.

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

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

Всё, что скрыто с помощью display none или aria-hidden, исключается из дерева. Если элемента нет в дереве, программа чтения с экрана не может до него добраться.

Визуальное оформление, например цвет и размер, никогда не попадает в дерево доступности. Пользователь программы чтения с экрана получает смысл и структуру, а не вашу компоновку.

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

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

Главный вывод: ваша разметка является источником дерева. Исправьте HTML — и дерево исправится само, без дополнительных заплаток.

Дерево доступности — это ваш DOM, сведённый к роли, имени, состоянию и значению. Исправьте разметку — и дерево последует за ней. Скрытые элементы исчезают. 🎉