Семантика и роли: дерево доступности не видит ваши div

Что даёт кнопка и никогда не даст div

Когда React коммитит <button>Save</button>, браузер выводит из DOM второе дерево — дерево доступности, то самое, которое потребляют скринридеры, голосовое управление и свитч-устройства. Узел кнопки приходит в него полностью укомплектованным: неявная роль button, доступное имя, вычисленное из содержимого («Save»), членство в последовательном порядке фокуса, активация и по Enter, и по Space, корректное объявление («Save, кнопка») и видимый индикатор фокуса. div с onClick приходит безымянным узлом generic — присутствует как геометрия текста, невидим как элемент управления. Пользователь голосового управления не может сказать ему «нажми Save»; свитч-пользователь до него не доберётся; клавиатурный пользователь протабает мимо.

Восстановить паритет вручную — это пять обязательств в каждой точке вызова: role="button", tabIndex равный 0, обработчик onKeyDown, срабатывающий и на Enter, и на Space (и предотвращающий прокрутку страницы по Space), семантика недоступности через aria-disabled плюс реальная блокировка обработчика, и стиль фокуса. Каждое по отдельности легко забыть, ни одно не даёт видимого бага для мыши, и отказ молчит до самого аудита. Это и есть первое правило ARIA от самих авторов спецификации: если существует нативный элемент с нужной семантикой — используйте его, а не перепрофилируйте другой элемент, прикручивая ARIA. Следствие сформулировано ещё жёстче и так же официально: отсутствие ARIA лучше плохого ARIA — role="button" без обработки клавиатуры — это обещание assistive tech, которое элемент тут же нарушает, и это хуже, чем остаться скромным div-ом.

Реакт-специфичный угол: JSX не добавляет ни грамма семантики. React рендерит ровно те элементы, что вы написали, а компоненты прячут выбор элемента — примитив Button, рендерящий div, незаметно доставляет это решение каждому потребителю. Выбор элемента — это решение уровня API компонентной библиотеки, а не постраничная деталь стилизации, и это самое дешёвое решение о доступности из всех возможных: платформа уже реализовала и оттестировала поведение на всех скринридерах.

Доступное имя вычисляется, а не угадывается

«Как скринридер назовёт эту штуку?» — у вопроса есть детерминированный ответ: вычисление доступного имени и описания, алгоритм W3C, который для каждого элемента идёт по строгой лестнице приоритетов. Знание лестницы превращает баги имён из фольклора в арифметику. Для данного элемента: побеждает aria-labelledby, если он присутствует и непуст, — он собирает текст элементов по ссылкам, в порядке id, даже из скрытых узлов. Иначе побеждает aria-label — плоская строка, которая полностью заменяет содержимое. Иначе вступает host language: связанный элемент label для полей формы, alt для изображений. Иначе — для ролей, допускающих имя из содержимого (button, link, heading — но не div и не generic), именем становится текст поддерева. Последняя инстанция: title, а для полей ввода placeholder — оба слабые, оба фактически lint-предупреждение.

Три ловушки, которые объясняет лестница. Первая: aria-label на голом div не делает ничего надёжного — generic-роли не несут имени, и AT может полностью игнорировать атрибут; это не волшебная подпись, а вход алгоритма, который сверяется с ролью. Вторая: поскольку aria-label заменяет содержимое, кнопка-иконка с видимым текстом «Поиск» и aria-label="лупа" объявляется как «лупа» — и пользователь голосового управления, говорящий «нажми Поиск», промахивается; именно поэтому WCAG требует, чтобы видимая подпись входила в доступное имя. Третья: aria-labelledby сильнее всего и при этом со странностями — он конкатенирует несколько id, включает собственный элемент при самоссылке и читает цели с display:none; это мощно для составных имён («Удалить» плюс название строки), но протухшая ссылка на id молча резолвится в пустую строку, алгоритм проваливается на следующую ступень — и объявление меняется без единого предупреждения в консоли.

Ориентиры и заголовки — это то, как люди ориентируются

Пользователи скринридеров не читают страницы сверху вниз — они прыгают. В опросах пользователей скринридеров от WebAIM навигация по заголовкам стабильно остаётся доминирующей стратегией поиска контента на странице, а ориентиры (landmarks) — её структурное дополнение. Значит, иерархия заголовков и карта ориентиров — первичная навигационная поверхность, равная по рангу видимой навигационной панели. Нативные секционные элементы несут роли ориентиров неявно: header — banner, nav — navigation, main — main, footer — contentinfo. Правила поверхности: ровно один main; повторяющиеся ориентиры подписывайте (aria-label="Основная" на одной nav, «Хлебные крошки» на другой — здесь aria-label легитимен, потому что nav — именуемая роль); заголовки образуют настоящую иерархию — один h1, без пропуска уровней, уровень выбирается структурой, а не размером шрифта. Данные WebAIM Million показывают, насколько редка эта дисциплина в дикой природе: заметная доля главных страниц вообще не имеет ориентиров или имеет сломанный порядок заголовков, — а значит, хорошо структурированное приложение — это реальное конкурентное преимущество доступности, а не гигиенический минимум.

React добавляет две структурные привычки. Фрагменты существуют, чтобы «нужен один JSX-корень» никогда не стоил обёрточного div: каждый лишний div — ещё один узел generic, раздувающий дерево доступности, а внутри семантических структур он разрушителен — компонент, оборачивающий свой li в div, рвёт обязательную цепочку ul-к-li, и часть AT перестаёт объявлять «список, 5 элементов». Используйте Fragment (или фрагменты с key в списках) и сохраняйте семантические цепочки родитель-ребёнок через границы компонентов — DOM не знает о существовании вашего дерева компонентов, только о его выводе. Вторая привычка: dangerouslySetInnerHTML лишает всех структурных гарантий — вставленная разметка обходит JSX, так что eslint-plugin-jsx-a11y её не видит, уровни заголовков внутри HTML из CMS прыгают как попало, а картинки приходят без alt. Если вставлять необходимо (отрендеренный markdown, контент из CMS) — санитизируйте и отдельно аудируйте вывод по тем же правилам, потому что ваш инструментарий в этом поддереве только что ослеп.