портал технической поддержки
#ОБРАЗОВАНИЕ22
Хостинг сайтов
в домене edu22.info
"Версия сайта для слабовидящих": бесплатные плагины, компоненты и скрипты.
Пример установки версии для слабовидящих на сайт.
инструкция для пользователей
В соответствии с ГОСТом Р 52872-2019 (пришедший на замену ГОСТу Р 52872-2012) все государственные органы, медицинские и учебные учреждения обязаны иметь версию сайта для слабовидящих, чтобы не допустить дискриминации людей страдающих проблемами со зрением. Так же предусмотрена административная и уголовная ответственность за дискриминацию.
Существует два способа добавления данной версии на Ваш сайт:
1. Создание отдельного сайта с оформлением, отвечающим требованиям ГОСТ.
Минусом данного варианта является то, что необходимо разработать второй сайт и соответственно поддерживать две версии сайта, в некоторых случаях - техническая сложность реализации данной версии сайта.
2. Вариант, который мы Вам рекомендуем - использование специальных скриптов для смены стиля отображения сайта.
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.
Описание плагина, ссылки для скачивания и инструкции по установке и настройке имеются на сайте разработчика - 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". Здесь имеется информация о настройке скрипта: классы и опции, и о инициализации плагина. А так же кнопка скачивания файлов скрипта для дальнейшей установки.
Скаченный архив плагина можно разархивировать на компьютер и переименовать папку на более короткое наименование, например называем "bvi". Теперь нужно загрузить скрипты на наш сайт (набор файлом скрипта может отличаться в зависимости от степени обновления скрипта разработчиком после публикации данной инструкции).
Папку bvi можно загрузить на хостинг с помощью ftp-клиента (например: FileZilla).
Так же, так как хостинг edu22.info позволяет загружать файлы напрямую через файловый менеджер панели клиента , то можно сразу загрузить скаченный архив в нужную директория, а затем распаковать средствами файлового менеджера здесь уже переименовать папку на всё то же наименование "bvi".
Рассмотрим установку JavaScript-плагина на примере CMS Joomla
Устанавливать скрипт будем непосредственно в шаблон, путь к нему в CMS Joomla на хостинге edu22.info (на другом хостинге он может отличается) - ../httpdocs/templates/"имя-шаблона" (в нашем случае "имя-шаблона"=tempStandart_J4). Для этого переходим в папку "имя-шаблона" по указанному пути в файловом менеджере панели хостинга и производим загрузку архива плагина. Затем извлекаем папку и переименовываем в bvi. Сам архив теперь можно удалить с хостинга, он нам больше не нужен. На хостинге должна остаться папка bvi со вложенными в неё папками и функциональными файлами, именно к файлам этих папок нужно прописать путь в инициализации скрипта.
Открываем для редактирования главный функциональный файл шаблона index.php (в нашем случае - test.edu22.info/httpdocs/templates/tempStandart_J4/index.php) . Это можно сделать как в файловом менеджере панели хостинга, так и через менеджер шаблонов административной панели сайта.
Далее, по инструкции автора плагина, прописываем часть кода <link> в свой <head> перед всеми другими таблицами стилей.
При этом путь к файлам меняем на свой. Команда <?php echo $templateUrl; ?> автоматически подставит путь до используемого шаблона.
И не забываем сохранить изменения в файле.
<!-- Button visually impaired CSS -->
<link rel="stylesheet" href="<?php echo $templateUrl; ?>/bvi/css/bvi.min.css" type="text/css">
<link rel="stylesheet" href="<?php echo $templateUrl; ?>/bvi/css/bvi.min.css" type="text/css">
Для активации плагина разместите следующий кусок кода <script> в конце страниц, прямо перед закрывающим </body>.
<!-- Button visually impaired JS -->
<script src="<?php echo $templateUrl; ?>/bvi/dist/js/bvi.min.js"></script>
<script>
<script src="<?php echo $templateUrl; ?>/bvi/dist/js/bvi.min.js"></script>
<script>
new isvek.Bvi();
</script>
Осталось прописать код ссылки-кнопки для запуска скрипта в желаемом месте на сайте. Сделать это можно как в отдельном модуле на сайте, прописав код как html, так и просто создав пункт меню, присвоив ему специальный класс "bvi-open".
Для создания кнопки с помощью модуля, необходимо построить код html-разметки, основываясь на инструкции разработчика:
<!-- Button visually impaired LINK -->
<div class="bvi-hide">
<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;
}
text-align: center;
border-bottom: 1px solid #b9b9b9;
padding: 5px 0;
}
.bvi-open{
font-size: 16px;
color: #3a3a3a;
}
Проверяем как отображается кнопка включения и работает ли сам скрипт на внешней части сайта.
Для более продвинутых пользователей на сайте плагина имеются описания опций по индивидуальной настройке плагина.
Наиболее значимой возможностью специальных настроек является возможность встраивания функции "синтез речи" (что соответствует требованиям ГОСТа 2019 года), реализуемая добавлением к абзацам текста класса "bvi-speech".... Подробнее на -> https://bvi.isvek.ru/ustanovka-plagina/javascript/ .