Доступность сайта по ГОСТ: практический чек-лист

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

Разбираем практический чек-лист: что проверить и как не свести доступность к формальному сканеру.

Что такое доступность

Доступность — это возможность пользоваться сайтом независимо от устройства, зрения, слуха, моторики и опыта.

Она касается не только людей с инвалидностью. Плохой контраст и мелкие кнопки мешают всем, особенно на телефоне.

• Клавиатура.
• Контраст.
• Подписи.
• Масштабирование.
• Ошибки.
• Скринридер.

ГОСТ и WCAG

ГОСТ и WCAG описывают требования, но не заменяют практику. Сканер может не найти проблему, которую видит человек.

Используйте стандарты как ориентир, а проверку — как сценарий. Так вы найдёте реальные барьеры.

• Стандарт.
• Сканер.
• Ручная проверка.
• Сценарии.
• Документация.
• Обучение.

Клавиатура

Пройдите сайт только с клавиатуры. Вы должны видеть фокус, понимать, где находитесь, и иметь доступ ко всем действиям.

Если фокус исчезает или застревает, пользователь не сможет оформить заказ или отправить обращение.

• Фокус.
• Tab.
• Enter.
• Escape.
• Модальные окна.
• Порядок.

Контраст

Контраст текста и фона должен быть достаточным. Особенно на кнопках, в подсказках и ошибках.

Проверьте не только основной текст, но и второстепенный. Серый на сером выглядит стильно, но не читается.

• Текст.
• Кнопки.
• Ошибки.
• Ссылки.
• Иконки.
• Фон.

Формы

У каждого поля должна быть подпись. Ошибка должна объяснять, что не так и как исправить.

Не полагайтесь только на цвет. Добавьте текст и иконку, чтобы ошибка была понятна без цвета.

• Подписи.
• Ошибки.
• Подсказки.
• Фокус.
• Автозаполнение.
• Кнопки.

Изображения

У изображений должен быть alt-текст, если они несут смысл. Декоративные изображения можно скрыть от скринридера.

Не пишите «картинка» или «фото». Описывайте смысл, который важен пользователю.

• Alt.
• Декоративные.
• Подписи.
• Ссылки.
• Иконки.
• Сложные схемы.

Таблицы

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

Не используйте таблицы для вёрстки. Это путает пользователей и поисковики.

• Заголовки.
• Строки.
• Столбцы.
• Подписи.
• Мобильная версия.
• Сложные таблицы.

Видео

Видео должно иметь субтитры или расшифровку. Без них часть пользователей не получит информацию.

Не включайте автозапуск со звуком. Это раздражает и мешает.

• Субтитры.
• Расшифровка.
• Автозапуск.
• Управление.
• Пауза.
• Звук.

Мобильные

На телефоне проверьте размер кнопок, масштабирование и работу с клавиатурой. Многие проблемы заметны только там.

Не блокируйте масштабирование. Пользователь должен иметь возможность увеличить текст.

• Кнопки.
• Масштаб.
• Скролл.
• Клавиатура.
• Формы.
• Контраст.

Скринридеры

Проверьте ключевые сценарии со скринридером. Он покажет, понятны ли подписи, порядок и статусы.

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

• Заголовки.
• Подписи.
• Порядок.
• Статусы.
• Ошибки.
• Ссылки.

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

Сочетайте автоматические проверки с ручными. Сканер найдёт часть проблем, но не всё.

Ведите список найденных барьеров и приоритетов. Доступность — процесс, а не разовая акция.

Ошибки

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

Ещё одна — не обучать контент-команду. Новые страницы могут снова создать барьеры.

• Только сканер.
• Формальность.
• Нет обучения.
• Нет alt.
• Плохой контраст.
• Мелкие кнопки.

Документация

Опишите, какие требования применяются и как проверяется доступность. Это помогает при приёмке и поддержке.

Ведите журнал исправлений. Так видно, что работа действительно ведётся.

• Требования.
• Проверки.
• Журнал.
• Ответственные.
• Сроки.
• Обучение.

Обучение

Контент-команда должна знать, как писать alt-текст, оформлять заголовки и не терять подписи.

Разработчики должны понимать, что доступность — часть задачи, а не отдельный этап.

• Контент.
• Разработка.
• Дизайн.
• Тестирование.
• Поддержка.
• Регламент.

Чек-лист

Итог

Доступность — это не только ГОСТ. Это удобство для всех. Начните с клавиатуры, контраста и форм, затем переходите к скринридерам и документации.

Как выбрать подрядчика

Подрядчик должен уметь проверять доступность вручную, а не только сканером. Спросите, как он тестирует клавиатуру и скринридер.

Опыт в госсекторе полезен, но важнее практика. Доступность — это навык, а не набор галочек.

Как составить регламент

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

Добавьте проверку в приёмку и релизный чек-лист. Иначе о ней вспомнят только перед аудитом.

Как обучать контент

Контент-команда должна знать, как писать alt-текст, оформлять заголовки и таблицы. Это дешевле, чем исправлять всё потом.

Проведите короткое обучение и дайте примеры. Люди быстрее понимают на конкретных страницах.

Как проверять формы

Проверьте подписи, ошибки и фокус. Форма должна работать с клавиатуры и объяснять, что не так.

Не полагайтесь только на цвет. Ошибка должна быть понятна и без него.

Как тестировать модальные окна

Фокус должен оставаться внутри окна, а закрытие — работать с клавиатуры. Иначе пользователь застревает.

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

Что делать после аудита

Составьте список проблем и приоритетов. Начните с того, что блокирует ключевые сценарии.

Повторите проверку после исправлений. Доступность — процесс, а не разовая акция.

Как проверять ссылки

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

Проверьте, что ссылки работают с клавиатуры и имеют видимый фокус.

Как проверять заголовки

Заголовки должны идти по порядку и описывать структуру. Не используйте h2 только ради размера шрифта.

Скринридер использует заголовки для навигации. Если их нет, страница превращается в поток текста.

Как работать с иконками

Иконки без подписи должны иметь доступное имя. Декоративные — скрываться от скринридера.

Кнопка с иконкой должна быть понятна без визуального контекста.

Что делать с PDF

PDF должен быть доступным или иметь альтернативу в HTML. Сканы без текста не читаются скринридером.

Если PDF старый, добавьте краткое описание и контакт для помощи.

Как проверять таблицы

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

Не используйте таблицы для вёрстки. Это путает пользователей и поисковики.

Как тестировать мобильные

Проверьте размер кнопок, масштабирование и работу с клавиатурой. Многие проблемы заметны только на телефоне.

Не блокируйте масштабирование. Пользователь должен иметь возможность увеличить текст.

Как поддерживать доступность

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

Включите её в релизный чек-лист и обучение команды. Тогда новые страницы не создают старые проблемы.

Как проверять видео

Видео должно иметь субтитры или расшифровку. Без них часть пользователей не получит информацию.

Не включайте автозапуск со звуком. Это раздражает и мешает.

Что делать с обучением

Доступность нужно объяснять на примерах. Покажите, как пользователь проходит сайт с клавиатурой и скринридером.

Регулярно возвращайтесь к обучению. Новые сотрудники не должны повторять старые ошибки.

Как проверять фокус

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

Проверьте модальные окна и выпадающие меню. Фокус не должен уходить за пределы активного элемента.

Что делать с ошибками

Сообщения об ошибках должны быть понятными и связанными с полем. Недостаточно покрасить поле в красный.

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