Версия сайта для слабовидящих на jQuery и плагин WordPress
23 сентября 2019 JavaScript jQuery
Сегодня я расскажу как можно легко и совершенно бесплатно создать версию для слабовидящих практически для любого сайта. Это решение подойдет и для сайтов государственных организаций, так как полностью соответствует ГОСТ.
Наша версия сайта для слабовидящих будет с удобным меню и уметь изменять размер шрифта, межстрочный и межбуквенный интервалы, отключать изображения и делать их черно-белыми, изменять фон страницы и даже озвучивать текст с помощью синтеза речи.
Все это возможно благодаря бесплатному плагину Button visually impaired за что огромное спасибо разработчикам за такой классный плагин!
Как сделать версию для слабовидящих на сайте с помощью плагина jQuery
Этот вариант подойдёт для любого сайта. Идем на сайт и скачиваем файлы плагина по прямой ссылке или из репозитория на 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>
Необходимость определить город посетителя на сайте актуально для интернет-магазинов или сайтов работающих в разных регионах. Это даст возможность показывать разные контакты, и изменять текст на страницах в зависимости от текущего местоположения пользователя. Самый простой и эффективный способ - это определить Читать далее
jQuery - это быстрая, небольшая и многофункциональная библиотека JavaScript, включенная в один файл .js. На данный момент это самая популярная библиотека JavaScript. JQuery облегчает жизнь веб-разработчика. Библиотека предоставляет множество встроенных функций, с помощью которых вы можете легко и быстро выполнять Читать далее
Сегодня я расскажу об одном отличном jQuery плагине о котором вы могли не знать. С его помощью можно быстро сделать живой поиск на странице сайта с множеством элементов. Называется он HideSeek. Плагин очень прост в использовании, но в то же Читать далее
Часто ли у вас случалось такое, что при заполнении формы на сайте истекал срок действия сеанса или например зависал браузер, после чего приходилось заполнять форму заново?! HTML5 представил концепцию механизмов хранения заполняемых данных в браузере. В хранилище HTML5 есть возможность Читать далее
Сегодня мы кастомизируем стандартный виджет Google переводчика для сайта и сделаем его в виде меню с флагами. На данный момент сервис Google Translate Widget больше не поддерживается, но это никак не отразится на сайтах, которые были подключены ранее. Наш кастомный Читать далее
В компонентах Битрикс есть встроенный функционал для AJAX подгрузки. Его так же можно использовать, например для бесконечного скролла новостей. Но есть и более простой способ, с помощью которого можно загружать ответ любого компонента без перезагрузки страницы. Его мы и рассмотрим Читать далее
Мы уже рассматривали, как сделать форму обратной связи на PHP и Ajax. Сегодня мы модернизируем её и научим отправлять приложенные файлы. HTML-код формы Добавляем в форму ещё одно поле файл: <form id="feedback-form" action=""> <input type="text" name="name" required placeholder="Ваше имя"> <input Читать далее
Добавить комментарий