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

Tatiana Fokina
Sep 3, 2018 · 4 min read

Перевод чек-листа The A11Y Project.


Можно сразу перейти к интерактивной версии чек-листа.

Ориентиры

Ориентиры ARIA (ARIA landmark) помогают пользователям вспомогательных технологий быстро перемещаться по веб-интерфейсу от одного блока к другому.

Примечание. Когда проверяете валидность HTML-кода, который по умолчанию включает большинство ролей ориентиров, то можете получить предупреждение о том, что роли избыточны.

В HTML5 некоторые роли ориентиров неявно заданы структурным элементам. Современные десктопные версии браузеров поддерживают эти элементы. Поэтому, если нужна поддержка в старых браузерах, нужно проверить, как они поддерживают атрибуты role. Если поддержка плохая, игнорируй предупреждения валидатора и используй роли. Подробнее в заметке «Quick Tip: ARIA Landmark Roles and HTML5 Implicit Mapping».

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.

Пример вызова функции инлайново, так делать не стоит:

<input type="text" name="date" onchange="validateDate(this);">

Пример ненавязчивого JS:

<!-- HTML -->
<input type="text" class="validatedDate">
<!-- scripts.js -->
window.onload = function() {
var inputs, i;
inputs = document.getElementsByTagName('input');
for (i = 0; i < inputs.length; i++) {
if (inputs[i].className == 'validatedDate') {
inputs[i].onchange = function() {
validateDate();
};
}
}
};

function validateDate(){
// логика обработчика
}

☑ Альтернативы 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 — один из инструментов для проверки контрастности цветов как для пользователей с нормальным зрением, так и для людей с дальтонизмом.

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

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

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

☑ Протанопия.

☑ Тританопия.

Примечание переводчика. Дейтеранопия — неспособность различить зелёный цвет и его оттенки, протанопия — красный, тританопия — синий.

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

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

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

☑ Используйте скринридер.

Примечание переводчика. Можно использовать встроенные в операционные системы программы вроде VoiceOver для Mac OS, NVDA для Windows или ORCA для Linux. Или установите специальное расширение для браузера. Это может быть ChromeVox для Chrome.

☑ Используйте только клавиатуру.

Tatiana Fokina

Written by

Тёмная материя мира фронтенда.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade