ВЕРСИЯ WORD PRESS САИТА ДЛЯ СЛАБОВИДЯЩИХ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

Совет Безопасности РФ http://www.scrf.gov.ru/
Верховный Суд РФ http://www.supcourt.ru/
Совет Федерации http://www.council.gov.ru/
Росстандарт http://www.gost.ru/

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

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

Что это за плагин?

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

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

Панель управления

Совсем недавно из новостей я узнал, что более 15% мужского населения дальтоники от рождения. Совсем не мало. Отсюда простой вывод, что для своего блога мне не хочется терять эту аудиторию и при выборе плагина wordpress для слабовидящих, я учту этот момент.

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

Button visually impaired – кнопка для слабовидящих

Первым и наверное, самым удачным, на мой взгляд – плагин Button visually impaired (кнопка для слабовидящих). Полностью бесплатен и на русском языке.

После установки в меню появится пункт BVI.

Установил, включил и добавил виджет. В результате появится кнопка с названием «версия для слабовидящих».

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

Шаг № 2 – Включаем виджет и переходим в меню под названием Accessibility Statement

На этом этапе главное правильно заполнить поле с адресом сайта, все остальное не важно. Именно адрес является главным параметром для настройки виджета.

Шаг № 3

Возвращаемся назад в меню Your Widget и кликаем на кнопку Sign In.

На основании этих данных на сайте разработчика создается личный кабинет откуда и происходят все настройки.

Шаг № 4

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

Шаг № 5

После настройки копируем полученный код и вставляем в тему оформления wordpress.

Сразу опишу плюсы данного плагина:

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

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

Основной функционал – это изменение текста, фона, контраста и подчеркивание ссылок.

Пункт меню settings – настройки включения и отключения различных опций, а так же на какой срок настройки панели инструментов будут запоминаться (от 12 часов, до 1 месяца).

Пункт меню toolbar – настройка заголовков меню виджета. Здесь все поля можно заполнить своими названиями. Кроме того, есть возможность подставить 3 ссылки на страницу с картой сайта, страницу отзывов и справки. Эти страницы могут быть созданы на вашем сайте.

Пункт меню customize – настройка иконки (3 варианта), позиция кнопки (слева, справа), размер иконки для декстопной версии и для мобильной. Можно настроить фон иконки и контур при наведении.

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

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

Простой как три копейки плагин. После установки необходимо только добавить виджет в нужную позицию блога. Основными настройками являются изменение размеров тегов HTML/CSS. В основном это текстовые теги (параграфы, списки и таблицы).

Размеры текста можно устанавливать на свое усмотрение.

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

Цифры в процентах можно заменить на текст: smail, medium, large, x-large, xx-large. Соответственно и виджет будет выглядеть по другому.

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

Озвучка текста для слабовидящих – ResponsiveVoice

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

В бесплатном варианте доступны всего три параметра:

Чтобы прослушать текст, необходимо его выделить курсором.

После установки появится еще один пункт меню responsivevoice и страница с полем для ввода API.

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

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

Этот плагин так же имеет минимум настроек и опций. В основном это минимальный набор:

После установки нужно только включить все параметры. Никаких виджетов и шорткодов, все устанавливается по умолчанию.

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

Плагин wordpress для слабовидящих – заключение

Как я уже говорил, из всех рассмотренных бесплатных плагинов, на мой взгляд, Button visually impaired – оптимальное решение. Но не стоит и недооценивать свою аудиторию. Возможно, что все “плюшки” с изображениями и фонами совсем не то, что нужно, а вот с озвучкой текста (ResponsiveVoice), как раз оно.

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

На этом пока все!

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

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

Кнопка для слабовидящих на сайте должна быть у всех организация подпадающих под Федеральный закон «О социальной защите инвалидов в Российской Федерации». Чтобы не получать уведомления или предписания судебных органов, необходимо позаботиться о создании версии сайта для слабовидящих.

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

Способов решения этой задачи не мало и в этом посте речь пойдет о самом быстром, простом и условно-бесплатном.

Основными требованиями к версиям сайтов для слабовидящих являются

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

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

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

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

Стоит услуга всего 350 рублей в год, устанавливается за минуту. Предусмотрена бесплатная возможность использования услуг сервиса. Но об этом можно узнать на официальном сайте.

Этапы внедрения кнопки для слабовидящих на сайт

Что касается самого процесса, то его можно было не описывать. Визуально все понятно без слов.

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

Кроме этого, стиль кнопки-ссылки можно менять и подгонять под нужные параметры вашего проекта.

Конечно, внедрение кода в разные версии сайтов выглядит не однообразно, но на сайте FineVision предусмотрена обратная связь, если редактирование кода вызывает трудности.

На всякий случай я записал видео о добавлении кнопки для слабовидящих на сайт, для владельцев сайтов созданных на и Для остальных движков все идентично.

Устанавливаем и активируем, появится новый раздел в панели под названием bvi v1.0.8 (версия может отличаться). Заходим и видим не большой список настроек.

Внизу нажимаем Сохранить или сбросить.

Плагин настроили под свой вкус, теперь надо его вставить в необходимое место. Можно использовать два метода это:

С помощью шорткода

Плагин имеет единственный шорткод, который можно вставить в WordPress, например в статью или виджет. Давайте выведем его в сайдбаре.

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

Нажимаем на нее, и видим как сверху появилось меню для настройки.

Виджет от плагина

Чтобы вывести на экран, воспользуемся стандартным виджетом WordPress, который создает плагин. Заходим в виджеты и находим раздел «Версия для слабовидящих» и перетаскиваем в ту область где необходимо вывести кнопку.

Переходим в любую статью и смотрим что получилось. Отлично, работает, можем переходить к следующему методу.

С помощью кода

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

Поэтому используем PHP код, который позволяет обработать и вывести действие shortcode на экран, вот так он выглядит.

Хочу вывести под заголовком статьи, придется покопаться в файлах темы и найти искомый документ. Универсальной инструкции не дам, потому что темы разные, обычно это single.php но в Twenty Sixteen представлен как content-single.php. Нашел место, вставляю код и сохраняю.

Переходим в любую запись и смотрим, появилась ли кнопка под заголовком.

Да отлично, плагин CMS WordPress для людей с ограниченным зрением работает. Что мне особенно понравилось:

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

Список дополнений для слабовидящих не ограничен только Button visually impaired, приведу остальные варианты:

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

ГОСТ и законодательство

Версия для слабовидящих должна отвечать ГОСТу, установленный законодательством. Чтобы почитать о требованиях перейдите . Особых требований нет, но первый вариант отвечает всем пунктам из документа.

На этом закончу, в статье мы разобрали супер плагин WordPress для создания версии сайта для слабовидящих, успехов!

Поддерживаемые браузеры

Button visually impaired поддерживает последние стабильные выпуски всех основных браузеров и платформ. Альтернативные браузеры, использующие последнюю версию WebKit.

Скрыть элемент

Класс .bvi-hide скрывает текст, когда пользователь включит версию вашего сайта для слабовидящих.

Показать элемент

Класс .bvi-no-styles, когда пользователь включит версию вашего сайта для слабовидящих, стили блока останутся без изменений.

Синтез речи

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

Поддерживаемые браузеры Web Speech API. Максимальная длина текста для воспроизведения является символа.

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

Настройки отображения виджета. Плагин позволяет отображать ссылку на версию для слабовидящих в виджете:

Добавляем виджет на боковую панель

В области виджетов можно отредактировать название блока. А так будет выглядеть панель:

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

И ещё. Если вам не достаточно плагинов, то вы также можете в поиск по плагинам вставить ключевое слово Accessibility (Доступность)- https://ru.wordpress.org/plugins/tags/accessibility/. И выбирайте из 453 модулей, что душа пожелает. Ориентируйтесь, конечно, когда обновлялся плагин:

Результаты поиска по плагинам

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

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

В заключение

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

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

Удачи и до новых встреч, друзья!