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

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

Здравствуйте, дамы и господа! Как сделать сайт WordPress доступным для слабовидящих? Версия сайта для слабовидящих в WordPress делается с помощью специального плагина. Поскольку установка плагина осуществляется автоматически и не требует слишком трудоемких манипуляций пользователя с готовым скриптом. Их довольно много, есть из чего выбирать. Бесплатный плагин для слабовидящих WordPress который позволяет читателю изменить цветовую схему сайта, размеры шрифтов и другое.

Например, можно использовать плагин For the visually impaired, Button visually impaired, Мибок. Доступность контента на сайте WordPress станет проще!

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

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

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

Панель для слабовидящих это:

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

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

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

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

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

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

Плагин для слабовидящих For the visually impaired

Плагин For the visually impaired (Для слабовидящих):

Плагин для слабовидящих включает:

• Включение и отключения показа изображений(картинок), при отключении — показывается тайтл или алт изображения, режим «черно-белых» изображений;
• Выбирать шрифт (2 режима) (Arial, Times New Roman);
• Изменять размер шрифта (5 режимов) (14px, 16px, 18px, 22px, 26px);
• Изменить межстрочный интервал;
• Изменять интервал между символами;
• Изменять фона страницы (5 режимов) (Черным по белому, Белым по черному, Темно-синим по голубому, Коричневым по бежевому, Зеленым по темно-коричневому);
• Добавлять кнопку в виджетах;
• Добавить кнопку в меню;
• Добавлять шорт код [FTVI]
• Доступны языки: русский, англ.;

После установки и активации plagina нужно перейти к его настройкам:

После этого, добавьте кнопку в меню или например, установите виджет на боковую панель веб-сайта ВордПресс:

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

Button visually impaired

Кнопка для слабовидящих включает:

• Включение/Отключение изображений (оттенка серого);
• Включение/Отключение изображений (в место изображения появится alt надпись);
• Изменить размера шрифта (до 200%);
• Изменение фона страницы (черным по белому, белым по черному, темно-синим по голубому, коричневым по бежевому, зеленым по темно-коричневому);
• Изменение гарнитуры (без засечек, с засечками);
• Настроить интервал между буквами: (стандартный, средний, большой);
• Настройка интервала между строками: (одинарный, полуторный, двойной);
• Включить/Отключить фиксации панели в верхней части страницы;
• Включение/Отключение перезагрузки страницы (переход на обычную версию блога);
• Вкл./Откл. плавающего фрейма;
• Синтез речи панели;
• Поддержка браузеров (Chrome, Firefox, Safari, Internet Explorer(v: 11, 10, 9), Microsoft Edge, Opera и т.д.).

Установили из админки и активировали. Затем можно его включить и настроить:

И следующий шаг, это — добавить кнопку для слабовидящих в виджете или воспользуйтесь шорткодом [bvi text=»Версия для слабовидящих»] или [bvi]. Панель будет смотреться вот так при нажатой кнопке:

Если по каким то причинам вам не подходят данные plaginy воспользуйтесь спецмодулем.

Модуль Мибок: Версия для слабовидящих

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

Мибок: Решение позволяет генерировать версию сайта для слабовидящих на основе существующих шаблонов вашего сайта

Плагин подходит для использования: сайты государственных организаций,новостные ресурсы,информационные порталы, интернет-магазины, блоги. Модуль предоставляется для WordPress абсолютно бесплатно. Скачайте плагин с сайта — https://slabovid.ru/get/ .

Установка модуля «Мибок: Версия для слабовидящих» на сайт WP:

1. Перейдите на страницу «Плагины» → Добавить новый;
2. Нажмите на кнопку «Загрузить плагин»;
3. Выберете ранее загруженный zip-архив модуля;
4. Нажмите на кнопку «Установить»;
5. Нажмите на кнопку «Активировать плагин».

• Перейдите на страницу «Внешний вид» → «Виджеты»;
• Найдите в списке виджет «Мибок: Версия для слабовидящих» и выберите область, в которой должна отображаться ссылка.

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

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

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

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

В заключение

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

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

Плагин для слабовидящих WordPress

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

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

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

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

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

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

Ниже мы рассмотрим как в WordPress сделать версию для слабовидящих с помощью простого плагина.

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

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

Установите и активируйте данный плагин на своём сайте, чтобы воспользоваться им. После активации в консоли появляется новый раздел BVI. Все настройки находятся там. Перейдите в него, чтобы изучить их. Рассмотрим опции плагина:

• “Плагин активен” – включите эту опцию, чтобы плагин версии сайта для слабовидящих начал работать.
• “Цветовая гамма” – выберите цвет шрифта и фона в версии для слабовидящих. По умолчанию установлено белым по чёрному.
• Опции “Шрифт”, “Межбуквенный интервал” и “Межстрочный интервал” задают тип написания шрифта.
• “Адаптация изображений” позволяет отключить картинки либо сделать их в серой гамме.
• “Включить перезагрузку страницы” – если выбран вариант “Да”, то после включения версии для слабовидящих WordPress будет обновлять страницу, а если “Нет”, то версия включится без обновления. Лучше выбрать “Нет”, но если это не работает, то придётся выбрать “Да”.
• “Включить синтез речи” – удобная опция, которая помогает озвучивать текст голосом. Только качество произношения на русском языке пока не достаточно хорошее, но, всё же, годится к использованию.

• “Включить встроенные элементы” – если здесь выбрать “Да”, то элементы, которые добавляются с помощью встраивания кодов (видео, карты), будут отображаться в версии для слабовидящих, если “Нет” – то не будут.
• “Скрыть панель настроек плагина” – если выбрано “Нет”, то в версии для слабовидящих сверху будет панель, в которой каждый сможет под себя настроить вид текста, голосового помощника и другие элементы внешнего вида страницы.
• “Зафиксировать панель настроек” – если отключить эту опцию, то панель можно будет двигать по странице с помощью мышки.
• “Язык” – здесь нужно выбрать язык панели и озвучивания текста.
• В блоке опций “Настройки виджета шорткода” есть три настройки, которые позволяют настроить то, как будет выглядеть кнопка для переключения к версии для слабовидящих. Чтобы посетитель сайта смог увидеть её и сразу обратил внимание, то её надо сделать яркой и заметной. По умолчанию она красного цвета с иконкой в виде глаза.

Плагин для слабовидящих WordPress позволяет вывести кнопку для переключения версии почти в любое место сайта. Для этого нужно использовать шорткод [bvi text=”Версия для слабовидящих”]. Значение параметра text можно изменять на своё усмотрение. Также можно использовать шорткод [bvi], тогда будет видна только иконка без текста. Шорткод можно добавить в блок “Шорткод” в редактор записи / страниц, либо в область виджетов, например, в сайдбар.

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

Плагин wordpress для слабовидящих людей – какой выбрать

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

Всех приветствую на своем блоге!

На сегодня я подготовил серию видео обзоров, или уроков, кому как нравится, по теме «плагин wordpress для слабовидящих».

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

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

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

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

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

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

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

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

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

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

Accessibilityby UserWay – пошаговая настройка

Следующий плагин – это Accessibility by UserWay.

Плюсы:

• Гибкие настройки функционала и внешнего вида;
• Возможность настройки для компьютера и телефона;
• Удобная смена положения кнопки;
• Есть русский язык.

Минусы:

1. Требуется регистрация и адрес проекта, на котором будет установлен код;
2. В бесплатной версии обратная ссылка на сайт разработчика;
3. Настройка не из админ-панели блога, а на стороннем ресурсе.

Установить можно из репозитария wordpress, либо скачать с официального сайта.

После установки в меню появится пункт UserWay (Настройки/userway).

Шаг №1 – Заполняем данные (придумываем логин и пароль).

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

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

Шаг № 3

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

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

Шаг № 4

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

Шаг № 5

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

WP Accessibility Helper

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

1. Установка простая и не требует дополнительных виджетов и кодов внедрения. Установил и сразу можно смотреть в действии;
2. Удобные настройки с добавлением нужного описания полей;
3. DOM Scanner – возможность просканировать все записи и страницы, выявить неполадки, использование вспомогательных тэгов, таких как ‘aria-label’ и многое другое;
4. Attachments Control – практически тоже самое, только сканирование всех картинок, на предмет отсутствия тега alt, с возможностью их редактирования сразу из панели плагина.

Минусы:

• Скудный функционал (бесплатный вариант)
• Обратная ссылка в виджете на сайт разработчика
• Платная версия стоит дорого.

One Click Accessibility – доступность в один клик

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

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

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

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

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

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

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

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

Виджет доступности для слабовидящих – Accessibility Widget

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

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

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

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

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

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

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

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

1. Прослушка текста;
2. Прослушка ссылок;
3. Настройка фразы при открытии страницы сайта.

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

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

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

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

Можно использовать различные варианты шорткодов для вставки в текст кнопки Play, или озвучивать любой фрагмент текста. Для этого его нужно обернуть в теги ([responsivevoice] [/responsivevoice]).

Плагин wordpress для слабовидящих – Accessibility Spring

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

• Размер текста;
• Фоновые контрасты и оттенки;
• Контраст курсора;
• Выделение ссылок;

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

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

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

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

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

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

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

Плагин Button visually impaired

Искал Button visually impaired минут десять, хотелось дать лучшее решение.

Установка и настройка

Устанавливается стандартно, можно с помощью поиска по плагинам в админке WordPress.

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

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

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

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

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

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

• Переходим Внешний вид > Виджеты
• Перетаскиваем элемент Текст в активную зону боковой колонки
• Вставляем шорт код и сохраняем

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

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

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

1. Увеличение шрифтов
2. Изменить цвет фона текста
3. Управление контрастом изображений
4. Голосовой помощник

Для лучшего пониманию материала приложу видео.

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

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

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

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

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

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

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

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

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

• Полностью на русском языке
• Голосовой помощник так же разговаривает по–русски
• Не плохой дизайн
• Быстро загружается
• Не делает перезагрузку страницы

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

Остальные бесплатные плагины для слабовидящих под WordPress

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

1. For the visually impaired , достойный бесплатный вариант, но более сложен в настройке. Зато имеет функцию, чтобы вставить ссылку в меню
2. Responsivevoice text to speech , удобное решения для совсем слепых людей, текст автоматически преобразуется в звук
3. Accessibility spring , не поддерживает русский язык, и не обновлялся целый год, но имеет право на существование. Понравился минимальный набор функций

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

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

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

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