a11y ломается не в коде, а в мелочах интерфейса, которые забывают проверить

a11y ломается не в коде, а в мелочах интерфейса, которые забывают проверить

Самые частые провалы в доступности — не «сложные кейсы», а базовые вещи: у кнопок нет понятных названий, фокус прыгает мимо логики, контраст текста еле держится, а ошибки в формах видны только цветом.

Проверьте 4 слоя:
— Семантика: кнопка должна быть кнопкой, ссылка — ссылкой, заголовки — в иерархии.
— Клавиатура: всё должно открываться, закрываться и проходить табом без мыши.
— Состояния: hover, focus, disabled, error, loading — не один и тот же вид.
— Текст: плейсхолдер не заменяет label, а иконка без подписи остаётся загадкой.

В формах особенно часто ломают доступность: ошибка показывается красной рамкой, но не текстом; подсказка исчезает после ввода; поле получает фокус, но скринридер не понимает, что пошло не так. Для пользователя это выглядит как «не работает», хотя визуально всё аккуратно.

Что делать на практике: прогоняйте ключевые сценарии только с клавиатурой и отдельно — с отключёнными стилями. Если интерфейс всё ещё можно понять и пройти, у вас хороший базовый уровень a11y.