Версия сайта для слабовидящих - это отдельный режим отображения страниц с увеличенным шрифтом, повышенным контрастом, отключённой анимацией и упрощённой навигацией с клавиатуры. За последние пару лет ко мне трижды обращались клиенты именно с формулировкой «сделайте как для слабовидящих», и в двух случаях из трёх выяснялось, что закон это не требует вообще, а нужна была просто адаптивная вёрстка. В этой статье разберу, кому такая версия обязательна, что именно проверяют по ГОСТ, и как я делаю её на практике на Tilda и WordPress.
Кому версия сайта для слабовидящих обязательна по закону
Обязанность закреплена в 181-ФЗ «О социальной защите инвалидов в РФ» и в ГОСТ Р 52872, который описывает требования доступности интернет-ресурсов для людей с нарушением зрения. На практике под эту обязанность попадают:
- сайты органов государственной власти и местного самоуправления (по приказу Минкомсвязи о требованиях к официальным сайтам госорганов);
- сайты учреждений здравоохранения, образования и соцзащиты, которые финансируются из бюджета;
- сайты МФЦ, ПФР, ФСС и аналогичных структур;
- ресурсы компаний, которые оказывают услуги населению по государственному или муниципальному контракту.
Для обычного интернет-магазина, лендинга или корпоративного сайта версия для слабовидящих юридически не обязательна. Но я всё равно рекомендую её клиентам из сфер с возрастной аудиторией: аптеки, медцентры, страховые компании. Там доля пользователей с плохим зрением реально высокая, и адаптация напрямую влияет на конверсию, а не только на соответствие бумажным требованиям.
Что конкретно требует ГОСТ от специальной версии
ГОСТ Р 52872 и стандарт WCAG 2.1, на который он опирается, требуют не «увеличенный шрифт вообще», а набор конкретных параметров:
- контрастность текста и фона не ниже 4.5:1 для обычного текста и 3:1 для крупного;
- возможность увеличить масштаб текста минимум до 200% без потери функциональности интерфейса;
- отключение автоматической анимации, каруселей и всплывающих окон по таймеру;
- атрибуты alt у всех значимых изображений и aria-label у интерактивных элементов;
- полная навигация по сайту с клавиатуры, без обязательного использования мыши;
- корректная работа со скринридерами: NVDA, JAWS, VoiceOver.
Последний пункт разработчики пропускают чаще всего. Ставят виджет с переключателем шрифта и контраста, отчитываются «сделано», а разметка страницы при этом остаётся без семантических тегов и aria-атрибутов, так что скринридер всё равно не может нормально её прочитать.
Бесплатный материал
🎁 Полезный скрипт в подарок
Подпишитесь на Telegram - пришлю готовый скрипт по этой теме.
Без спама. Отписка в 1 клик.
Готовый виджет доступности или кастомная разработка
Здесь я обычно вижу три варианта, и у каждого свои ограничения:
| Вариант | Плюсы | Минусы |
|---|---|---|
| Готовый JS-виджет (панель доступности) | Быстрая установка, низкая цена | Конфликтует с чат-виджетами, поп-апами, чекаутом эквайринга; не покрывает требования ГОСТ по семантике |
| Плагин для WordPress (типа WP Accessibility) | Интеграция с темой, настройка через админку | Нужна доработка под конкретную вёрстку, иначе ломает кастомные блоки |
| Кастомная реализация под задачу | Полное соответствие ГОСТ, отдельный URL версии, нет конфликтов со скриптами оплаты и доставки | Дороже и дольше готового виджета |
На Tilda готовые виджеты часто ломают логику зон доставки, промокодов или калькуляторов, которые сами по себе собраны на кастомных скриптах. Один раз перед запуском версии для слабовидящих пришлось переписывать скрипт валидации промокода, потому что виджет доступности подменял стили инпутов и форма переставала отправляться. С WooCommerce на WordPress похожая история: плагины доступности иногда перехватывают фокус на элементах чекаута и ломают шаги оформления заказа с оплатой через T‑Bank.
Как я делаю версию для слабовидящих на практике
Мой процесс обычно такой:
- аудит текущей вёрстки: смотрю контрастность через DevTools, проверяю alt-тексты, тестирую табуляцию по клавиатуре;
- отдельная тема стилей с увеличенным шрифтом и высоким контрастом, которая переключается по кнопке в шапке;
- состояние переключателя сохраняю в localStorage, чтобы версия не сбрасывалась при переходе между страницами;
- для сайтов, где версия обязательна по ГОСТ, делаю отдельный URL вида site.ru/for-visually-impaired, потому что проверяющие органы смотрят именно на наличие отдельного адреса, а не на CSS-переключатель;
- отключаю карусели и анимации в этом режиме через media-запрос prefers-reduced-motion и флаг в разметке.
Если сайт собран на Tilda, такую логику я реализую отдельным кастомным скриптом, который не трогает базовую вёрстку конструктора и не конфликтует с готовыми блоками зон доставки или расчёта налогов. На WordPress проще завести отдельный шаблон страницы и переключать класс на body через небольшой JS-модуль, без тяжёлых сторонних плагинов, которые тянут за собой лишние запросы и замедляют загрузку.
Тестирование и типичные ошибки
Перед сдачей версии для слабовидящих я прогоняю три проверки: масштабирование браузера до 200% с сохранением работоспособности форм, полную навигацию по Tab без мыши и чтение ключевых страниц через NVDA. Из ошибок, которые встречал у клиентов после чужой разработки:
- переключатель версии есть, но при перезагрузке страницы сбрасывается на обычный режим;
- увеличенный шрифт растягивает кнопки за пределы контейнера, и часть текста в них обрезается;
- изображения-декорации получили alt с описанием, хотя по стандарту у них должен быть пустой alt, иначе скринридер зачитывает мусор на каждой странице;
- версия для слабовидящих работает на главной, но не подключена на страницах каталога и корзины.
Сколько стоит и сколько занимает по времени
Простой переключатель контраста и шрифта на Tilda как кастомный скрипт стоит от 3 000 ₽ и делается за 1-2 дня. Полноценная версия с отдельным URL, доработкой семантики и проверкой через скринридер, на WordPress или в связке с интеграциями вроде эквайринга и СДЭК, идёт уже как комплексная доработка от 40 000 ₽, срок обычно 5-10 дней в зависимости от количества шаблонов страниц. На рынке за аналогичную работу в студиях просят от 30 000 до 100 000 ₽, и цена там сильно зависит от того, включена ли ручная проверка соответствия ГОСТ или клиенту просто ставят готовый виджет без адаптации разметки.
Частые вопросы
Обязательна ли версия для слабовидящих для интернет-магазина?
Юридически нет, если магазин не работает по государственному или муниципальному контракту. Но для аудитории 50+ или медицинской тематики такая версия ощутимо снижает отказы на страницах оформления заказа, так что я рекомендую её даже без формальной обязанности.
Чем версия для слабовидящих отличается от адаптивной вёрстки?
Адаптивная вёрстка подстраивает сайт под размер экрана устройства. Версия для слабовидящих меняет контраст, размер шрифта, отключает анимацию и обеспечивает навигацию с клавиатуры и скринридером независимо от размера экрана. Это разные задачи, и одна не заменяет другую.
Можно ли использовать бесплатный виджет вместо разработки?
Можно для сайта без юридической обязанности, но такие виджеты часто конфликтуют с формами оплаты, зонами доставки и всплывающими окнами, а требованиям ГОСТ по семантике разметки не соответствуют почти никогда. Для проверяющих органов их обычно недостаточно.
Как проверить, что версия сайта соответствует ГОСТ?
Проверяю вручную по трём пунктам: контрастность через инструменты разработчика в браузере, полную навигацию по Tab без мыши и чтение основных страниц скринридером NVDA. Автоматические сканеры доступности дают только первичную картину и пропускают часть проблем с семантикой.