Версия сайта для слабовидящих: требования и настройка

Коротко

Версия сайта для слабовидящих — требования к ней сводятся к нескольким вещам: посетитель может увеличить шрифт, выбрать контрастную цветовую схему, отключить изображения и анимацию, а сайт при этом остаётся полностью рабочим и удобным с клавиатуры и экранной читалкой. Кнопка перехода в этот режим должна быть заметной и находиться на каждой странице, обычно в шапке.

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

Кто	Обязательна ли версия	Что делать
Школы, колледжи, вузы, детские сады, организации дополнительного образования	Да, по требованиям к официальному сайту	Режим для слабовидящих на всех страницах
Государственные и муниципальные учреждения	Как правило, да, по отраслевым требованиям	Проверить требования ведомства
Медицинские, социальные, культурные организации	Зависит от статуса и отрасли	Уточнить у юриста или ведомства
Коммерческие компании	Прямой обязанности обычно нет	Базовая доступность по желанию

Основная мысль

Правильная версия для слабовидящих — это не отдельная копия сайта и не «кнопка с очками» ради проверки, а режим отображения того же сайта, который меняет шрифты, цвета и изображения, а под ним лежит доступная вёрстка: правильные заголовки, подписи к картинкам и навигация с клавиатуры.

Часто встречаются два крайних варианта. Первый — отдельная «специальная версия» на поддомене, которую сделали несколько лет назад и забыли. Новости и документы в ней устарели, половина ссылок ведёт на обычную версию. Проверяющий такой сайт формально видит кнопку, но пользоваться им невозможно.

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

Поэтому версию для слабовидящих делают как режим отображения основного сайта. Содержимое одно и то же, меняется только оформление. Такой подход не требует поддержки двух копий и не отстаёт от обновлений контента.

Версия для слабовидящих для сайта: закон и кому она обязательна

Требования к доступности сайтов в России разбросаны по разным документам, и единого закона «о версии для слабовидящих» нет. Поэтому ответ на вопрос «обязательна ли она» зависит от того, кто владелец сайта.

Образовательные организации

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

Государственные и муниципальные органы и учреждения

Для сайтов органов власти и подведомственных учреждений требования доступности для людей с нарушениями зрения закреплены в нормативных актах и отраслевых документах. Конкретный набор зависит от ведомства. Практический ориентир для всех — национальный стандарт требований доступности интернет-ресурсов для людей с инвалидностью по зрению.

Коммерческие сайты

Интернет-магазин, сайт производственной или сервисной компании в общем случае не обязан иметь отдельную версию для слабовидящих. Но доступность всё равно имеет смысл: пожилые посетители, люди с ослабленным зрением, пользователи с телефоном на ярком солнце — это заметная часть аудитории.

Эта статья — практический разбор от разработчика, а не юридическое заключение. Если от наличия версии зависят проверки или договоры, сверьте требования с юристом или курирующим ведомством. Похожий подход нужен и к другим обязательным элементам сайта — об этом в статье про проверку сайта на соответствие 152-ФЗ.

Версия сайта для слабовидящих: требования

Обязательный набор функций в разных документах сформулирован по-разному, но на практике проверяют одни и те же вещи.

Что должен уметь режим

Размер шрифта. Несколько вариантов, минимум обычный, крупный и очень крупный. Вёрстка при увеличении не ломается.
Цветовые схемы. Несколько контрастных сочетаний: чёрный текст на белом фоне, белый на чёрном, тёмно-синий на голубом и другие.
Изображения. Возможность отключить картинки или сделать их чёрно-белыми. При отключении видны подписи.
Интервалы. Увеличенный межбуквенный и межстрочный интервал.
Шрифт. Шрифт без засечек, хорошо читаемый.
Анимация. Отключение слайдеров, мигающих и движущихся элементов.
Возврат. Кнопка «Обычная версия» на видном месте.
Сохранение настроек. Выбранный режим сохраняется при переходе между страницами.

Что должно работать под режимом

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

Правильная иерархия заголовков: один H1, затем H2 и H3 по смыслу.
Текстовые подписи к изображениям — атрибут alt у содержательных картинок.
Навигация с клавиатуры: все ссылки, кнопки и формы доступны клавишей Tab, фокус виден.
Подписи у полей форм, а не только подсказки внутри поля.
Документы в текстовом виде, а не сканами. Скан приказа экранная читалка не прочитает.
Ссылки с понятным текстом вместо «подробнее» и «здесь».

Где разместить кнопку

Кнопку перехода в режим размещают в шапке сайта, на всех страницах, так, чтобы её было видно без прокрутки. Обычно используют значок глаза или очков с подписью. Кнопка должна быть достаточно крупной и контрастной — иначе человек со слабым зрением её просто не найдёт.

Элемент	Минимум	Хорошая практика
Размер шрифта	Три варианта	Плюс настройка интервалов
Цветовые схемы	Контрастные сочетания	Несколько схем, включая инверсию
Изображения	Отключение	Отключение и чёрно-белый режим
Навигация	Работает с мышью	Полностью с клавиатуры
Документы	Доступны для скачивания	Текстовые, не сканы

Версия для слабовидящих для образовательного сайта

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

Особенности

Сайт образовательной организации содержит обязательный раздел со сведениями об организации и множество документов. Режим для слабовидящих должен работать на всех страницах этого раздела, включая таблицы и списки документов. Частая ошибка — режим сделан только для главной и новостей, а раздел сведений остаётся в обычном виде.

Вторая особенность — документы. Если приказы и положения загружены сканами без текстового слоя, режим для слабовидящих формально есть, а прочитать документы нельзя. Лучше выкладывать документы в текстовом формате или с распознанным текстом.

Готовые шаблоны для школ

Многие шаблоны сайтов для образовательных организаций на 1С-Битрикс и WordPress уже содержат режим для слабовидящих. Перед покупкой проверьте его работу: увеличьте шрифт до максимума, переключите цветовые схемы и пройдите по основным разделам. Если вёрстка разваливается, придётся дорабатывать.

Версия для слабовидящих сайта образовательных организаций: что проверить

Кнопка режима есть в шапке каждой страницы.
Режим работает во всех разделах, включая раздел сведений об организации.
Таблицы читаются при крупном шрифте, не выходят за экран.
Документы открываются и читаются, это не сканы без текста.
Режим сохраняется при переходе по страницам.
Кнопка возврата к обычной версии заметна.
Формы обращений работают в режиме для слабовидящих.

Как сделать на сайте версию для слабовидящих

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

Отдельная копия сайта

Устаревший подход: отдельный поддомен или раздел с упрощённой копией сайта. Минусы очевидны — контент нужно поддерживать дважды, и он неизбежно расходится. Такой вариант стоит заменить.

Готовый модуль или плагин

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

Режим, встроенный в шаблон

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

Пошагово: как внедрить режим

Проверьте, обязателен ли режим для вашей организации и какие требования к нему предъявляют.
Проведите аудит текущей вёрстки: заголовки, alt у изображений, навигация с клавиатуры, контраст.
Исправьте базовую доступность — это нужно при любом подходе.
Выберите модуль или встраивание в шаблон.
Добавьте кнопку в шапку всех страниц.
Проверьте каждый режим на основных типах страниц: главная, раздел, статья, документы, формы, контакты.
Проверьте на телефоне: режим должен работать и там.
Проверьте сайт экранной читалкой хотя бы на нескольких страницах.

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

Версия для слабовидящих: модуль на сайт WordPress и 1С-Битрикс

Выбор модуля зависит от движка и от того, насколько аккуратно свёрстан сайт.

WordPress

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

Лишний плагин — это ещё один источник конфликтов и замедления. Как подбирать плагины и не перегрузить сайт, разобрано в статье про плагины WordPress для сайта компании. Если тема сайта своя, режим для слабовидящих часто проще встроить в неё напрямую.

1С-Битрикс

Для Битрикса в Marketplace есть модули версии для слабовидящих, в том числе рассчитанные на сайты образовательных и государственных учреждений. Модуль ставится из административной части, после чего кнопка выводится в шаблоне. Перед установкой делайте резервную копию, а при обновлениях проверяйте, что режим продолжает работать. Порядок установки и обновления модулей описан в статье про модули 1С-Битрикс.

Что проверить в любом модуле

Сохраняются ли настройки между страницами.
Работает ли режим на закэшированных страницах.
Не ломает ли модуль мобильную версию.
Не мешает ли он счётчикам и формам.
Как модуль ведёт себя после обновления движка.

Как убрать версию для слабовидящих на сайте

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

Если режим включился сам

Режим запоминается в браузере, поэтому после случайного включения сайт так и открывается с крупным шрифтом и контрастными цветами. Чтобы выйти, найдите кнопку «Обычная версия» — обычно она в верхней панели. Если кнопки не видно, помогает очистка файлов cookie и данных сайта в браузере.

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

Если нужно убрать режим с сайта

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

Если режим не нужен:

Сделайте резервную копию сайта.
Отключите и удалите плагин или модуль.
Уберите кнопку и связанные стили из шаблона, если они добавлялись вручную.
Очистите кэш сайта. На Битриксе это делается в настройках кэша — подробнее в статье про кэш в 1С-Битрикс.
Проверьте, что вёрстка не пострадала и на страницах не осталось пустых мест от кнопки.

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

Доступность на любом сайте: что улучшить без отдельного режима

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

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

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

Навигация и формы

Все интерактивные элементы доступны с клавиатуры, порядок перехода логичный.
Фокус видно: при переходе клавишей Tab понятно, где находится курсор.
У полей форм есть подписи, ошибки заполнения описаны текстом, а не только красной рамкой.
Кнопки и ссылки достаточно крупные для нажатия пальцем.

Изображения и медиа

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

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

Сколько времени и денег это занимает

Объём работ зависит от состояния сайта, поэтому точную оценку дают после просмотра вёрстки.

Типичные сценарии

Аккуратная вёрстка, нужен только режим. Установка и настройка модуля, проверка режимов, мелкие правки стилей — обычно несколько часов работы.
Вёрстка ломается при увеличении шрифта. Нужна доработка стилей для меню, карточек, таблиц и форм. Это уже несколько дней.
Нужна базовая доступность с нуля. Заголовки, подписи, навигация с клавиатуры, документы в текстовом виде. Объём сильно зависит от числа шаблонов и документов.

Работы такого рода обычно оплачиваются по времени: поддержка и доработка сайта стоят от 2 000 ₽ в час. Модуль из Marketplace или платный плагин оплачиваются отдельно по цене разработчика модуля.

Типичные ошибки и чек-лист

Большинство проблем с версией для слабовидящих возникает, когда её делают «для галочки».

Частые ошибки

Отдельная копия сайта, которая отстала от основного.
Кнопка режима маленькая и незаметная.
При увеличении шрифта ломается меню и таблицы.
Режим работает на главной, но не во внутренних разделах.
Документы выложены сканами без текста.
У изображений нет подписей.
Формы нельзя заполнить с клавиатуры.
Нет кнопки возврата к обычной версии.
Модуль перестал работать после обновления, и никто не заметил.

Чек-лист

Определено, обязательна ли версия для вашей организации.
Кнопка режима есть в шапке каждой страницы.
Работают размеры шрифта, цветовые схемы, отключение изображений.
Вёрстка не ломается ни в одном режиме, в том числе на телефоне.
Настройки сохраняются между страницами.
У изображений есть подписи, заголовки идут по порядку.
Сайт проходится с клавиатуры, фокус виден.
Документы текстовые или с распознанным текстом.
Есть заметная кнопка возврата к обычной версии.
После каждого обновления движка режим проверяется заново.

Частые вопросы

Какие требования к версии сайта для слабовидящих?

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

Обязательна ли версия для слабовидящих для сайта организации?

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

Какой закон требует версию для слабовидящих для сайта?

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

Сайт должен иметь версию для слабовидящих, если это интернет-магазин?

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

Как сделать на сайте версию для слабовидящих бесплатно?

Можно поставить бесплатный плагин или модуль. Но если вёрстка не готова к увеличению шрифта, всё равно понадобится доработка, иначе режим будет выглядеть сломанным.

Нужна ли версия для слабовидящих для образовательного сайта детского сада?

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

Можно ли просто поставить виджет со стороннего сервиса?

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

Как убрать версию для слабовидящих, если она включилась случайно?

Нажмите кнопку «Обычная версия» в верхней панели сайта. Если её нет, очистите cookie и данные сайта в браузере.

Как проверить, что версия для слабовидящих работает правильно?

Включите каждый режим и пройдите по основным страницам, в том числе с телефона. Затем пройдите сайт только с клавиатуры и проверьте несколько страниц экранной читалкой.

Влияет ли версия для слабовидящих на скорость сайта?

Режим на стилях почти не влияет на скорость. Замедлить сайт могут тяжёлые сторонние виджеты, которые загружают скрипты и шрифты с чужого сервера на каждой странице. Поэтому после установки модуля сравните скорость загрузки до и после.

Нужно ли делать версию для слабовидящих на поддомене?

Нет. Отдельная копия на поддомене требует двойной поддержки и быстро устаревает. Режим отображения основного сайта надёжнее и проще в сопровождении.

Итог

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

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

Если нужно добавить версию для слабовидящих на сайт на 1С-Битрикс или WordPress, доработать шаблон под крупный шрифт и контрастные схемы или привести сайт образовательной организации в порядок перед проверкой, я как частный разработчик сделаю это аккуратно и без отдельной копии сайта. Работаю напрямую, без посредников. Подробнее — на странице доработки сайта на 1С-Битрикс, а для WordPress — на странице доработки сайта на WordPress.