Установка плагина

Установка плагина для слабовидящих

Есть два способа добавить версию сайта для слабовидящих: установить готовый плагин WordPress или подключить JS-библиотеку вручную (подойдёт для любой другой CMS или статического сайта).

Через плагин WordPress

Button visually impaired это обычный плагин WordPress с панелью настроек, блоками Gutenberg, шорткодом и виджетом. Ничего не нужно вручную вставлять в header.php/footer.php.

  1. Загрузите плагин в wp-content/plugins/ (или установите из каталога плагинов WordPress) и активируйте его: Плагины → Button visually impaired → Активировать.
  2. Откройте раздел BVI в консоли администратора и выберите «Плагин активен: Да».
  3. Добавьте кнопку одним из способов ниже: блок, шорткод, виджет или собственная кнопка.
  4. Откройте сайт и нажмите кнопку: появится панель версии для слабовидящих.

Способы добавить кнопку:

  • Блок Gutenberg «Кнопка для слабовидящих»: иконка, текст, цвета (в т. ч. при наведении, градиент), шрифт, отступы, границы, тень, размер.
  • Шорткод [bvi] с атрибутами text, icon, color и background, например [bvi text="Версия для слабовидящих" background="#1a237e" color="#ffffff"].
  • Виджет «Button visually impaired» (в блочных темах через блок «Устаревший виджет»).
  • Любой элемент с классом bvi-open.

Чтобы над блоком появились кнопки озвучки, используйте блок Gutenberg «Озвучиваемый текст» (bvi/speech): он оборачивает вложенные блоки классом bvi-speech. Подробная инструкция и FAQ находятся на странице «BVI → Инструкция» в консоли администратора.

Вручную, без плагина (любая CMS или статический сайт)

Панель работает на отдельной JS-библиотеке BVI, без зависимостей от jQuery. Скачайте библиотеку и разархивируйте папку dist (в ней bvi.min.css и bvi.min.js) на сервер.

Перед закрывающим тегом </head> подключите стили.

<link rel="stylesheet" href="/bvi/bvi.min.css">

Перед закрывающим тегом </body> подключите скрипт и запустите библиотеку. Параметры BviOptions необязательны, показаны значения по умолчанию.

<script src="/bvi/bvi.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    new isvek.Bvi({
      target: '.bvi-open',
      theme: 'white',
      fontFamily: 'arial',
      fontSize: 16,
      letterSpacing: 'normal',
      lineHeight: 'normal',
      images: 'grayscale',
      speech: true,
      panelFixed: true,
      panelHide: false,
      reload: false,
      lang: 'ru-RU',
      copyright: true
    });
  });
</script>

Добавьте кнопку включения: версию для слабовидящих запускает любой элемент с классом bvi-open (селектор задаётся опцией target).

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

Чтобы текст можно было прослушать, оберните его в блок с классом bvi-speech.

<div class="bvi-speech">
  <p>Этот текст можно прослушать.</p>
</div>