Версия сайта для слабовидящих на okis.ru

На базе okis.ru создано множество сайтов школ, детских садов и учреждений которым предписано в обязательном порядке иметь у себя на сайте версию для людей с ограниченными способностями. И сегодня мы постараемся решить этот вопрос неоднократно звучавший на форуме.

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

Итак, данный скрипт дает возможность изменять размер шрифта, отключать изображения, и менять фон сайта выбирая среди нескольких контрастных вариантов. Этих возможностей как правило достаточно для выполнения требований закона.

Смотреть ДЕМО версию

1. Перейдем от слов к делу, и начнем установку с подключения актуальной библиотеки jQuery. Для этого копируем следующий код и размещаем его в Настройки - SEO, поле для Мета тегов:

2. Следующими устанавливаем скрипты отвечающие за функционал версии. Копируем код и вставляем его туда же:

3. Копируем стили CSS и размещаем их в Редакторе CSS, который вы можете найти по пути Настройки - CSS:

#hpvgd,.h-mdiv,.h-mdiv2,.h-ldiv,.h-rdiv {background:#EAEAEA; color:#6D6D6D;}
#hpvgd {width:100%; z-index:100; width:100%; border-bottom:2px solid rgb(230,230,230);}
.h-mdiv {display:none; position:relative; margin:auto; text-align:center;}
.h-mdiv2 {display:none; position:fixed; margin:auto; text-align:center; width:400px; height:200px;}
.h-ldiv {float:left; padding:7px 10px 7px 0px;}
.h-rdiv {position:absolute; top:7px; right:0px; text-align:right;}
.h-ni {display:none !important;}
a.hcmaf {color:red; margin-left:5px; font-size:20px; font-weight:bold;}
a.h-anl {color:#2a72cc;}
a.h-al {color:#ED664B;}
.h-fi {font-weight:bold; border-radius:50%; padding:0px 8px; margin-right:5px; font-size:20px;}
.h-background-1 {color:#fff !important; background:#000 !important; border:none!important; outline:none!important;}
.h-background-2 {color:#000 !important; background:#fff !important; border:none!important; outline:none!important;}
.h-background-3 {color:#ff0 !important; background:#009 !important; border:none!important; outline:none!important;}
.h-background-1 .art-logo, .h-background-1 .art-vmenublockheader{padding-left: 10px!important;}
.h-background-2 .art-logo, .h-background-2 .art-vmenublockheader{padding-left: 10px!important;}
.h-background-3 .art-logo, .h-background-3 .art-vmenublockheader{padding-left: 10px!important;}
.h-background-1 h2,.h-background-2 h2,.h-background-3 h2 {font-size: 40px!important;}
.uhvb-img {margin: 10px auto;}
h1#name-text.art-logo-name a{font-size: 48px!important;}

4. Остается только разместить кнопку с помощью которой будет происходить переход на версию для слабовидящих, в удобном для вас месте. Для этого используйте окна для установки рекламы, Настройки - Реклама:

На этом установка скрипта окончена и остается проверить конечный результат. На этом закончим, если возникли вопросы вы можете задать из в комментариях к уроку.

Скачать скрипт с подробной документацией, заказать установку или просто поблагодарить автора вы можете по ссылке: Версия сайта для слабовидящих