Чек-лист доступности A11Y

header role=''banner''.Область страницы, в которой содержится информация о сайте. Обычно шапка.

nav role=''navigation''.Содержит ссылки на разные страницы сайта, экраны приложений или разделы одного документа.

main role=''main''.Оборачивает главный, значимый контент документа. Используется один раз.

article role=''article''.Обозначает независимый пункт контента. На странице может быть несколько элементов с тегом article. Тег не считается ориентиром, но скринридеры могут проходить по этим тегам при навигации по разделам или ориентирам.

aside role=''complementary''.Блок, связанный с основным контентом, но визуально отделённый от него.

footer role=''contentinfo''.Содержит информацию о документе (копирайт, метаинформацию, информацию о компании и другую).

form role=''search''.Добавьте роль search для основного блока поиска.Как это сделать

Атрибут языка

Объявление атрибута языка в HTML позволяет скринридеру зачитывать текст с правильным произношением.

html lang=''en''.Укажите язык при помощи атрибута lang внутри элемента html.

Структура документа

Используйте семантические заголовки и соблюдайте логическую структуру.

Ссылки

Убедитесь, что ссылкам задано состояние :focus.

Убедитесь, что ссылки легко распознать.

Разместите ссылку «К основному содержанию».Подробнее о ссылке

Изображения

Используйте подходящий текст в теге alt.Как использовать alt-текст

JavaScript

Ненавязчивый JavaScript.Используйте ненавязчивый JavaScript. Не вызывайте функции в разметке.

Альтернативы JS.Используйте альтернативу JS для пользователей, которые отключили его, или в средах, где он недоступен.

Формы

Логичная разметка.Логичный порядок вкладок форм.

Свяжите label со всеми контролами форм (input, select и другими).Например, <label for=''name''>Name:</label><input id=''name'' type=''text''>.

Убедитесь, что атрибут placeholder не используется вместо тега label.Исключение из этого правила — маленькие формы с одним или двумя полями, то есть поиск или формы входа.WHATWG

Группы элементов формы должны быть объединены fieldset и описаны в legend.Важно для input type=''radio'' и input type=''checkbox''.

Медиа (видео и аудио)

Предусмотрите текстовую альтернативу аудио-информации, которая будет доступна для глухих и слабослышащих. Это относится и к поисковым системам, которые тоже «не слышат».

Сделайте расшифровку аудио.

Синхронизируйте в видео субтитры со звуком.

Цвет и контраст

Протестируйте цветовой контраст.Лучше это сделать в самом начале, и убедиться, что цвет фона сайта достаточно контрастный. Это сделает его читабельным для всех. Contrast Ratio — один из инструментов для проверки контрастности цветов как для пользователей с нормальным зрением, так и для людей с дальтонизмом.Contrast Ratio

Тест для дальтоников

Протестируйте сайт для разных типов дальтонизма.

Дейтеранопия.

Протанопия.

Тританопия.

Тест на виды дальтонизма можно сделать с помощью этого инструмента.Если вы пользователь Mac, то можно использовать стимулятор цветовой слепоты Sim Daltonism Мишеля Фортена.

Тестирование

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

Чек-лист доступности

Ориентиры