Веб-доступность (a11y) 101

Я чувствую, что веб-доступность очень важна, и я хотел узнать больше о том, что означает a11y на практике. Вот некоторые вещи, которые я узнал…

Инструменты:

Axe — автоматизировать а11й тестирование
Волна — оценить доступность сайта
NoCoffee — имитировать разные виды нарушений зрения
Colour Contrast Analyser — индикаторы соответствия Web Content Accessibility Guideline (WCAG) 2.0
Firefox Web Developer Toolbar — тесты на наличие барьеров доступности
Браузер Zoom Page WE (chrome/ff) — как масштабируются страницы при увеличении
NVDA — программа для чтения с экрана с открытым исходным кодом
JAWS — системный скринридер, только windows

Основные вещи, которые нужно сделать/запомнить

Используйте атрибуты Accessible Rich Internet Applications (ARIA), определяющие способы сделать контент более доступным.
Используйте семантический HTML — заголовки, основную, навигацию, хедер, футер и т. д. Это дает возможность быстрее перемещаться по «типу».

Управление фокусом

Взаимодействуйте с вашим сайтом только с помощью клавиатуры и убедитесь, что вы можете перейти к каждой ссылке/кнопке/вкладке/и т. д. (и можете щелкнуть мышью — бывают случаи, когда вы можете переходить в раздел, но не можете выйти из него).
Проверьте индексы вкладок и видимые стили.
кнопки == действия/ссылки == переход. Помня об этом, вы получаете некоторые преимущества доступности по умолчанию.

Маршрутизация на стороне клиента

Переместите фокус на цель ссылки. Не используйте по умолчанию верхнюю часть страницы, где пользователю приходится перемещаться по всей странице, чтобы перейти к новому содержимому.
Используйте ссылки для перехода к предыдущей ссылке (или пункту меню). Это позволяет пользователю проверить раздел или страницу и быстро «вернуться», если это не то, что им нужно.

Объявления (когда использовать?)

По сути, в любое время, когда кто-то может увеличить страницу и не увидеть обновления или оповещения (асинхронное сохранение, фильтрация списка, виджет чата).