Полная цифровая доступность сайта для людей с ОВЗ

Задача и проблема

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

Люди с ОВЗ по-разному взаимодействуют с сайтом:

• увеличивают шрифт и настраивают контрастность;
• используют скринридеры для незрячих;
• работают без мыши и тачпада из-за нарушений моторики.

Если эти сценарии не учтены, часть пользователей не может воспользоваться функциями сайта: узнать информацию, купить товар, заказать услугу. 

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

К примеру, мы решили эту задачу на сайте Правительства Нижегородской области. По разработке мы опирались на принципы проектирования сайта для людей с ограниченными возможностями и на обязательные требования — сайт по ГОСТу Р 52872-2019 должен быть доступен для людей с ОВЗ.

Решение — доступный сайт для людей с ограниченными возможностями

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

Мы выделили три основных сценария восприятия контента и адаптировали сайт под каждый из них.

1. Адаптация сайта под слабовидящих

Многие пользователи с нарушениями зрения могут читать контент с экрана, если его можно настроить под свои потребности — увеличить шрифт, выбрать цветовую схему.

Что сделали для адаптации сайта под слабовидящих:

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

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

2. Адаптация под программы озвучивания экрана

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

Что реализовали:

• Добавили текстовые описания для изображений, видео и иконок через атрибуты alt, title, aria-label, aria-describedby
• Использовали figcaption для озвучивания содержимого изображений и медиа
• Настроили озвучивание кнопок и ссылок, выполненных в виде иконок
• Добавили понятные подписи к полям форм и сообщения об ошибках валидации
• Настроили озвучивание состояний выпадающих списков и аккордеонов
• Реализовали голосовые уведомления о начале загрузки и результате отправки форм
• Обеспечили корректную работу модальных окон с фокусом внутри активного окна
• Скрыли служебные элементы, которые не должны озвучиваться

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

3. Полноценное управление сайтом с клавиатуры

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

Что реализовали:

• Выстроили логичную структуру заголовков H1–H6 для навигации
• Использовали стандартные интерактивные HTML-элементы
• Добавили доступ к нужным элементам через клавишу Tab
• Сделали заметный визуальный фокус для активных элементов

С сайтом можно работать, используя только клавиатуру, без потери функциональности.

Проверка уровня доступности сайта для людей с ОВЗ

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

В работе мы ориентировались на требования к сайту по ГОСТ Р 52872-2019 и проверяли результат автоматическими инструментами и пользовательским тестированием.

Кому актуально это решение

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

• корпоративным сайтам компаний из B2B и B2C;
• онлайн-сервисам и SaaS-платформам;
• образовательным платформам и онлайн-курсам;
• интернет-магазинам и маркетплейсам;
• государственным и муниципальным сайтам;
• социальным и общественно значимым проектам.