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

Чтобы создать версию сайта для слабовидящих не обязательно привлекать дополнительные ресурсы, существует много подходов для решения данной задачи, наиболее простым из них является добавление на сайт JavaScript, который был разработан для uCoz, к стати скрипт позволит сделать версию сайта для слабовидящих на Joomla, WordPress или другой CMS. Официальная страничка скрипта здесь.

Давайте пошагово, с комментариями:

1. Качаем скрипт во вложении uGost11.js ниже или с офсайта.

2. Если на вашем сайте не используется JQuery, то ее необходимо скачать, загрузка JQuery на вашем сайте должна выполняться до загрузки и выполнения скрипта Ugost11.js. На своем сайте я использую font awesome, поэтому добавил и вторую строчку. Строки ниже пишутся между тегами <head>...</head>:

<script type="text/javascript" src="/js/jquery-1.12.3.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">

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

<div id="infobardm">
<div class="eye">
Размер шрифта: 
<a onclick="dmfunctsizeone();" class="dmchangea1">A</a>
<a onclick="dmfunctsizetwo();" class="dmchangea2">A</a>
<a onclick="dmfunctsizethree();" class="dmchangea3">A</a>
</div>
<div class="eye">
Изображения <a onclick="dmdisableimage();" class="dmdisableimage">Выключить</a>
<a onclick="dmenableimage();" class="dmenableimage">Включить</a>
</div>
<div class="eye">
Цвет сайта <a onclick="dmcolor1();" class="dmcolor1">Ц</a>
<a onclick="dmcolor2();" class="dmcolor2">Ц</a>
<a onclick="dmcolor3();" class="dmcolor3">Ц</a>
</div>
<a onclick="dmreset();" class="dmcolor4">
<i class="fa fa-eye-slash" aria-hidden="true"></i>
обычная версия сайта
</a>
</div>

Панель будет выглядеть примерно так:

панель для слабовидящих

 

4. В любое место сайта добавьте кнопку, которая будет видна пользователю, она же включает версию сайта для слабовидящих:

<div class="uk-panel">
<a href="/<?= $_SERVER['REQUEST_URI'] ?>" onclick="dmuGostSettings();" id="enableuGost">
<button class="sscf-popup">
<i class="fa fa-eye" aria-hidden="true"></i>
версия сайта для слабовидящих
</button>
</a>
</div>

Такая кнопка получилась у меня:

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

5. Я сделал в конце подгрузку самого скрипта (по рекомендациям Google) в конце страницы:

<script type="text/javascript" src="/js/uGost11.js"></script>

Оригинальный скрипт не работал, в консоли Chrome выдавалась ошибка в 33 строке $ is not a function. Почему она возникала мне не очень понятно..., но поборолся с ней при помощи текстового редактора в скрипте uGost11.js следующим образом:

найти $(

заменить на jQuery(

Если есть вопросы - пишите комментарии

Attachments:
Download this file (uGost11.js.zip)uGost11.js.zip[JavaScript версии сайта для слабовидящих]1 kB2016-05-24 21:04

Комментарии  

+1 # Валентин 05.07.2016 08:35
При подключении jqvery не правильно работает выплывающее меню. изменение z-index не помогает. Что именно в jqvery отвечает за эту панель.
Ответить | Ответить с цитатой | Цитировать
+3 # Ратмир 23.07.2016 10:52
Почему-то в том виде в которым есть тут я добавляю меню для слабовидящих оно разбивается на 3 строки и кодировка слетает. Мои страницы написаны на cp1251. И бэкграунд у див eye белый становится.
Ответить | Ответить с цитатой | Цитировать
+1 # Елена 05.09.2016 11:09
Здравствуйте. Я воспитатель детского сада, мне поручили сделать версию нашего сайта для слабовидящих. Пыталась делать, но ничего не получилось. Ест ли у вас возможность помочь мне. Спасибо!
Ответить | Ответить с цитатой | Цитировать
+1 # Михаил 12.09.2016 04:47
Здравствуйте! Панель почему то отображается не корректно, в чём причина?
Ответить | Ответить с цитатой | Цитировать
0 # dagxam 20.11.2016 00:41
Цитирую Елена:
Здравствуйте. Я воспитатель детского сада, мне поручили сделать версию нашего сайта для слабовидящих. Пыталась делать, но ничего не получилось. Ест ли у вас возможность помочь мне. Спасибо!



Елена если хотите помогу с версией для слабовидящих пишите на почту
Ответить | Ответить с цитатой | Цитировать
0 # Анастасия 31.05.2017 02:30
Здравствуйте.
Сделала всё как прописано и скрипт заработал так как нужно, но через некоторое время пропало оформление панели настройки версии для слабовидящих, она стала просто белой со сплошным текстом перечня функций. Элементы панели не получают стили из файла https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css
хотя подключение к этому файлу прописано правильно.
Подскажите почему сайт не может получить к данному файлу доступ? В чём может быть причина?
Спасибо.
Ответить | Ответить с цитатой | Цитировать
0 # Светлана 14.08.2017 06:26
при установки всех скриптов выходит:Страница не найдена

Мы не нашли эту страницу. Возможно, был неправильно набран ее адрес. Попробуйте поискать эту страницу на карте сайта. Вернуться на главную страницу
Ответить | Ответить с цитатой | Цитировать

Добавить комментарий


Защитный код
Обновить