Записки погромиста

Используйте семантичный HTML.

Правильный HTML помогает пользователям скринридеров, создает контекст и понимание того, где пользователь находится. Каждый раз спрашивайте себя — «что это, какое значение этого блока», когда пишете HTML.

Добавляйте <label> к элементам формы.

Для элементов формы пользователям скринридеров нужны ассоциированные с ними тэги <label>, например

<label for="search">Search</label><input id="search"> 

Использование placeholder не является альтернативой.

Используйте контрастные цвета.

Цветовой контраст — это разница в яркости между цветами переднего плана и фона. В целях доступности старайтесь добиться соотношения 4,5:1 между цветом переднего плана (например, текст, ссылки и т.д.) и цветом фона. Такое соотношение гарантирует, что люди с умеренно слабым зрением смогут различить цвета и увидеть ваш контент.

Тут можно проверить контрастность ваших цветов.

Используйте ссылки с текстом имеющим значение.

Например «Регистрация нового пользователя» вместо «Нажмите здесь», это полезно для пользователей скринридеров.

Сохраняйте функцию масштабирования.

Уменьшение масштаба изображения очень распространено и помогает стареющим и слабовидящим пользователям. Используйте этот метатег <meta name="viewport": user-scalable="yes". Избегайте user-scalable="no" и maximum-scale: 1 любой ценой.

Текстовый контекст для нетекстовых элементов.

Любой контент, не представленный в виде текста, невидим для программ чтения с экрана. Предоставьте краткие описания в атрибутах alt для всех изображений контента и текстовые альтернативы для диаграмм и т.д. CAPTCHA также должны быть доступными.

Показывайте где сейчас :focus.

Навигация с помощью клавиатуры часто используется пользователями с нарушением моторики. Такая навигация требует ясного указания на то, какой элемент сейчас в фокусе, интерактивные элементы должны иметь логичный порядок фокусировки (при навигации по Tab) и иметь правильный фокус (<button> вместо <span>).

Элементы должны быть понятны без цветового контекста.

Например, если произошла ошибка во время заполнения формы, красного цвета ошибки и текста недостаточно, добавьте соответствующую иконку.

Используйте WAI-ARIA атрибуты для динамических сайтов.

Когда речь идет о SPA сайтах, без WAI-ARIA атрибутов пользователям с ограниченными возможностями приходится непросто.

Чек-лист.

1. Зум на 400%, все ли элементы видны?
2. Работает ли навигация клавиатурой?
3. Можно ли использовать приложения со скрин ридером?
4. Запустить Lighthouse Accessibility Test.
5. Работает ли приложение с выключенным CSS?