Skip to content
03.06.2023
  • Технология
  • Новости
  • В мире

Технологии

Primary Menu
  • Технология
  • Новости
  • В мире
  • Home
  • 2020
  • Ноябрь
  • 24
  • Технология

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

admin 24.11.2020 1 min read

bvi-1-6410841

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

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

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

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

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

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

bvi-1024x350-4735646

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

bvi-2-9227000

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


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




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

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

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

bvi-3-1-1024x653-2430642

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

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

bvi-4-9586440

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

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

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

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

bvi1-3088214

Continue Reading

Next: Автоопределение города по IP на сайте

Related Stories

Захват изображения с камеры с помощью HTML5 mediacapture-2460556
1 min read
  • Технология

Захват изображения с камеры с помощью HTML5

29.04.2023
Освоение аналитики: получение максимальной отдачи от аналитических данных в GA4 analytics-intelligence-step-1-sign-in
1 min read
  • Технология

Освоение аналитики: получение максимальной отдачи от аналитических данных в GA4

26.04.2023
Что такое ошибка DNS_PROBE_FINISHED_NXDOMAIN? Полное руководство mastering-analytics-intelligence-in-ga4-hero-image-730x548-2691257
1 min read
  • Технология

Что такое ошибка DNS_PROBE_FINISHED_NXDOMAIN? Полное руководство

26.04.2023

You may have missed

Захват изображения с камеры с помощью HTML5 mediacapture-2460556
1 min read
  • Технология

Захват изображения с камеры с помощью HTML5

29.04.2023
Освоение аналитики: получение максимальной отдачи от аналитических данных в GA4 analytics-intelligence-step-1-sign-in
1 min read
  • Технология

Освоение аналитики: получение максимальной отдачи от аналитических данных в GA4

26.04.2023
Что такое ошибка DNS_PROBE_FINISHED_NXDOMAIN? Полное руководство mastering-analytics-intelligence-in-ga4-hero-image-730x548-2691257
1 min read
  • Технология

Что такое ошибка DNS_PROBE_FINISHED_NXDOMAIN? Полное руководство

26.04.2023
Как создавать отчеты по аналитике веб-сайта в Looker Studio (шаг за шагом) customize-the-report
1 min read
  • Технология

Как создавать отчеты по аналитике веб-сайта в Looker Studio (шаг за шагом)

26.04.2023
  • Технология
  • Новости
  • В мире
  • Технология
  • Новости
  • В мире
Copyright © All rights reserved. | MoreNews by AF themes.