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

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

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

Кому это обязательно, а кому — нет

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

Технический ориентир один — национальный стандарт ГОСТ Р 52872-2019, описывающий требования доступности интернет-ресурсов для людей с инвалидностью. Стандарт добровольный сам по себе, но становится обязательным, когда на него ссылается нормативный акт или условия государственного контракта. Проще говоря: если вы получаете бюджетные деньги или оказываете государственную услугу, ссылка на него у вас, скорее всего, уже есть в документах, просто её никто не читал.

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

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

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

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

Плагин-переключатель и настоящая доступность — разные вещи

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

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

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

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

Что ломается при включении режима

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

• Фиксированная шапка наезжает на содержимое. Высота шапки задана в пикселях, отступ сверху у содержимого тоже. Шрифт вырос, шапка стала выше, отступ остался прежним — первый экран перекрыт.
• Текст обрезается в блоках с заданной высотой. Карточки услуг, плитки категорий, блоки преимуществ почти всегда имеют фиксированную высоту ради ровной сетки. При увеличении шрифта текст не помещается и либо обрезается, либо вылезает поверх соседнего блока.
• Кнопки теряют подписи. Если текст кнопки задан не в разметке, а средствами оформления, при смене стилей он исчезает. Пользователь видит пустой прямоугольник.
• Мобильное меню перестаёт открываться. Плагин переопределяет свойства отображения элементов, а меню держится на переключении именно этих свойств скриптом темы. Конфликт приоритетов — и меню не раскрывается.
• Пропадают изображения вместе со смыслом. Режим часто отключает картинки. Если у вас схема проезда, прайс или расписание нарисованы картинкой, посетитель в этом режиме теряет их полностью и никакого текстового варианта не получает.
• Таблицы уезжают за край экрана. Увеличенный шрифт растягивает таблицу шире экрана, а обёртки с горизонтальной прокруткой у неё нет.

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

Плагин или доступность в вёрстке

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

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

Спецверсия на отдельном адресе: как не наплодить дублей

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

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

Что делать, если менять плагин нельзя.

1. Проверить, есть ли на страницах спецверсии канонический адрес, указывающий на обычную версию. Если есть — половина проблемы решена.
2. Добавить на страницы спецверсии запрет показа в поиске метатегом. Именно метатегом, а не запретом обхода: запрет обхода не даст роботу прочитать ни канонический адрес, ни метатег, и адреса застрянут в индексе.
3. Убедиться, что адреса спецверсии не попадают в карту сайта.
4. Проверить в панели вебмастера раздел исключённых страниц через пару недель: количество копий должно перестать расти.

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

Что даёт доступность обычному коммерческому сайту

Формальной обязанности нет, а польза есть, и она измеримая. Не потому, что доступность — фактор ранжирования: она им не является. Работает через поведение и через качество разметки.

Контраст и размер текста. Светло-серый текст на белом фоне — самая частая находка на дизайнерских сайтах. Минимально приемлемое соотношение яркости текста и фона для обычного кегля — четыре с половиной к одному. Проверяется любым бесплатным измерителем контраста за минуту. Аудитория старше сорока пяти лет читает такой текст с трудом и уходит, и это прямо видно в записях визитов.

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

Текстовые описания изображений. Нужны программе чтения — и они же дают трафик из поиска по картинкам. Это единственный пункт доступности с прямым эффектом на посещаемость.

Осмысленные тексты ссылок. Ссылка «подробнее» бесполезна и человеку с программой чтения, и роботу: ни один из них не понимает, куда она ведёт. Замена на конкретную формулировку улучшает и то и другое.

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

Возможность увеличить масштаб на телефоне. Многие темы прописывают запрет масштабирования в служебном теге. Человек не может приблизить мелкий текст пальцами. Убирается одной строкой в шаблоне, а к мобильному удобству имеет прямое отношение — а мобильная версия сегодня и есть основная для робота, о чём подробно в разборе Mobile-first индексация.

Как проверить свой сайт за полчаса

1. Увеличьте масштаб страницы до двухсот процентов. Всё должно оставаться читаемым и нажимаемым, горизонтальной прокрутки быть не должно.
2. Пройдите по странице клавишей перехода между элементами. Фокус должен быть видимым и двигаться в логичном порядке, а не прыгать.
3. Проверьте контраст основного текста, подписей и текста на кнопках измерителем контраста.
4. Найдите в шаблоне служебный тег с настройками области просмотра и уберите оттуда запрет масштабирования, если он есть.
5. Откройте исходный код и убедитесь, что у страницы один заголовок первого уровня и уровни не перескакивают.
6. Проверьте, есть ли текстовые описания у смысловых картинок и пустые описания у декоративных.
7. Посмотрите на подписи полей форм: они должны быть связаны с полями, а не быть просто текстом рядом. Подсказка внутри поля подписью не считается.
8. Если плагин доступности установлен, включите режим и пройдите ключевые сценарии: открыть меню, дойти до формы, отправить заявку.
9. Если режим меняет адрес, проверьте канонический адрес и запрет показа в поиске на спецверсии.
10. Сбросьте кэш и откройте сайт в приватном окне: обычная версия должна открываться в обычном виде.

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

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

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

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

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

Как выбрать плагин, если решено ставить готовый? Смотрите на три вещи: переключает ли он режим без смены адреса, работает ли панель с клавиатуры и обновлялся ли он за последний год. Общие соображения по отбору плагинов есть в материале Какие плагины на WordPress помогут оптимизировать сайт.

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

Коротко

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