Доступность
Вопрос
Что минимально нужно сделать, чтобы интерфейс был доступным?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
семантические теги вместо div с обработчиком: button, a, nav, main
клавиатура: фокус виден, порядок логичен, ловушка фокуса в модалке
у изображений alt, у иконочных кнопок aria-label
контраст не ниже 4.5:1 для обычного текста
aria только там, где семантики не хватает - неверная aria хуже отсутствия
форма: label связан с полем, ошибка объявляется через aria-live
Что могут спросить следом
- Как сделать доступную модалку
- Чем aria-hidden отличается от display: none для скринридера
- Как проверить доступность без скринридера
Разбор
Базис - семантика: button вместо div с onClick даёт фокус, Enter, Space
и роль для скринридера бесплатно. Дальше клавиатура: видимый фокус, логичный порядок,
в модалке - ловушка фокуса и возврат на элемент, который её открыл.
Текстовые альтернативы: alt у содержательных картинок, пустой alt у декоративных,
aria-label у иконочных кнопок. Контраст 4.5:1 для обычного текста.
ARIA - последнее средство: правило «никакой aria лучше плохой aria». Неверная роль сбивает скринридер сильнее, чем её отсутствие.
В формах: label связан с полем через for/id, сообщение об ошибке - в aria-live,
чтобы оно было объявлено.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.