Итак, сегодня я посмотрела немного сайтов на предмет #a11y, спасибо за ваше участие в этом😍
На основе увиденного пишу вам, что вы можете сделать прямо сейчас, чтобы понять немного про ваше творение.
Пройдитесь табом и другими клавишами по сайту:
- видно ли, где фокус?
- работают ли выпадающие менюшки?
- когда открылась модалка - где фокус?
- можно ли закрыть модалку с клавиатуры?
- нет ли скрытых элементов, куда попадает фокус?
- не исчезают ли лейблы, когда вы в инпуте?
Картинки
- есть ли alt у всех картинок?
- заполнен ли он у значимых?
- пустой ли он у декоративных?
- достаточно ли контрастный текст на них?
- проверьте свои svg, если они кликабельные, фокус может провалиться в них
Ссылки и кнопки
- ссылки должны быть выделены графически, не только цветом (подчёркивание огонь)
- иконки должны быть скрыты от скринридера
- у кнопок обязателен лейбл
- текст - уникальный (а не КУПИТЬ, ЧИТАТЬ ДАЛЕЕ, ПОДРОБНЕЕ)
- состояние фокуса ВИДИМОЕ и контрастное!
Заголовки
- обязателен только один h1
- нельзя пропускать уровни (после h2 идёт h3, а не h4)
- уровни должны быть последовательными
Структура
- должен быть main, который содержит основной контент страницы и никакой навигации
- используйте header, footer, section, nav и др. для улучшения навигации по сайту
- делайте skip link, чтобы пропустить навигацию или фильтры и перейти сразу к main
Цвета
- помните о минимальном уровне контраста, послеживайте за ним
- не выделяйте элементы только цветом, используйте графику (особенно важно для алертов, где пользователь с цветовой слепотой не понимает, плохо или хорошо)
Формы
- все элементы формы должны иметь лейбл
- не делайте исчезающие при вводе лейблы, пользователь забывает, что он вводил
- располагайте лейблы над полем и поля друг за другом вниз, так при увеличении не потеряется контекст
- сообщения об ошибке свяжите с полем
У меня для вас задание!
Зайдите на первый сайт, что пришёл в голову, и нажмите 10 раз на Tab :)
Ваша реакция в комменты :)
🤔
43.1% Норм прошло по ссылкам🤔
43.1% ЧТО ПРОИСХОДИТ ГДЕ Я🤔
5.2% Дало скипнуть навигацию🤔
8.6% А ВОТ И МОДАЛЬНОЕ ОКНОonliner.by - СРАЗУ ПОТЕРЯЛАСЬ
МОБИЛА
- кликабельная область интерактивных элементов должна быть не менее 44 х 44 пикселей
- расстояние между элементами должно быть достаточным, чтобы скроллить (ПОМНИТЕ КАРТУ НА ВЕСЬ ЭКРАН??)
- никакой горизонтальной прокрутки (наверное, исключая таблицы)
Масштабирование сайта
- увеличьте масштаб до 200% и посмотрите, как всё стало красиво (и пофиксите)
- проверьте, что не запрещено увеличивать:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
ВОТ ТАК ЧТОБЫ НЕ БЫЛО :)