портал технической поддержки

#ОБРАЗОВАНИЕ22

Хостинг сайтов

в домене edu22.info

"Версия сайта для слабовидящих": бесплатные плагины, компоненты и скрипты.
Пример установки версии для слабовидящих на сайт.

инструкция для пользователей

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

Существует два способа добавления данной версии на Ваш сайт:

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

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


Список бесплатных скриптов / плагинов / компонентов

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


Если вам не достаточно перечисленных источников, то вы также можете найти множество вариантов в сети Интернет.
Так например для CMS WordPress в поиск по плагинам вставить ключевое слово Accessibility(Доступность) - https://ru.wordpress.org/plugins/tags/accessibility/. Ориентируйтесь, конечно, когда обновлялся плагин. Использование старого плагина, обновление которого производилось разработчиком очень давно, могут подвергнуть Ваш сайт опасности.


Мы же далее рассмотрим бесплатный плагин Button visually impaired версии для слабовидящих на любую CMS (WordPress, Joomla, 1С-Битрикс, MODx, Drupal, OpenCart, DataLife Engine, Wix, Прочие) подробнее. Именно этот плагин используется в большинстве стартовых пакетов для быстрого запуска сайта.

Бесплатный плагин Button visually impaired версии для слабовидящих на любую CMS


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

Панель управления Button visually impaired


С учётом его универсальности и практически полного раскрытия требований ГОСТа, а так же бесплатным распространением, плагин объявлен специалистами АКИАЦ как самым лучшим решением для "версии для слабовидящих" на сайтах.

Описание плагина, ссылки для скачивания и инструкции по установке и настройке имеются на сайте разработчика - http://bvi.isvek.ru/ . Рассмотрим как производится установка в CMS WordPress и Joomla.


BVI для CMS Wordpress

На сайте http://bvi.isvek.ru/ перейдите в раздел "Установка плагина" на "WordPress". Здесь имеется инструкция по установке и активации плагина, а так же - по использованию шорткода для вставки на сайт в произвольное место.


Если по какой-либо причине в меню плагинов консоли администратора сайта плагин Button visually impaired (BVI) не находится, то скачайте данный плагин с официального сайта WordPress.org - https://ru.wordpress.org/plugins/button-visually-impaired/ (кнопка для перехода так же имеется на странице разработчика, указанной выше)


Далее в консоли администратора сайта произведите установку плагина путём загрузки zip-архива.

После установки и активации плагина, в консоли администратора появится соответствующий раздел BVI v2.0, где предоставляется возможность произвести настройки внешнего вида версии сайта для слабовидящих, а в "Внешний вид" -> "Виджеты" отдельный виджет Button visually impaired, который можно установить в подходящую облать для виджетов.


BVI для CMS Joomla, MODx, Drupal и другие

На сайте http://bvi.isvek.ru/ перейдите в раздел "Установка плагина" на "JavaScript". Здесь имеется информация о настройке скрипта: классы и опции, и о инициализации плагина. А так же кнопка скачивания файлов скрипта для дальнейшей установки.


После скачивания архива плагина мы получаем .js- и .css-файлы, которые нам и нужно установить на наш сайт (набор файлом скрипта может отличаться в зависимости от степени обновления скрипта разработчиком после публикации данной инструкции).


Для удобства папки js и css с соответствующими файлами разместим в папку с названием "bvi", которую мы так и загрузим на хостинг.
Теперь папку bvi можно загрузить на хостинг с помощью ftp-клиента (например: FileZilla). Но так как хостинг edu22.info позволяет загружать файлы напрямую через файловый менеджер панели клиента , то нашу папку bvi дополнительно архивируем для удобной загрузки.
В таком случае получаем подготовленный архив bvi.zip .

Рассмотрим установку JavaScript-плагина на примере CMS Joomla

Устанавливать скрипт будем непосредственно в шаблон, путь к нему в CMS Joomla на хостинге edu22.info (на другом хостинге он может отличается) -  ../httpdocs/templates/"имя-шаблона" (в нашем случае "имя-шаблона"=schooltools_blue). Для этого переходим в папку "имя-шаблона" по указанному пути в файловом менеджере панели хостинга и производим загрузку архива плагина. Затем извлекаем папку bvi из архива. Сам архив теперь можно удалить с хостинга, он нам больше не нужен. На хостинге должна остаться папка bvi со вложенными в неё папками css и js, именно к файлам этих папок нужно прописать путь в инициализации скрипта.


Открываем для редактирования главный функциональный файл шаблона index.php (в нашем случае  - test.edu22.info/httpdocs/templates /schooltools_blue/index.php) . Это можно сделать как в файловом менеджере панели хостинга, так и через менеджер шаблонов административной панели сайта.
Далее, по инструкции автора плагина, прописываем часть кода <link> в свой <head> перед всеми другими таблицами стилей, а так же кусок кода <script> в конце страницы, прямо перед закрывающим </body>. При этом путь к файлам меняем на свой. И не забываем сохранить изменения в файле.
<!-- Button visually impaired CSS -->
<link rel="stylesheet" href="http://test.edu22.info/templates/schooltools_blue/bvi/css/bvi.min.css" type="text/css">
<!-- Button visually impaired JS -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://test.edu22.info/templates/schooltools_blue/bvi/js/js.cookie.js"></script>
<script src="http://test.edu22.info/templates/schooltools_blue/bvi/js/bvi-init.js"></script>
<script src="http://test.edu22.info/templates/schooltools_blue/bvi/js/bvi.min.js"></script>


Осталось прописать код ссылки-кнопки для запуска скрипта в желаемом месте на сайте. Сделать это можно как в отдельном модуле на сайте, прописав код как html. Либо напрямую в шаблон, что мы и сделаем.
Ссылка запуска скрипта будет у нас в верхней части страницы, поэтому вставляем код после тега <body>. Сам код мы построили из элементов имеющихся в инструкции разработчика:
<!-- Button visually impaired LINK -->
<div class="bvi-hide">
         <a href="#" class="bvi-open"><i class="fa fa-low-vision" aria-hidden="true"></i>
         <b> Версия сайта для слабовидящих</b></a>

</div>


Где:
<div class="bvi-hide">...</div> - скрывает текст, когда пользователь включит версию вашего сайта для слабовидящих;
<a href="#" class="bvi-open">...</a>  - ссылка, запускающая скрипт при нажатии;
<i class="fa fa-low-vision" aria-hidden="true"></i> - иконка с ресурса иконок fontawesome.ru (чтобы его подключить, нужно в <head> вписать следующий код - <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">);
<b> Версия сайта для слабовидящих</b> - текст ссылки-кнопки.


Для улучшения отображения ссылки-кнопки добавим css-стили в файл шаблона (в нашем случае /schooltools_blue/css/template.css):
.bvi-hide {
   text-align: center;
   border-bottom: 1px solid #b9b9b9;
   padding: 5px 0;
}
.bvi-open{
   font-size: 16px;
   color: #3a3a3a;
}


Проверяем как отображается кнопка включения и работает ли сам скрипт на внешней части сайта.


Для более продвинутых пользователь на сайте bvi.isvek.ru/ustanovka-plagina/javascript/ имеется описание опций по индивидуальной настройке плагина.