В этой инструкции мы рассмотрим, как установить на сайт версию для слабовидящих, работающую на основе плагина Button visually impaired.

Button visually impaired — это плагин, автоматически адаптирующий сайт под потребности людей с ограничениями по зрению. Он позволяет изменить цветовую гамму, размер шрифта, управлять изображениями и озвучкой текста. Это решение помогает сделать сайт доступным и удобным для всех пользователей.

Возможности версии для слабовидящих

• Изменение размера шрифта (до 200%).
• Настройка цветовой гаммы сайта.
• Выбор шрифта: с засечками или без.
• Управление изображениями (отображение в серых тонах, скрытие).
• Изменение межбуквенного интервала (кернинг).
• Изменение межстрочного интервала.
• Автоматическое добавление тега alt ко всем изображениям.
• Озвучка изменений с помощью синтезатора речи.
• Отключение встроенных элементов (видео, карты и др.).
• Воспроизведение текста с имитацией чтения "пальцем по строке".
• Поддержка браузеров: Chrome, Firefox, Safari, Internet Explorer (10, 11), Microsoft Edge, Opera.
• Адаптивный дизайн для мобильных устройств.
• Соответствие требованиям ГОСТ Р 52872-2012.

Как установить версию для слабовидящих

1. Скачайте архив со скриптом — по этой ссылке.
2. Распакуйте архив на своём компьютере.
3. Внутри архива вы найдёте папку assets с двумя вложенными папками: css и js.
4. Установите FTP-клиент FileZilla. Скачать можно с официального сайта: https://filezilla.ru/.
5. Настройте FTP-подключение к вашему сайту. Инструкцию можно прочитать здесь.
   Если вы ещё не установили FTP-пароль, перейдите по адресу http://ваш-сайт.ру/panel/?a=ftppass, задайте пароль и используйте его при подключении в FileZilla.
6. Когда подключение установлено и вы видите файловую структуру сайта, загрузите папку assets в корневой каталог сайта через FileZilla.

После успешной загрузки папки можно переходить к следующему этапу — установке кода скрипта.

Добавление кода версии для слабовидящих

Перейдите в Панель управления → Дизайн → Быстрая замена участков шаблонов:
http://ваш-сайт.ру/panel/?a=frep
Тип замены: многострочный.

Что заменить:

</body>

На что:

<script src="/assets/js/bvi.min.js"></script>
<script type="text/javascript">new isvek.Bvi();</script>
</body>

Нажмите кнопку «Произвести замену».

Следующая замена:

Что заменить:

</head>

На что:

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

Снова нажмите «Произвести замену».

Настройка озвучивания текста

Чтобы активировать озвучку, найдите в шаблоне Редактор страниц → Страницы сайта → Страницы код $CONTENT$ и замените его на:

<div class="bvi-speech">$CONTENT$</div>

Для модулей Новости, Блог, Каталоги (файлов, сайтов, статей, объявлений и игр) откройте шаблон Страница материала и комментариев, найдите $MESSAGE$ и замените на:

<div class="bvi-speech">$MESSAGE$</div>

Теперь синтезатор речи будет корректно воспроизводить текст на сайте.

Добавление кнопки для включения версии для слабовидящих

Завершающий этап — установка кнопки переключения версии сайта. Перейдите в первый или второй контейнер и добавьте новый блок. В поле Содержимое вставьте следующий код:

<div href="#" class="bvi-open bug" title="Версия сайта для слабовидящих">Версия сайта для слабовидящих</div>
<style>
.bug {
 text-align: center;
 background: #fff;
 color: #4b4b4b;
 border: 1px solid;
 font-size: 15pt;
 line-height: 30px;
 transition: all 0.2s cubic-bezier(0.42, 0, 1, 1) 0s;
 -webkit-transition: all 0.2s cubic-bezier(0.42, 0, 1, 1) 0s;
 -moz-transition: all 0.2s cubic-bezier(0.42, 0, 1, 1) 0s;
 -ms-transition: all 0.2s cubic-bezier(0.42, 0, 1, 1) 0s;
 -o-transition: all 0.2s cubic-bezier(0.42, 0, 1, 1) 0s;
 width: 100%;
 font-weight: 700;
 margin-top: 10px;
 margin-bottom: 5px;
 cursor: pointer;
}
.bug:hover {
 color: #fff;
 background: #488BFA;
}
</style>

Сохраните изменения и обновите страницу сайта — кнопка должна появиться и быть активной.

Демо-версия