Чеклист цифровой доступности

Содержание

Автопроверка

Визуальная проверка

Проверка логики

Оформление полей ввода

Проверка медиаконтента

Поддержка программы экранного доступа

Поддержка клавиатурного доступа

Автопроверка

Проверьте контрастность и область прикосновения с помощью сканера доступности для Android или iOS,
либо инструментов для Web:

Color Сontrast Checker;

axe DevTools;

Fonts Ninja;

Коэффициент контрастности больше 4,5 для размеров шрифтов менее 18 pt и больше 3 для крупного текста от 18 pt.

Исключения: заблокированные кнопки и плейсхолдеры, для них достаточна контрастность 2,5.

Области нажатия не менее 44×44 pt для iOS, 48×48 pt для Аndroid.

Поддерживается размер шрифта, установленный в настройках.

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

Межстрочный интервал внутри абзаца не менее 1,5 pt от размера шрифта.

Шрифт больше 14 pt для основного текста.

Правильно указан тип элементов (программным образом).

Все кликабельные элементы работают.

Визуальная проверка

Текст

Установлено выравнивание по левому краю.

Нет участков текста, набранного в верхнем регистре.

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

Нет текстов, представленных в графическом формате (картинкой).

При увеличении системного размера шрифта или масштаба вёрстка остаётся аккуратной и нет горизонтальной прокрутки.

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

Цвет

Ошибки и нотификации выделены цветом.

Индикация цветом дополняет, но не заменяет текст.

Изображения

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

Фон не отвлекает внимание пользователей.

Структура блока и страниц

Блок или страница чётко структурированы: есть иерархия заголовков, визуальные акценты, элементы сгруппированы по смыслу.

Проверка логики

Пользователю всегда понятно, где он находится, и как вернуться назад.

Во время выполнения длительных задач пользователь получает обратную связь о ходе и завершении работы разными способами.

Если сервис сложный и большой, предусмотрено более одного способа поиска нужного контента: через строку поиска, разделы, баннеры, быстрые ссылки и пр.

Аутентификация и валидация доступны всем пользователям (нет когнитивных тестов, капча используется только при необходимости).

Есть несколько способов выполнения основных задач.

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

Все необходимые данные находятся перед глазами, ничего не нужно запоминать.

Используются «хлебные крошки» для навигации (для Web/ПК).

Оформление полей ввода

Доступны инструкции и примеры корректного ввода данных.

Пользователь уведомляется об ошибках ввода, они описываются, даны подсказки по их исправлению.

Для страниц, на которых фиксируются юридические обязательства, проводятся финансовые транзакции, изменяются данные пользователя или отправляются результаты тестирования, выполняется хотя бы одно из условий:

Можно вернуть отправленные данные;

Валидация введённых данных и возможность исправить найденные ошибки;

Доступен механизм подтверждения отправки данных.

Проверка медиаконтента

Для аудиофайлов есть текстовое описание содержания записи.

Для видеофайлов есть субтитры.

Для видеофайлов, помимо субтитров, есть либо текст с расширенным описанием, либо аудиозапись.

Если на сайте есть чат, то предусмотрена возможность управлять им с помощью голоса, без ввода текста.

Поддержка программы экранного доступа

Доступность элементов для фокуса

Фокус должен пройти по всем значимым элементам.

Каждый элемент должен озвучиваться на русском языке.

Не должны озвучиваться сугубо декоративные иллюстрации и элементы.

Озвучивание текстовых блоков

После прочтения заголовка должно быть добавлено слово «Заголовок».

Сокращения читаются полностью, например, «ул». — «улица», «22.11» — «22 ноября».

Все тексты должны быть краткими. Например, "Купить" лучше, чем "Начать процесс покупки".

Озвучивание контролов

Озвучивается тип контрола: «Кнопка», «Ссылка», «Поле редактирования» и прочее.

У всех контролов есть понятные и осмысленные названия на русском языке. Кнопки и ссылки имеют достаточное описание, позволяющее понять, куда приведёт двойной щелчок по ним или двойное касание.

Если контрол бывает в разных состояниях, текущее состояние обязательно озвучено: «Продолжить. Кнопка. Недоступно».

Озвучивание составных элементов

На сложных элементах (карточках, информерах, баннерах) есть общий объединяющий фокус.

Продуман порядок чтения сложного компонента.

Озвучивание полей ввода

Фокус стоит на всём поле, а не на тексте внутри него.

Озвучен формат ввода даты с указанием, нужно ли вводить точки между цифрами. Например: 19.09.2022.

Введённые в поле данные озвучены.

При незаполненных данных курсор стоит в начале строки.

Сначала озвучивается название поля, затем тип поля: «Номер карты. Редактируемое поле». Затем читается информация внутри поля, если оно заполнено.

Переходы между страницами и модальными окнами

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

Озвучиваются все состояния экранов: «Загрузка», «Обновление», «Поиск данных».

Поддерживаются Magic Tap для Android и Scrub для iOS.

Модальные окна при открытии перехватывают фокус и удерживают его внутри.

В модальных окнах предусмотрен элемент закрытия.

Только для iOS и iPadOS

Вся карусель представляет собой один элемент, а ячейки внутри неё переключаются вертикальным свайпом.

Предусмотрен жест «ротор». Он пробегает по верхнему уровню навигации, заголовкам, областям контролов, по крупным смысловым контейнерам.

Поддержка клавиатурного доступа

Клавиатурный фокус чётко отображается на всех элементах.

Все элементы доступны с клавиатуры.

Фокус не устанавливается на неотображаемых или декоративных элементах.

Фокус автоматически переходит на появляющиеся элементы (панели, модальные окна и вкладки) при их открытии.

Обеспечен быстрый доступ к основному контенту.

Контакты

Мы будем рады получить от вас обратную связь по этому документу. Отправляйте свои комментарии по электронной почте, чтобы они наверняка были услышаны и приняты к сведению.

Наша почта — inclusion@vk.team

Главное о нас на сайте VK

Чеклистцифровойдоступности

Содержание

Автопроверка

Визуальная проверка

Проверка логики

Оформление полей ввода

Проверка медиаконтента

Поддержка программы экранного доступа

Поддержка клавиатурного доступа

Контакты

Чеклист
цифровой
доступности