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(

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

Если вы используете Joomla - есть более простой способ  - читайте статью "Версия сайта для слабовидящих на Joomla!"

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