Архитектура фронтенда
Доступные формы: форма, полная с клавиатуры
Читать о доступных формах — не то же самое, что управлять формой с отключённой мышью. Соберите реальную многополевую форму, затем проведите её только клавиатурой и screen reader, пока каждое поле, ошибка и путь submit не заработают, — с доказательством на каждом шаге.
Превратите ментальную модель юнита в воспроизводимую сборку: связать каждый label, озвучить каждую ошибку через уже существующий live-регион, переместить фокус на первое невалидное поле на submit, предпочесть нативные контролы и проверить весь путь клавиатуры и AT против WCAG 2.2 AA.
Собрать (или починить) многополевую форму оформления/регистрации — минимум имя, email, select и кнопку submit — так, чтобы она была полностью пригодна для использования только клавиатурой и со screen reader, проходя WCAG 2.2 AA по label, идентификации ошибок, status messages и focus management. Доказать это прогоном с assistive technology, а не визуальной проверкой.
- Прогон только клавиатурой — запись или пошаговый список: протабать через каждое поле, вызвать сбой валидации и подтвердить, что фокус попадает на первое невалидное поле без использования мыши.
- Прогон со screen reader (NVDA, VoiceOver или JAWS), подтверждающий, что каждое поле сообщает своё имя, каждая ошибка озвучивается при появлении, и aria-invalid + aria-describedby читаются вместе при фокусе на поле.
- Чек-лист WCAG, сопоставляющий вашу реализацию с 1.3.1, 3.3.1, 3.3.3, 4.1.2 и 4.1.3 — по одной строке доказательства на критерий.
- Автоматический скан (axe DevTools или Lighthouse) без нарушений label/ARIA, плюс заметка хотя бы об одной проблеме, которую автоматический инструмент пропустил, а ручной прогон с AT поймал.
- Добавить одностраничный чек-лист ревью доступности форм для команды: связь label, live-регион-существует-первым, aria-invalid + aria-describedby, focus-on-first-invalid, native-control-first, видимый фокус, логичный порядок табуляции.
- Добавить сводку ошибок наверху формы (фокусируемый регион со списком всех ошибок, каждая ссылается на своё поле) и перемещать фокус на неё на submit — паттерн GOV.UK — и сравнить опыт AT с focus-on-first-field.
- Заменить один нативный select полностью соответствующим ARIA-combobox (с фильтрацией) по паттерну APG, затем доказать со screen reader, что он повторяет поведение клавиатуры нативного контрола.
- Подключить прогон клавиатуры + axe в CI, чтобы регрессия, уронившая label или сломавшая порядок фокуса, проваливала сборку.
Это цикл, который вы прогоняете на каждой реальной форме: связать каждый label, рендерить live-регионы ошибок до записи в них, выставить aria-invalid + aria-describedby, переместить фокус на первое невалидное поле на submit и предпочесть нативные контролы — а затем проверить, управляя формой только клавиатурой и со screen reader, потому что путь мыши всегда будет выглядеть нормально. Сделав это однажды на реальной форме, вы превращаете дисциплину клавиатуры и AT в мышечную память, а форму, которая «работает с мышью», — в форму, работающую для всех.