Контент-менеджеру
Чтобы публиковать материалы так, чтобы ими могли пользоваться незрячие и слабовидящие пользователи.
Драйверы цифровой инклюзии: чек-листы невизуальной доступности
Готовая база для администраторов сайтов, контент-менеджеров, функциональных заказчиков и IT-команд: что проверять, как исправлять и как объяснять ошибки подрядчику.
Для кого
Администратору сайта
Чтобы поддерживать доступность сайта в ежедневной работе: при публикации страниц, обновлении разделов, добавлении файлов и настройке интерфейсов.
Госзаказчику
Понятные критерии приемки сайта и новых модулей. Помогает проверять не только внешний вид, но и доступность для пользователей скринридеров и клавиатурной навигации.
IT-команде и подрядчику
Чтобы быстро понять, где ошибка, почему она важна и как ее исправить без долгих объяснений.
Чек-листы
01
Критерий приемки
Тест навигации с клавиатуры
Сайт должен быть полностью доступен без мышки: через Tab, Shift+Tab, Enter и Пробел.
Отложите мышку. Пройдите по сайту только клавишей Tab. Назад двигайтесь через Shift+Tab. Кнопки активируйте Enter или Пробелом.
При каждом нажатии Tab должно быть видно, где находится фокус. Пользователя не должно запирать внутри виджетов. При открытии модального окна фокус должен переходить внутрь окна, а при закрытии возвращаться обратно.
Необходимо обеспечить полную клавиатурную навигацию, видимый фокус и корректное возвращение фокуса после закрытия всплывающих окон.
02Критерий приемки
Доступность форм
Поля формы, чекбоксы и сообщения об ошибках должны быть доступны с клавиатуры и скринридера.
Заполните форму с клавиатуры и специально сделайте ошибку, например не заполните телефон.
Каждое поле, включая согласие на обработку данных, должно быть доступно с клавиатуры. Ошибка должна быть не только выделена цветом, но и описана текстом.
У каждого поля должна быть связанная текстовая метка. Сообщения об ошибках должны быть доступны программно и читаться скринридером.
Неправильно
Только красная рамка
Поле просто подсвечено красным. Текст ошибки не показан.
Правильно
Ошибка описана
Ошибка описана текстом, а кнопка имеет понятное назначение.
03Критерий приемки
Проверка масштабирования
При увеличении масштаба до 200% сайт должен оставаться читаемым без горизонтальной прокрутки.
В браузере увеличьте масштаб до 200%.
Текст должен увеличиться, а макет — перестроиться. Внизу экрана не должна появляться горизонтальная прокрутка.
Необходимо адаптировать верстку так, чтобы при масштабе 200% контент не уезжал за пределы экрана.
Неправильно
Контент уезжает вправо
Длинный текст уехал за границу экрана
Появляется горизонтальная прокрутка.
Правильно
Макет перестраивается
Длинный текстпереносится на новую строку и остается внутри экрана
Текст переносится, блоки остаются в пределах экрана.
04Критерий приемки
Капча
Визуальная капча должна иметь доступную альтернативу.
Найдите форму с капчей и проверьте, можно ли пройти проверку без зрения.
Если используется визуальная капча, должна быть звуковая альтернатива на русском языке. Лучше использовать невидимую капчу, которая не требует разгадывания символов.
Капча не должна блокировать незрячего пользователя. Нужно добавить доступную альтернативу или заменить ее на невидимую проверку.
Неправильно
Только символы с картинки
Незрячий пользователь не может пройти проверку.
Правильно
Доступная проверка
Проверка пройденаБез распознавания символов с картинки
Нет ребуса с картинки или есть понятная альтернатива.
05Критерий приемки
Контрастность и визуальное восприятие
Текст должен быть хорошо различимым, а цвет не должен быть единственным способом передачи информации.
Оцените, читается ли текст на фоне. Проверьте, не передается ли важная информация только цветом.
Серый текст на светло-сером фоне недопустим. Если поле обязательное, это должно быть обозначено не только цветом, но и текстом или символом.
Необходимо обеспечить достаточный контраст и не использовать цвет как единственный способ передачи смысла.
Неправильно
Слабый контраст
Важная информация
Серый текст на светлом фоне трудно читать слабовидящим пользователям.
Правильно
Контрастный текст
Важная информация
Подробнее о записиТекст и кнопка хорошо различимы, смысл не передается только цветом.
06Критерий приемки
Динамичный контент
Слайдеры, анимации и бегущие строки должны останавливаться.
Найдите автопрокручивающиеся баннеры, слайдеры или бегущие строки.
Пользователь должен иметь возможность поставить движение на паузу. На сайте не должно быть быстро мигающих элементов.
Добавить управление слайдером: пауза, продолжить, следующий, предыдущий. Движущийся контент не должен мешать чтению страницы.
Неправильно
Слайдер нельзя остановить
Баннер меняется сам, пользователь не успевает прочитать.
Правильно
Есть управление
Можно поставить на паузу и переключать вручную.
07Критерий приемки
Управление фокусом и обратная связь системы
После поиска, фильтрации или отправки формы фокус должен переходить к результату или сообщению.
Введите текст в поиск или примените фильтр. Посмотрите, куда попал фокус после обновления результата.
Если после нажатия «Найти» фокус отбросило в начало сайта, это ошибка. Фокус должен переноситься к заголовку «Результаты поиска» или к сообщению о результате.
После динамического обновления страницы нужно программно переводить фокус к новому содержанию.
Неправильно
Фокус вернулся в начало
После поиска пользователь снова попадает на логотип.
Правильно
Фокус на результатах
После поиска курсор переходит к заголовку результатов.
08Критерий приемки
Программные имена кнопок
Кнопки-иконки должны иметь понятное текстовое название для скринридера.
Проверьте кнопки с иконками: лупа, домик, крестик, стрелка, скачать.
Скринридер не должен читать просто «кнопка». Каждая кнопка должна иметь название, описывающее действие.
Добавить доступные имена кнопкам через видимый текст или корректную скрытую подпись.
Неправильно
Кнопки без смысла
Озвучка: «Кнопка, кнопка, кнопка»
Скринридер озвучит только: «Кнопка».
Правильно
Понятные названия
Каждая кнопка имеет вшитое текстовое назначение.
09Критерий приемки
Механизм пропуска навигации
В начале страницы должна быть ссылка «Перейти к основному контенту».
Откройте сайт и нажмите Tab один раз.
Первым интерактивным элементом должна появиться ссылка пропуска навигации. Она помогает не проходить длинное меню на каждой странице.
Добавить skip link в начало страницы и сделать его видимым при фокусе.
Неправильно
Сначала длинное меню
До контента нужно нажать Tab десятки раз.
Правильно
Есть Skip link
Первым появляется переход к основному контенту.
10Критерий приемки
Самодостаточность кнопок
Кнопки «Принять», «Подробнее», «Отправить» должны быть понятны без визуального контекста.
Пройдитесь по странице по кнопкам и оцените, понятно ли действие каждой кнопки отдельно.
Текст кнопки должен объяснять действие. Если визуально кнопка короткая, программное имя для скринридера должно быть полным.
Для одинаковых или общих кнопок нужно добавить конкретное доступное название.
11Критерий приемки
Исчезающие подсказки в формах
Placeholder нельзя использовать вместо полноценной подписи поля.
Кликните в поле формы и начните ввод. Если подсказка исчезла и рядом нет названия поля, это ошибка.
Название поля должно оставаться видимым до, во время и после ввода.
Добавить постоянные label-метки для всех полей. Placeholder можно использовать только как дополнительную подсказку.
Неправильно
Подсказка исчезает
Подсказка исчезла после ввода.
Название поля спрятано в placeholder. После ввода пользователь может забыть, что это за поле.
Правильно
Метка остается рядом
Название поля видно всегда: до ввода, во время ввода и после ошибки.
12Критерий приемки
Секретные подписи ссылок
Ссылки не должны зависеть только от всплывающей подсказки title при наведении мыши.
Проверьте ссылки-иконки, например соцсети. Понятно ли их назначение без наведения мыши?
Ссылка должна иметь явную подпись или надежную скрытую метку для скринридера.
Нельзя полагаться только на title. Нужно добавить видимый текст или доступное имя ссылки.
Неправильно
Подпись только при наведении
Подпись появляется только при наведении.
Клавиатура и смартфон не получают эту подсказку.
Правильно
Ссылка подписана явно
Название ссылки доступно без наведения мышью.
13Критерий приемки
Мертвые зоны и пустые остановки фокуса
При движении по Tab фокус должен попадать только на видимые, работающие и озвучиваемые элементы.
Пройдите страницу клавишей Tab и следите, не пропадает ли фокус.
Не должно быть пустых остановок, когда фокус попадает на скрытые или неработающие элементы.
Скрытые элементы должны быть исключены из клавиатурной навигации. Каждый фокусируемый элемент должен быть видимым, озвучиваемым и рабочим.
Неправильно
Фокус в пустоте
Tab → пусто → пусто
Фокус попал в скрытые элементы
Tab нажимается, но ничего не видно и не озвучивается.
Правильно
Только рабочие элементы
Каждая остановка фокуса видима, понятна и озвучивается.
01PDF и сканы
Доступность документов
PDF и сканы должны быть доступны для чтения: нужен текстовый слой или текстовая альтернатива рядом с файлом.
Откройте PDF и попробуйте выделить текст. Если документ выглядит как картинка с печатью, скринридер не сможет его прочитать.
Публикуйте рядом исходный текстовый файл DOCX/RTF или пропускайте PDF через OCR перед загрузкой.
Неправильно
Только PDF-скан
Приказ N125.pdf PDF · 2.4 МБ
Только PDF-файл
Правильно
PDF + текстовая версия
Приказ N125.pdf PDF · 2.4 МБ
Приказ N125.docx DOCX · 56 КБ
- Текст выделяется
- Работает поиск
- Читается скринридером
02Альтернативный текст
Описание изображений
Фотографии, баннеры и инфографика со смыслом должны иметь понятный альтернативный текст.
Посмотрите, заполнено ли поле alt у смысловых изображений. Описание должно передавать суть, а не имя файла.
Пишите конкретно: «Фасад здания школы N1, главный вход». Декоративные изображения должны быть скрыты от скринридеров.
Неправильно
Файл вместо смысла
Фото 1
Неинформативный альтернативный текст
Правильно
Описание передаёт смысл
Здание школы N1, фасад, главный вход
Alt-текст описывает смысл изображения
03Ссылки
Понятные ссылки
Ссылка должна объяснять цель без соседнего текста и визуального контекста.
Представьте список всех ссылок на странице. Если там много «Скачать», «Подробнее» или «Здесь», назначение непонятно.
Используйте самодостаточные названия: «Скачать расписание уроков (PDF)», «Подробнее о записи к врачу».
04H1-H3
Строгая иерархия заголовков
Заголовки должны отражать структуру страницы, а не использоваться просто для крупного шрифта.
Проверьте порядок H1, H2, H3. Он должен работать как оглавление книги.
Один H1 для главной темы, H2 для разделов, H3 для подразделов. Не пропускайте уровни ради дизайна.
Неправильно
Нарушена логика
H1 ГлавнаяH3 НовостиH2 О школеH4 ДокументыH2 Контакты
Правильно
Логичная вложенность
H1 Школа N1H2 НовостиH2 ДокументыH2 ЛицензияH2 Отчеты
05Расшифровка
Видео и аудио материалы
У видео и аудио должна быть текстовая расшифровка или краткое описание содержания.
Если важная информация есть только в ролике, часть пользователей её не получит.
Размещайте под медиа краткий пересказ или расшифровку: основные шаги, тезисы, важные данные.
Неправильно
Нет текстовой версии
Нет текстовой расшифровки или описания
Правильно
Есть расшифровка
- Откройте раздел «Услуги».
- Нажмите кнопку «Записаться».
- Заполните форму.
06Язык сайта
Локализация и иностранные термины
Служебная информация должна быть понятна на русском языке или иметь русскую доступную метку.
Английские подписи вроде Creative Commons могут озвучиваться русским синтезатором как набор букв.
Переводите служебные фразы или просите техподдержку добавить русскую скрытую метку.
Неправильно
Английская подпись без пояснения
© 2025 Creative Commons Attribution 4.0 International License
Правильно
Понятная русская версия
© 2025 Лицензия Криэйтив Коммонс 4.0
Информация понятна на русском языке
07Цвет и расположение
Инструкции без привязки к внешнему виду
Инструкции не должны опираться только на цвет, форму или расположение элемента.
Фразы «нажмите красную кнопку справа» или «меню слева сверху» непонятны без зрения.
Описывайте действие по смыслу: «Нажмите кнопку "Скачать бланк"».
Неправильно
Инструкция про цвет
Чтобы скачать бланк, нажмите на красную кнопку справа.
Правильно
Инструкция по действию
Чтобы скачать бланк, нажмите кнопку «Скачать бланк».
08Суть заголовка
Осмысленность заголовков
Заголовок должен описывать тему или цель раздела, а не быть общим словом.
Пользователь скринридера может прыгать по заголовкам клавишей H. Из заголовка должно быть понятно, о чём раздел.
Не пишите «Информация», «Внимание», «Текст». Пишите: «Изменения в графике работы поликлиники с 1 мая».
Неправильно
Заголовки не отражают темы
H2 ИнформацияH2 ВниманиеH3 Текст
Правильно
Заголовки описывают разделы
H2 Изменения в графике работы поликлиники с 1 маяH3 Новые часы приемаH3 Резервная запись пациентов
09Таблицы
Осторожнее с таблицами
Таблицы нужны для данных, а не для визуального расположения текста в колонках.
Если таблица используется как невидимая сетка для дизайна, скринридер может прочитать текст в хаотичном порядке.
Используйте таблицы только для расписаний, статистики и других табличных данных.
Неправильно
Таблица для вёрстки
Запись к врачу
Скачать форму
доступна по будням
после регистрации
Скринридер читает по ячейкам: смысл распадается на куски.
Правильно
Для дизайна — CSS
Запись к врачу
Доступна по будням.
Скачать форму
После регистрации.
Визуально это две колонки, но в коде остаются обычные смысловые блоки.
10Маркеры
Оформление расписаний и визуальных маркеров
Цвет, стрелки и значки не должны быть единственным способом передать смысл.
Посмотрите, как обозначены четные недели, смены и статусы. Если смысл виден только по цвету или стрелке, это риск.
Пишите словами: «Математика (четная неделя)», «Приём временно отменён».
Неправильно
Только символы и цвет
| Предмет | Пн | Вт |
|---|---|---|
| Математика | ⬆ | |
| Русский язык | ★ |
Правильно
Смысл написан текстом
| Предмет | Пн | Вт |
|---|---|---|
| Математика | Четная неделя | |
| Русский язык | Нечетная неделя |
11Диаграммы
Сложные схемы, графики и диаграммы
Графики и схемы должны иметь текстовую версию данных рядом с изображением.
Alt «График» не передаёт данные. Пользователь должен получить ту же информацию, что и зрячий читатель.
В alt укажите название графика, а рядом дайте расшифровку данных таблицей или текстом.
Неправильно
Alt без данных
График
Не передаёт данные диаграммы
Правильно
Данные продублированы
График успеваемости по четвертям
1 четверть — 4.2; 2 четверть — 4.3; 3 четверть — 4.5; 4 четверть — 4.7.
12Математика
Формулы
Формулы должны быть доступны в текстовом виде или иметь понятное словесное описание.
Формула картинкой или запись x2 может быть прочитана неправильно.
Для картинки с формулой добавляйте словесное описание. В идеале используйте MathML.
Неправильно
Картинка без смысла
a² + b² = c²
Формула картинкой без описания
Правильно
Есть текстовое описание
a² + b² = c²
Описание: а в квадрате плюс б в квадрате равно с в квадрате.
13Маршрут
Карты и маршруты
Интерактивная карта должна дублироваться текстовым адресом и маршрутом.
Фраза «смотрите на карте» оставляет незрячего пользователя без маршрута.
Под картой укажите адрес, транспорт, остановку и короткое описание пути.
Неправильно
Только карта
Как добраться — смотрите на карте
Правильно
Карта + текстовый маршрут
Адрес: ул. Ленина, 10. Автобусы 5 и 12 до остановки «Школа». От остановки пройти 100 метров прямо и повернуть направо во двор.
Материал подготовлен на основе практического опыта, полученного в ходе стажировок в государственном секторе в рамках проекта «Драйверы цифровой инклюзии» в июне 2026 года
Проект "Драйверы цифровой инклюзии" реализован Центром "Камерата" при поддержке Фонда президентских грантов.