Как проверить доступность макета
Вопрос
Как вы проверяете доступность своего макета до передачи в разработку?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Контраст текста и нетекстовых элементов по WCAG AA
Цвет не единственный сигнал: ошибки, статусы, графики
Размеры целей и отступы между ними
Порядок фокуса, видимые состояния фокуса, подписи полей
Масштабирование текста до 200% и перестройка при 320 px
Тексты для скринридера: alt, подписи иконок-кнопок
Что могут спросить следом
- Что дизайнер не может проверить сам и нужно делать с разработкой?
- Как убедить команду тратить на это время?
Разбор
В макете проверяю контраст плагином: текст 4.5:1, крупный и нетекстовые элементы 3:1. Смотрю, нет ли мест, где смысл передаётся только цветом: статусы, ошибки, линии на графиках, добавляю иконки и подписи. Проверяю размеры целей и отступы. Размечаю для разработки порядок фокуса, рисую состояние фокуса у каждого интерактивного компонента, подписываю иконки-кнопки так, как их должен прочитать скринридер. Проверяю, что макет выдерживает увеличение текста и ширину 320 px без горизонтальной прокрутки. Часть вещей проверяется только в коде: реальная работа скринридера, клавиатурная навигация, поэтому в приёмке прохожу ключевой сценарий с VoiceOver или NVDA.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.