Как проверить доступность страницы
Вопрос
Как бы ты проверил доступность страницы перед релизом?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Пройти всю страницу только клавиатурой: Tab, Enter, Space, Escape, видимый фокус
Автоматические проверки: Lighthouse, axe; они ловят часть проблем
Пройти ключевые сценарии со скринридером (VoiceOver, NVDA)
Проверить контраст, масштаб 200% и отсутствие смысла только в цвете
Проверить подписи полей, alt у картинок, структуру заголовков
Встроить axe в e2e или линтер (eslint-plugin-jsx-a11y), чтобы не регрессировать
Что могут спросить следом
- Какие проблемы автоматические инструменты не найдут?
- Как проверить порядок заголовков быстро?
- Что делать с prefers-reduced-motion?
Разбор
Начинаю с клавиатуры: убираю мышь и прохожу основные сценарии Tab, Enter, Space, Escape. Смотрю, что фокус видно всегда, порядок логичный, ничего не ловит фокус намертво и модалки возвращают фокус. Потом автоматика: Lighthouse или axe DevTools, они быстро находят контраст, пустые alt, поля без подписей, кнопки без имени. Дальше скринридер: VoiceOver на маке или NVDA на винде, слушаю, что объявляется на кнопках, ошибках, динамических сообщениях. Проверяю масштаб 200% и что смысл не передаётся только цветом. Структуру заголовков смотрю через меню ориентиров скринридера или расширение. Чтобы не регрессировать, добавляю eslint-plugin-jsx-a11y и axe в e2e-тесты. Важно сказать, что автоматика ловит лишь часть проблем, остальное проверяет человек.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.