Skip to main content

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

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

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

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

Все это возможно благодаря бесплатному плагину Button visually impaired за что огромное спасибо разработчикам за такой классный плагин!

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

Этот вариант подойдёт для любого сайта. Идем на сайт Button visually impaired и скачиваем файлы плагина по прямой ссылке или из репозитория на GitHub.

Копируем содержимое папки dist к себе на сайт.

Подключаем файлы стилей плагина как обычно между тегами <head></head>

<link rel="stylesheet" href="/css/bvi.min.css" type="text/css">
<link rel="stylesheet" href="/css/bvi-font.min.css" type="text/css">

И файлы JS скриптов перед закрывающим тегом </body>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="/js/responsivevoice.min.js"></script>
<script src="/js/js.cookie.js"></script>
<script src="/js/bvi-init.js"></script>
<script src="/js/bvi.min.js"></script>

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

<a href="#" class="bvi-open" title="Версия сайта для слабовидящих"><i class="bvi-icon bvi-eye bvi-2x"></i> Версия сайта для слабовидящих</a>

При включении получаем следующий результат.

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

Тут ещё проще! Устанавливаем плагин.

И размещаем кнопку включения в любом месте сайта с помощью шорткода [bvi text="Версия для слабовидящих"] или [bvi]

Озвучивание текста

При включении плагина выбранные опции озвучиваются используя синтез речи. Но это ещё не все. Вы можете озвучить любой текст сайта с помощью голосового помощника. Для этого задайте у тега с текстом класс bvi-voice

<div class="bvi-voice">Текст который нужно озвучить</div>
Похожие записи
Сохранение данных в форме после обновления страницы

Часто ли у вас случалось такое, что при заполнении формы на сайте истекал срок действия... Читать далее

Кастомный виджет переводчик для сайта с флагами

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

AJAX в 1C-Битрикс

В компонентах Битрикс есть встроенный функционал для AJAX подгрузки. Его так же можно использовать, например... Читать далее

Отправка письма с вложениями на PHP и AJAX

Мы уже рассматривали, как сделать форму обратной связи на PHP и Ajax. Сегодня мы модернизируем... Читать далее

Простая пагинация на PHP и MySQL

Это руководство о том, как сделать простое разбиение на страницы, используя PHP и MySQL с... Читать далее

Всплывающее окно при закрытии страницы

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

Добавить комментарий

*

code