Проверка руками
Что делаем: проходим по странице рассылки без мыши и ищем, где она ломается. Код пока не меняем.
Чек-лист на пять минут
Автотесты появятся позже. А начинать полезно с проверки, которая не требует ничего, кроме браузера:
- Пройдите по странице клавишей Tab. Фокус должен быть виден и двигаться в понятном порядке.
- Отправьте форму с клавиатуры: Tab до кнопки, потом Enter.
- Увеличьте масштаб до 200 %. Ничего не должно наезжать друг на друга.
- Сузьте окно до 320 px. Горизонтальной прокрутки быть не должно.
- Откройте DevTools, вкладку Accessibility: у каждого элемента должна быть роль и имя.
Что находим на этой странице
Нажмите Tab несколько раз. Фокус переходит по ссылкам шапки и дальше к полю почты, но рамки не видно: в стилях выключено оформление фокуса. А кнопка «Подписаться» пропущена совсем: это div, а не button, поэтому клавиатура про неё «не знает».
Обе ошибки глазом не видны: страница выглядит нормально. Именно такие дефекты тесты и должны ловить.
Источники
- Элемент button: кнопка получает фокус и срабатывает от Enter и пробела без единой строки скрипта.
- WCAG 2.2, видимый фокус: почему рамка фокуса обязательна.