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

Как сделать сайт доступным
для незрячих и слабовидящих?

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

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

Когда задумались о доступности?

В 1996 году был создан Консорциум Всемирной Паутины (World Wide Web Consortium, W3C), и на одной из встреч был предложен черновик гайдлайнов для улучшения доступности веба. Инициатива получила поддержку таких крупных спонсоров, как Microsoft, IBM, Adobe, и сейчас все популярные браузеры имеют настройки доступности и поддержку разметки WAI-ARIA для предоставления возможности полноценного использования Интернета людям с физическими ограничениями (нарушения работы органов зрения и опорно-двигательного аппарата).

Сейчас существуют руководства для веба с целью повышения доступности контента: международный стандарт WCAG2.0 для пользователей с различными ограничениями здоровья (зрение, слух, моторика и т.д.) и российский национальный стандарт доступности веб-ресурсов для инвалидов по зрению ГОСТ Р 52872-2019 . Они разрабатывались для людей с нарушениями здоровья, однако использование тех же принципов повысит уровень комфорта в работе с сайтом и для здоровых людей. Ведь люди могут просто устать или же читать сайт с маленького телефона с тусклым экраном, на котором плохо виден текст.

Экология доступности

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

1. Масштабируемая верстка

(5.1.7.7 ГОСТ Р 52872-2019 : размер шрифта текста может быть изменен в пределах 200 процентов без применения вспомогательных технологий таким образом, что пользователю не нужно прибегать к горизонтальной прокрутке для прочтения строки при режиме отображения страницы во весь экран).

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

В качестве удачного примера использования масштабируемой верстки можно привести сайт Центрального Банка РФ . Масштаб сайта можно увеличить в браузере не только до 200%, но и до 500% без появления горизонтальной прокрутки.

На скриншоте: увеличение масштаба до 200%. Полосы прокрутки нет

2. Достаточная контрастность текста и фона

(5.1.7.3 ГОСТ Р 52872-2019 : Визуальное отображение текста и изображения текста имеет коэффициент контрастности не менее 4,5:1).

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

Контрастность текстов можно проверить с помощью чекеров контрастности, например Colour Contrast Analyser , или расширений для браузера, например “Contrast Ratio Checker” для Chrome. Существуют даже онлайн-чекеры контрастности, не требующие установки на компьютер.

На сайте Пенсионного Фонда РФ основной текст имеет достаточную контрастность, 14:1.

Для дополнительного текста (подсказок, рекламных материалов) требования к контрастности чуть менее строгие.

3. Возможность работать с сервисом с помощью клавиатуры

(5.2.1.1 ГОСТ Р 52872-2019 : Всей функциональностью контента можно управлять через интерфейс клавиатуры без каких-либо ограничений по времени нажатия на клавишу, за исключением случаев, когда вызываемая функция требует ввода с помощью других устройств, зависящего от направления движения пользователя, а не только от конечной точки. Это не запрещает и не должно препятствовать предоставлению возможностей ввода с помощью мыши и других способов в дополнение к клавиатуре).

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

Люди с нарушениями здоровья могут не пользоваться мышкой из-за проблем с мелкой моторикой. А незрячие люди могут пользоваться экранными дикторами — программами для озвучивания текста на экране. В таких случаях важно, чтобы на сайте корректно работал фокус (при нажатии на кнопку TAB выделялась следующая ссылка/кнопка, а также в строке состояния браузера отображалась ссылка, куда будет совершен переход).

Работа с клавиатурой на сайте хорошо реализована на сайте Госуслуг .

Госуслуги: при нажатии кнопки TAB фокус переключается последовательно на каждую кнопку/ссылку.

Если посмотреть на сайты иностранных коллег, например на сайте банка Barclays реализована возможность пропустить повторяющиеся элементы (верхнее меню) при управлении с клавиатуры. Она включается только по клавише TAB.

На скриншоте видно, что пропускается все сквозное верхнее меню и идет переход сразу к первой кнопке на странице.

Это ускоряет доступ к нужному контенту при управлении с клавиатуры при просмотре сайта.

Как можно заметить, большая часть требований — технические, относящиеся к верстке сайта.

Но об “экологии верстки” стали задумываться только недавно. Хотя о доступности веб-контента для лиц с ограничениями здоровья говорили еще в 1994 году, бурное развитие веба привело к тому, что сейчас хорошо сверстанные сайты с учетом рекомендаций для комфортного чтения — скорее исключения или “правила хорошего тона” серьезных веб-студий.

Что делать, если с версткой сайта все плохо? Панель комфортного чтения!

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

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

Панель комфортного чтения на сайте Росбанка.

В 2018 году такая панель появилась и на сайте ВТБ .

Панель комфортного чтения на обновленном сайте ВТБ.

На сайте Пенсионного Фонда РФ есть несколько иные варианты настройки контрастности, а также встроен свой собственный “экранный диктор”, благодаря чему не требуется запуск дополнительных программ.

Панель комфортного чтения на сайте ПФРФ (с примененной настройкой контрастности)

Для установки подобной панели не обязательно иметь доступ к исходному коду сайта. Существуют подобные плагины и для популярных CMS, которые может установить практически каждый без особенных затрат, поскольку установка плагина осуществляется либо автоматически, либо требует не слишком трудоемких манипуляций пользователя с готовым скриптом. Например, можно использовать плагин Comfortable Reading (для WordPress и Joomla).

Пример настройки сайта с помощью плагина Comfortable Reading

Есть панель — нет проблем? Все не так просто!

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

1. Ограниченный функционал

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

Пример: сайт Генпрокуратуры РФ . Имеются настройки размера шрифта и три варианта цветовой схемы.

2. Отдельная версия сайта для слабовидящих

Версия для слабовидящих находится на отдельном URL. Также на ней может отсутствовать часть контента по сравнению с обычной версией. Это не самое удачное решение, поскольку нужно поддерживать две отдельных версии сайта, что ведет к дополнительным затратам. Такой вариант используется, например, на http://kremlin.ru/ .

3. Проблемы работы с экранным диктором

На некоторых сайтах хорошо реализована панель для настроек ( ПФРФ ) или адаптивная версия ( Госуслуги ), но есть проблемы взаимодействия с программами экранных дикторов. Например, не озвучивается часть контента или сложно установить фокус на элемент при включенной программе диктора.

О проблемах работы интернет-банков и мобильных приложений с экранным диктором компания USABILTIYALB подробно рассказывала на банковском завтраке в сентябре 2017 года.

4. Версию для слабовидящих сложно найти даже зрячему человеку

Например, используются очень бледные, незаметные иконки, как на сайте Счетной палаты РФ :

Смогли бы вы сразу заметить иконку, если бы она не была выделена на скриншоте?

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

Пример нестандартной иконки

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

Заключение

Мы видим, что развитие юзабилити и доступности на данный момент идет не столько со стороны бизнеса, сколько со стороны государства. Проблемы доступности активно обсуждаются и решаются в банковской сфере , при поддержке ЦБРФ.

1 января 2016 года вступил в силу Федеральный закон № 419-ФЗ «О внесении изменений в отдельные законодательные акты Российской Федерации по вопросам социальной защиты инвалидов в связи с ратификацией конвенции о правах инвалидов», и большинство государственных сайтов добавили версию для слабовидящих. Однако на некоторых из них такая версия отсутствует.

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

По нашему мнению, в ближайшем будущем появятся и стандарты для панели для слабовидящих, и правила “хорошего тона” верстки будет соблюдаться все чаще и чаще!

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

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

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

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

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

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

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

Проверить контрастность текста на сайте можно с помощью специальных программ, расширений для браузеров и онлайн-инструментов. Например, Color Contrast Analyser. По ГОСТ показатель контрастности на сайте должен быть не менее 4,5:1.

Методы создания адаптивной версии для людей с нарушенным зрением:

1. Внедрение уникального скрипта, который придется заказать у программиста.
2. Использование демо-версий плагинов, стандартных скриптов. Бесплатно или за небольшую цену.
3. Создание отдельной версии сайта на поддомене. Наиболее затратный вариант, подразумевает привлечение верстальщика и дизайнера.
4. Создание адаптивного шаблона под существующий сайт.

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

Рассмотрим на примере бесплатную версию Uscript. Для ее использования для любой CMS сайт должен поддерживать библиотеку Jquery. Далее нужно зайти в редактор кода и добавить между тегами . такие строки:

В этом случае используется шрифт ligature symbols. Вы можете заменить его на любой другой.

Далее необходимо вставить еще один участок кода после закрывающего тега :

Размер шрифта: A A A 
Изображения ВыключитьВключить
Цвет сайта ЦЦЦ 
 обычная версия сайта

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

" onclick="dmuGostSettings();" > версия для слабовидящих 
 Его нужно добавить там, где бы вы хотели отобразить кнопку перехода на адаптивную версию сайта. В конце страницы желательно добавить еще одну строку для окончательной загрузки скрипта: 

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

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

Для использования этого сервиса достаточно добавить несколько строк в код HTML или Javascript по инструкции. Нужно зайти на сайт FineVision и ввести домен в строку.

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

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

Для создания адаптивного шаблона сайта для людей с плохим зрением удобно использовать платные и бесплатные плагины. Например, Button visually impaired или For the visually impaired.

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

Запомнить

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

Закончил факультет кибернетики. Работал интернет-маркетологом. Не по наслышке знаком с SEO, PPC, таргетингом, ремаркетингом и продвижением сайтов — в течение нескольких лет практиковал на фрилансе. В портфолио есть успешные кейсы. Пробовал создать собственное агентство, но прогорел и решил поменять сферу деятельности. Далеко из профессии не ушел — использовал свои знания и опыт в копирайтинге. С 2016 года работаю редактором и автором текстов в Netpeak Journal.

Узнайте больше

4

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

С 1 января 2016 года образовательные учреждения и государственные организации должны оснастить свои сайты версией для слабовидящих.

«Порядок обеспечения условий доступности для инвалидов по зрению официальных сайтов федеральных органов государственной власти, органов государственной власти субъектов Российской Федерации и органов местного самоуправления в сети «Интернет» устанавливается уполномоченным Правительством Российской Федерации федеральным органом исполнительной власти.»

Источник: Изменения в Статье №10 ФЗ-8 от 9 февраля 2009 года.

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

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

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

Если же изучать тему с формальной точки зрения, то существует ГОСТ Р 52872-2012 «Интернет-ресурсы. Требования доступности для инвалидов по зрению.». Согласно этому документу существует несколько стандартов, доступности информации, например «Уровень А — уровень минимальной доступности. Позволяет инвалиду по зрению обеспечить доступность к интернет-ресурсу без потерь информации».

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

В рамках стандартных возможностей по работе с текстами сайта, такие требования не обеспечить. А значит сайт придется оснащать специальными техническими средствами.

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

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

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

Как выглядит версия для слабовидящих на конструкторе сайтов Nubex

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

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

Посмотреть, как выглядит рабочая версия для слабовидящих на Nubex, можно на примере сайта для детского садика.

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

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

1. Для этого зайдите в главное меню системы управления сайтом: «Документы сайта» -> Колонка № 1.
2. Нажмите на голубую стрелочку внутри кнопки «создать текстовый блок» в выпадающем списке выберите «Создать ссылку на версию для слабовидящих».
3. Ссылка на версию отобразиться в левой колонке вашего сайта (можно переместить ее повыше используя кнопку «Изменить порядок».

Готово!

Если на вашем сайте дизайн настроен таким образом, что левая колонка отсутствует на главной, вам придется ее включить. Для этого зайдите в раздел «оформление» -> «настроить тему» -> «настройка композиции» -> в блоке «Разбивка центрального поля главной страницы» выберите вариант с двумя колонками (узкая колонка слева L2).

Что если у меня сайт сделан на другой платформе?

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

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

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

Преимущество работы с конструктором сайтов Nubex

Наверняка законодательство еще не раз будет меняться, а в месте с ним будут изменяться и требования к сайтам. Команда разработчиков Nubex внимательно отслеживает все обязательные нововведения и своевременно выпускает обновления, позволяющие сайтам соответствовать новым требованиям. Поэтому, если ваш ресурс работает на этой платформе, вы будете готовы к любым законодательным изменениям, касающимся сайтов.

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

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

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

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

Если говорить о мировых тенденциях, то разработкой общих стандартов и требований к доступности сайтов занимается консорциум W3C. Именно он стоит за разработкой международного стандарта WCAG (текущая версия 2.2, здесь можно найти переведённую на русский язык версию 2.0). В России тоже существует свой отраслевой стандарт, регламентирующий доступность сайтов для инвалидов по зрению – ГОСТ Р 52872-2019 (актуальное содержимое, документ базируется на принципах WCAG 2.1).

Но наличие стандартов и ГОСТов – это не гарантия доступности. Ведь требования нормативных актов носят лишь рекомендательный характер. Обязательным их выполнение является только для определённых категорий сайтов. Это сайты государственных и муниципальных органов, организаций системы здравоохранения, учреждений культуры, учебных заведений и соцучреждений. Согласно тому же ГОСТу, доступность может быть трёх видов – минимального/приемлемого уровня (категория А), высокого (АА) и наивысшего (ААА).

Что конкретно будет входить в понятие доступности сайта?

• Возможность масштабирования текста до 200% (в идеале желательно ещё больше) без появления эффекта горизонтальной прокрутки.
• Высокий коэффициент контрастности текста (минимум 4,5 к 1, а лучше 7 к 1).
• Возможность управления страницей и переключение между ключевыми элементами/блоками с помощью клавиатуры (например, кнопка Tab может перемещать фокус между наиболее важными элементами страницы: форма поиска, меню, основной контент, блок контактов и т.п.).

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

Каждая из реализаций версий для слабовидящих может иметь свои особенности, поэтому процесс настройки такого функционала логично рассмотреть в разрезе наиболее популярных движков (CMS-систем) и платформ (в том числе онлайн-конструкторов сайтов).

Сразу обозначим, что существует несколько подходов: преобразование (доработка) имеющейся версии сайта или создание новой (отдельной) версии для слабовидящих. Второй случай максимально сложный и дорогостоящий, так как у вас появляется необходимость обслуживания параллельно ещё одного сайта – со своими особенностями и настройками. Более логично и дешевле – доработать текущую версию.

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

WordPress – это самый популярный движок для любых типов проектов, включая сайты государственных органов и структур. На нём работают многие порталы школ, детских садов и пр. Версия для слабовидящих не повредит и бизнес-сайтам: интернет-магазинам, СМИ-порталам.

Лучший хостинг для движка, если вы не хотите тратить время на подбор – HostGator (от 2,75 $/месяц, обзор хостера).

Как и в случае с любым другим дополнительным функционалом в WP, для добавления поддержки слабовидящих можно воспользоваться специальными модулями (плагинами). Но тут стоит учесть, что очень многое будет зависеть от задействованной на сайте темы. Некоторые популярные шаблоны, особенно, если они разработаны официальной командой WordPress, уже учитывают необходимость работы с доступностью контента для разных категорий пользователей. Но обычно этим могут похвастаться только предустановленные темы, например, Twenty Twenty-One, Twenty Twenty-Two, Twenty Twenty-Three и т.п.

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

1. Устанавливается соответствующий плагин и активируется в панели управления сайтом (если плагина нет в официальном каталоге, его придётся загрузить на сервер вручную или через специальный интерфейс в админ-панели WordPress).
2. Далее плагин настраивается, если это необходимо – активируются нужные элементы интерфейса, меняются названия пунктов панели для слабовидящих, отключаются ненужные функции, выбирается язык, определяются приоритеты разметки и т.п. Всегда можно оставить настройки по дефолту.
3. Во вкладке «Внешний вид» –> «Виджеты» на одну из боковых панелей (или в футер/шапку) нужно добавить новый виджет с кнопкой запуска панели, если соответствующая кнопка не появляется автоматически (некоторые плагины умеют создавать плавающие значки без дополнительных виджетов). Если у вас более современная тема, то доступа к виджетам не будет. Вместо этого на страницу нужно добавить блок. Блоки сторонних плагинов попадают в раздел «Виджеты» в панели выбора нового блока (или просто воспользуйтесь формой поиска блока внутри конструктора Gutenberg).
4. В отдельных плагинах кнопку вызова панели для слабовидящих можно добавить вручную, в виде специальных ссылок или произвольного кода. Для этого необходимо изучить официальную документацию к расширению.
5. Когда кнопка вызова панели создана, проверьте работоспособность интерфейса.

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

Не менее важно обновить или добавить описания медиаконтента – так, чтобы текстовые строки позволяли понять, что конкретно изображено на картинке или представлено на видео.

Ниже лучшие плагины для получения версии для слабовидящих в WordPress.

1. Плагин Button visually impaired (BVI)

Решение распространяется абсолютно бесплатно, разработано русскоязычной командой isvek в 2014 году. Сейчас актуальная версия скрипта – 2.3.0. Добавляется к сайту максимально просто – в виде стандартного плагина. Вместе с плагином поставляются шорткоды и виджеты, с помощью которых можно быстро организовать вставку кнопки с активацией модуля и контента, который будет отображаться только на версии для слабовидящих.

Что примечательно, у BVI есть универсальная версия скрипта, которая может быть добавлена к любому сайту, даже если он не работает на WordPress. При нажатии кнопки активации отображается специальная панель, в которой можно настроить размер шрифта, межстрочный и межбуквенный интервал, а также другие параметры внешнего вида. У BVI есть встроенный модуль онлайн-чтения (озвучивания текста).

• Полностью бесплатный плагин.
• Есть функционал синтезирования речи (озвучивания контента страницы).
• Поддерживается совместимость с актуальной версией WordPress.
• Пользователи могут менять размер шрифта, межстрочный интервал и межбуквенное расстояние.
• На выбор доступны несколько стандартных комбинаций цветовых схем – 5 вариантов.
• Можно отключать и включать отображение картинок, переключать их в черно-белый (монохромный) вариант.
• В настройках есть возможность полного отключения встраиваемых элементов – онлайн-карт, видео и пр.
• Готовые виджеты и шорткоды для встраивания в записи (для использования в конструкторе страниц).
• С помощью плагина можно задать показ или скрытие отдельного контента в версии для слабовидящих.

• Верхний порог увеличения шрифта никак не ограничен, поэтому в определённый момент вёрстка может «съезжать» (появляется боковая прокрутка, так как содержимое перестаёт помещаться в блоках).
• В настройках плагина показывается активная ссылка на сайт плагина (отключить её нельзя, только удалить на уровне кода).
• Плагин работает только на русском и на английском языках (не подходит для сайтов с глобальным охватом).
• В наборе шрифтов всего два варианта: один с засечками, один без засечек.
• У Web Speech API есть лимиты – не более 32 тыс. символов. При озвучивании могут встречаться определённые проблемы.
• Нет возможностей навигации с клавиатуры и некоторых других опций (для когнитивной инвалидности, расстановки акцентов на содержании и т.п.).

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

2. Плагин WordPress Accessibility Helper (WAH)

Один из самых популярных плагинов в свой категории (более 20 тыс. активных установок), имеет платную и бесплатную версию, может похвастаться качественной технической поддержкой и огромным количеством тонких настроек. Платные подписки отличаются только количеством доменов, на которых разрешается работа скрипта.

Плагин WAH умеет выстраивать структуру документа и при необходимости расставлять дополнительные акценты в версии сайта для слабовидящих. WAH может интегрироваться с WPML и Polylang (плагины для обеспечения мультиязычности), централизованно управлять описаниями изображений, отключать анимации, активировать режим «с выключенным светом», менять стиль панели управления для пользователей и т.п.

• Большой выбор шрифтов, тонкие настройки положения панели и её внешнего вида (тёмная тема, загрузка своих иконок, несколько вариантов оформления, выбор места вывода на экране и т.п.).
• Инструменты для навигации по сайту с клавиатуры.
• Возможность отключения панели на мобильных устройствах.
• Инверсия цветов для большего контраста и сепия (обесцвечивание картинок). Кастомные настройки цветовых схем контрастности.
• Возможность отключения анимаций и выбранных CSS-стилей.
• Готовые виджеты и всплывающие окна. В PRO-редакции можно настроить внешний вид панели на основе специальных блоков (как в конструкторе). Шорткоды.
• Плагин умеет сохранять свои настройки в cookies, чтобы при повторном посещении пользователи не возвращались к ним (время жизни этих настроек можно определить вручную).
• Инструменты для переопределения разметки текста, специальная панель для ввода описаний к медиафайлам.

• Модуль озвучивания текста есть только в Pro-редакции.
• Вообще, максимальный набор настроек, в том числе доступ к интерфейсу панели на нескольких языках, есть только при переходе на платную подписку.
• Цены на Pro-редакцию не самые доступные.
• У плагина есть ряд требований к разметке макета страниц, без которых он работать не будет.
• В полной версии панели настроек слишком много, неопытный пользователь может просто растеряться. Поэтому нужно потратить много времени для доведения её до ума.
• В бесплатной версии присутствует неотключаемый копирайт (активная ссылка).

Базовая версия плагина распространяется бесплатно. Pro-версия предполагает покупку лицензий (это отдельный плагин со своими настройками):

• 1 домен – 199 $/год.
• 2 домена – 392 $/год.
• 5 доменов – 959 $/год.
• 10 доменов – 1819 $/год.

3. Модуль «МИБОК: Версия для слабовидящих»

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

Модуль имеет готовые расширения для наиболее популярных в России CMS-систем:1С-Битрикс (тут есть Lite- и максимальная версия), WordPress (распространяется полностью бесплатно) и Joomla (тоже бесплатный плагин). Сертификат соответствия ГОСТ Р 52872-2019 предоставляется только для полного модуля к 1С-Битрикс.

• Специально для WordPress плагин распространяется полностью бесплатно и с открытым исходным кодом.
• В настройках есть набор готовых цветовых схем и шрифтов.
• Панель управления максимально простая и понятная. Есть кнопка быстрого перехода к содержимому (минуя меню и другие элементы).
• В расширенных настройках можно задать кернинг и интервалы.
• Графику на сайте можно выключить или обесцветить (плюс, есть отдельная кнопка для блокировки flash-роликов и контента).
• Классический текст можно переключить на шрифт Брайля (специально для компьютерных дисплеев для незрячих).
• Готовый виджет для установки кнопки включения + набор стильных кнопок для встраивания в сайт.
• Плагин совместим с разметкой интернет-магазинов на WooCommerce (касается страниц товаров и каталогов/категорий).

• Настройки практически отсутствуют. Плагин предоставляется в формате «как есть». Никакой техподдержки для WordPress.
• Нет условий для отображения отдельных блоков для слабовидящих (шорткодов), нет ничего для определения разметки и т.п.
• В расширении для WP полностью отсутствует синтез речи и озвучивание настроек.
• Так как плагин не представлен в официальном каталоге WordPress, его придётся скачивать с официального сайта разработчика и устанавливать вручную.
• Решение давно не обновлялось (могут быть проблемы с PHP 8, на котором работает актуальная версия WP).

Версия для WordPress и для Joomla распространяется абсолютно бесплатно. Лицензия для 1С-Битрикс – от 4900 до 15900 руб.

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

uCoz – это российская облачная платформа, предоставляющая услуги создания и хостинга сайтов на собственной CMS-системе. Это SaaS-конструктор, лучший в нише универсальных – наш подробный обзор Юкоза. Подходит для быстрого запуска блогов, форумов, досок объявлений, сайтов игровых сообществ, интернет-магазинов и других многостраничных проектов, включая сайты школ, детских садов и других госучреждений.

После обновления в 2016 году платформа uCoz добавила функционал скрипта с версией для слабовидящих к набору базовых возможностей. Ничего отдельно покупать и устанавливать теперь не нужно.

Стандартный алгоритм настройки версии для слабовидящих на uCoz-сайтах будет выглядеть следующим образом:

• В общих настройках сайта активируйте галочку «Версия сайта для слабовидящих» («Настройки» –> «Общие…» –> найти соответствующий пункт ближе к концу списка).
• При необходимости настроить параметры отображения панели (включение при загрузке, закрепление сверху, возможность управления показом изображений и фоном), а также кнопки (цвет и положение).
• Готово.

Если вам нужен доступ к синтезу речи (к озвучиванию текста на странице) и другие расширенные настройки, такие как интервалы между символами, кастомные наборы цветовых палитр, обесцвечивание изображений и т.п., то нужно будет приобрести Pro-версию скрипта (стоимость – $7). Обратите внимание, одна только покупка вам не поможет. Pro-версию нужно будет установить на сайт, иначе она не заработает.

Как выглядит ручная установка скрипта в uCoz:

1. Отключаете системную (бесплатную) версию скрипта, если она была включена ранее.
2. Скачиваете архив с купленным скриптом и распаковываете на ПК.
3. Загружаете файлы скрипта на сервер uCoz (в папку assets).
4. Добавляете код кнопки и вызов скрипта на страницы сайта (это можно сделать с помощью быстрой замены участков шаблонов или с помощью прямого редактирования HTML-кода).
5. Проверяете работу модуля.

На всякий случай подробная инструкция прилагается в архиве со скриптом.

К слову, скрипт универсальный и может быть установлен на любой сайт, не только в системе uCoz.

Если вы боитесь что-то испортить при добавлении модуля на свой сайт, то вместе с покупкой можно заказать установку руками опытных специалистов (+11$ единоразово).

Демонстрационную версию этого скрипта в про-редакции можно посмотреть на специальной странице – здесь.

Универсальное решение для любого сайта/движка

Предположим, что у вас нестандартный движок (CMS-система) или вообще простой HTML-сайт без функционала CMS. Это не проблема. Вы сможете сделать версию для слабовидящих вручную, с помощью типовых скриптов.

Рассмотрим процесс на примере наиболее распространённого и доступного решения – BVI, тот скрипт, что лежит в основе плагина Button visually impaired для WordPress, упомянутого выше. Вот демоверсия того, что вы можете получить на выходе.

Как добавить этот скрипт к любому сайту:

1. Скачиваете последнюю актуальную версию скрипта BVI с GitHub.
2. Распаковываете полученный архив на ПК.
3. Находите каталог dist и копируете файлы из него себе на сервер (тут содержатся таблицы стилей, JS-скрипты и иконки для панели слабовидящих). При желании можно скопировать только минифицированные версии JS и CSS, они содержат в названии текст «.min.». Проверьте, чтобы каталог с иконками был в каталоге рядом с CSS-таблицей «../img/». Если иконки были размещены в другой папке, исправьте пути обращения к ним в CSS-файле скрипта.
4. Подключите файл стилей внутри тега , желательно перед другими аналогичными ссылками на CSS-таблицы в вашем макете. Пример:

У скрипта есть ряд дополнительных возможностей. Например, с помощью указания специальных классов в HTML-тегах можно принудительно включить или выключить их отображение, исключить применение стилей (тех, что применяются при включении версии для слабовидящих), определить текст, который будет озвучиваться модулем при синтезе речи и пр. Примеры того, как можно организовать разметку:

Тут размещается текст для синтеза речи, система работает на базе Web Speech API, то есть синтезируется браузером
 
Этот блок не будет менять свой внешний вид при включении версии для слабовидящих
 
Этот блок будет обязательно показан при включении версии для слабовидящих, но в обычной версии сайта будет скрыт
 
Этот блок будет скрыт при включении версии для слабовидящих, но показан в обычной версии
 

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

Итоги

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

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

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

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

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