Без рубрики

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

0 0
Read Time:1 Minute, 13 Second

bvi-1-4274847

23 сентября 2019 JavaScript jQuery

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

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

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

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

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

bvi-1024x350-2089516

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

bvi-2-7344268

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


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




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

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

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

bvi-3-1-1024x653-3527262

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

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

bvi-4-8158387

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

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

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

Текст который нужно озвучить

bvi1-7391746

Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %

Похожие статьи

Проверьте также
Закрыть
Кнопка «Наверх»