Версия сайта для слабовидящих - как сделать для DLE

Скрипты и советы | 3 декабря 2015 26 813

скрипты, бесплатно

Зачем нужна версия для слабовидящих?



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

Функционал обязателен для реализации на ресурсах всех государственных структур без исключения. К тому же он рекомендуется для коммерческих и общественных организаций. Версия сайта для людей с ограниченными возможностями по зрению привлечет неохваченную аудиторию.

Особенности:


  • бесплатен;
  • простота в установке;
  • несколько вариантов отображения;
  • несколько языковых версий (русский, английский, украинский);
  • возможность указать необходимый набор размеров шрифтов;
  • возможность включить/отключить управление отображения изображениями;
  • возможность включить/отключить управление фоном сайта;
  • возможность изменить внешний вид панели управления версией для слабовидящих;
  • скрипт соответствует требуемым нормам.

    DataLife Engine - версия для слабовидящих


    Если вам приходилось разрабатывать сайт для государственных учреждений РФ, то вы уже должны знать о требовании к специализированной версии сайта для слабовидящих. Скрипт "версии для слабовидящих" обычно продают в качестве дополнительной опции к популярным CMS. Для DataLife Engine подобного скрипта пока небыло. Мы предлагаем адаптацию версии сайта для слабовидящих от uCoz.

    Версия сайта для слабовидящих - как сделать для DLE


    Автор оригинальной версии для uCoz Рома Келлер aka Inquisitor добавил скрипт 18.10.2015.

    Нам потребуется скачать архив со старницы http://uscript.pro/shop/83/item/versija-dlja-slabovidjashhikh
    Копия архива с нашего сайта: Скачать файл: версия для uCoz.zip [1,11 Mb] (cкачиваний: 1697)

    Процедура подключения скрипта для DLE очень проста, и даже позволяет реализовать подключение как минимум двумя способами.


    Вариант 1 - самый простой



    1.1 В папку js вашего шаблона загружаем файл uhpv-full.min.js

    пример:
    для нашего шаблона bs3-tcse скрипт версии для слабовидящих будет находится по адресу:
    www.site.ru/templates/bs3-tcse/js/uhpv-full.min.js


    1.2 далее открываем файл главного шаблона main.tpl и сразу после тега
    <body>

    добавляем
    <!-- версия для слабовидящих -->
    <style>
    	 #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-alegn:center;}
    	 .h-mdiv2 {display:none; position:fixed; margin:auto; text-alegn: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:19px;}
    	 .h-background-1 {color:#fff !important; background:#000 !important;}
    	 .h-background-2 {color:#000 !important; background:#fff !important;}
    </style>
    <script src="{THEME}/js/uhpv-full.min.js"></script>
    <script>
    	var 	uhe 	= 2,
    		lng 	= 'ru',
    		has 	= 0,
    		imgs 	= 1,
    		bg 	= 1,
    		hwidth 	= 0,
    		bgs 	= ['1','2'],
    		fonts 	= ['19','21','23'];
    	$(document).ready(function(){uhpv(has)});
    </script>
    <!-- /версия для слабовидящих -->


    пример:
    для нашего шаблона bs3-tcse скрипт версии для слабовидящих будет находится по адресу:
    www.site.ru/templates/bs3-tcse/main.tpl

    Версия сайта для слабовидящих - как сделать для DLE


    1.3 Теперь необходимо добавить ссылку на включение "версии для слабовидящих" для этого в удобном для вас месте добавьте код

    <span id="uhvb" style="display:none;"><a href="javascript://" onclick="uvcl()"><b>Версия для слабовидящих</b></a></span>


    Установка завершена.


    Вариант 2 - продвинутый


    Если Вы используете html5 шаблон, то наверняка слышали о рекомендациях размещать java script в конце своей html страницы перед закрывающим тегом body. Такая запись позволяет ускорить загрузку страницы.


    2.1 В папку js вашего шаблона загружаем файл uhpv-full.min.js

    пример:
    для нашего шаблона bs3-tcse скрипт версии для слабовидящих будет находится по адресу:
    www.site.ru/templates/bs3-tcse/js/uhpv-full.min.js


    2.2 далее открываем файл главного шаблона main.tpl и если рекомендации по загрузке JS файлов для html5 у вас соблюдены, то в конце страницы перед тегом

    </body>


    находим строку

    <script src="{THEME}/js/libs.js"></script> 


    и перед ней добавляем

    <script src="{THEME}/js/uhpv-full.min.js"></script>


    пример:
    Версия сайта для слабовидящих - как сделать для DLE


    2.3 Открываем файл /js/libs.js и в него добавляем:

    // версия для слабовидящих
    var 	uhe 	= 2,
    lng 	= 'ru',
    has 	= 0,
    imgs 	= 1,
    bg 	= 1,
    hwidth 	= 0,
    bgs 	= ['1','2'],
    fonts 	= ['19','21','23'];
    $(document).ready(function(){uhpv(has)});


    2.4 Открываем файл /css/styles.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-alegn:center;}
    .h-mdiv2 {display:none; position:fixed; margin:auto; text-alegn: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:19px;}
    .h-background-1 {color:#fff !important; background:#000 !important;}
    .h-background-2 {color:#000 !important; background:#fff !important;}
    /* конец версия для слабовидящих


    2.5 Теперь необходимо добавить ссылку на включение "версии для слабовидящих" для этого в удобном для вас месте добавьте код

    <span id="uhvb" style="display:none;"><a href="javascript://" onclick="uvcl()"><b>Версия для слабовидящих</b></a></span>


    Установка завершена.


    Демо-версия шаблона для DLE с версией для слабовидящих


    смотреть демо
    Версия сайта для слабовидящих - как сделать для DLE Версия сайта для слабовидящих - как сделать для DLE


    Готовый шаблон для DataLife Engine с поддержкой версии для слабовидящих можно скачать из репозитория https://bitbucket.org/tcse/template_tbs3-tcse
  • Виталий Чуяков

    Виталий Чуяков

    Технологический прагматик

    Веб-разработчик с 20-летним стажем, основатель веб-студии TCSE. Специализация: DLE «под ключ», Webasyst, Parts-Soft.ru, технический аудит.

    🧠 20 лет 🚀 120+ проектов 📄 45+ статей
    Влияние SEO оптимизации на обеспечение доступности веб-контента для людей с ограниченными возможностями

    Аннотация В статье рассмотрено влияния обеспечения доступности веб-контента для людей с ограниченными возможностями на...

    Подробнее
    Описание движка TCSE

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

    Подробнее
    Как отключить рекламу в поисковой выдаче Яндекса и Google

    Всем привет! Меня зовут Андрей Симагин, я автор программы для технического аудита сайтов SiteAnalyzer, и сегодня мы...

    Подробнее
    [Перевод] Веб-альманах 2019: Доступность

    Доступность в вебе имеет важное значение для равноправного и справедливого общества. Чем больше наша социальная и...

    Подробнее
    [Перевод] Большой отчёт об изменениях в веб-доступности

    В 2020 году, как никогда раньше, стала очевидна необходимость сделать цифровое пространство инклюзивным и доступным для...

    Подробнее
    SiteAnalyzer 2.8 — Анализ доменов, управление файлами cookie, экспорт выбранных проектов в Excel

    В продолжении темы описания возможностей SiteAnalyzer (бесплатная программа для аудита сайтов - российский аналог...

    Подробнее

    💬 Комментарии

    В связи с новыми требованиями законодательства РФ (ФЗ-152, ФЗ «О рекламе») и ужесточением контроля со стороны РКН, мы отключили систему комментариев на сайте.

    🔒 Важно Теперь мы не собираем и не храним ваши персональные данные — даже если очень захотим.

    💡 Хотите обсудить материал?

    Присоединяйтесь к нашему Telegram-каналу:

    https://t.me/tcsecms

    Нажмите кнопку ниже — и вы сразу попадёте в чат с комментариями

    1. Прекрасно реализовано. А не подскажите как сделать, что панель изначально показывалась на сайте, а не по клику по надписи "Версия для слабовидящих"?
      1. для этого в настройках скрипта уже есть готовая опция:

        «has» - указывает на необходимость запускать версию для слабовидящих автоматически при входе на сайт
        0 - версия будет запускаться только если пользователь нажмёт на кнопку включения,
        1 - версия будет запускаться всегда, при входе на любую страницу сайта (кнопка "Выключить" будет отсутствовать)
        об этом написано в инструкции по установке модуля для uCoz
    2. День добрый! Подскажите, в чём может быть проблема?
      Кодировка сайта: windows-1251
      При установке скрипта всё работает.. Но на панели все надписи аброкадаброй...
      1. скорее всего вам необходимо пересохранить сам js файл скрипта в нужной кодировке.
        я о файле js/uhpv-full.min.js
        Так как текст на панели "версии для слабовидящих " имеет 3 языковые версии и все они указаны именно в этом файле.

        Выбрать этот файл и сохранить в кодировке Win utf8.
    3. Здравствуйте! Что мне делать, если в папке шаблона нет папки "js", версия DLE 9.0. Куда копировать скрипт?
      1. А кто Вам мешает создать такую папку?

        на самом деле это не обязательно. Но тогда вам надо исправить адрес
        подключаемой библиотеки
        <script src="{THEME}/js/uhpv-full.min.
        js"></script>


        на тот путь, куда именно вы положите файл.


        Но проще создать папку js для своего шаблона :)
    4. Все сделал, путь к скрипту прописал /rosinka91/js/uhpv-full.min.js ,скрипт туда загрузил,как написано, кнопка появилась , но при нажатии ничего не происходит http://www.rosinka-91.ru/, можете помочь, буду очень благодарен.
      1. инспектор кода выдает

        Failed to load resource: http://www.rosinka-91.ru/js/uhpv-full.m
        in.js the server responded with a status of 404 (Not Found)


        а ссылка должна быть

        /templates/rosinka91/js/uhpv-full.min.j
        s


        именно в этом проблема.

        в своем шаблоне вместо

        <script src="/js/uhpv-full.min.js">&
        amp; lt;/script>


        напишите так

        <script src="{THEME}/js/uhpv-full.min.
        js"></script>
        1. поменял, ничего не изменилось.
    5. Здравствуйте, подскажите, возможно ли как-нибудь реализовать изменение размера шрифта полозком от минимально возможно до максимально возможного. Очень нравится данный скрипт но прокуратура требует такую реализацию(
    6. Спасибо за скрипт все классно, но на самом большем шрифте слова не полностью видны. В чем может быть проблема? сайт http://shurawka.org
      1. Нет ничего странного.
        шаблон который вы используете на сайте имеет фиксированную ширину, и в боковой панели ширина элементов тоже задана фиксированная.
        Размер шрифтов просто не влезает в блоки. отсюда и косяки.

        Решение:
        использовать другой шаблон, без фиксированных размер, лучше всего на основе адаптивных фреймворков.
    7. Здравствуйте, я не сильный специалист, все методом тыка. Вы мне очень помогли, я воспользовалась Вашими рекомендациями. Но в письме Министерства образования предъявлены требования: надпись должна быть не меньше 24 кегля и контрастного цвета (черный на белом). Как можно это сделать?
      1. в файле JS
        js/uhpv-full.min.js
        указаны минимальный и максимальный размер шрифтов:
        fonts 	= ['19','21','23&
        #39;];

        вот в этом куске кода:

        
        // версия для слабовидящих
        var 	uhe 	= 2,
        lng 	= 'ru',
        has 	= 0,
        imgs 	= 1,
        bg 	= 1,
        hwidth 	= 0,
        bgs 	= ['1','2'],
        fonts 	= ['19','21','23&
        amp; #39;]; $(document).ready(function(){uhpv(
        has)});


        поменяйте значения на
        fonts 	= ['24','26','28&
        #39;];


        это будет означать минимальный размер шрифта 24, максимальный 26
        а что касается цвета подложки страницы:

        в том-же файле за это отвечает параметр:

        bg = 1,


        поменяйте цифру 1 на 2
    8. Здравствуйте, в 9.0 версии создал папку js в папке шаблона, залил туда ваш ява скрипт, в main тоже код вставил. но когда вставляю вашу ссылку. то она не показывается просто.
      1. о какой ссылке идет речь?
        1. Вот этот код который в одну строчку идет для слабовидящих вставляю в то место на странице где я хочу увидеть чтоб там была возможность переключить на версию для слабовидящих. но этот код не появляется на странице. нету у меня этой ссылки.
    9. DLE 12.1 Не работает Ваш скрипт
      1. для начала, скрипт не наш, Автор оригинальной версии для uCoz Рома Келлер ( https://uscript.pro/shop/83/item/versija-dlja-slabovidjashhikh )

        адаптацией под DLE 12.1 и выше никто не занимался и не будет. Так как подобные решения в целом скорее вредны сайту.
        Штатные средства веб-браузеров прекрасно справляются самостоятельно с адаптацией текста на страницах.
    10. День добрый! Давно установил скрипт на сайт. Скрипт прекрасно работал. И вдруг перестал работать.
      http://mptl.ru/
      1. Если Вы ничего в шаблонах сайта не меняли, а только обновляли движок (до DLE 14) то вероятно, проблема в версии jQuery.

        В настройках скрипта /admin.php?mod=options&action=syscon

        Версия jQuery для вашего сайта:
        Выберите версию jQuery, которая будет подключаться для использования на вашем сайте


        jQuery 3 или jQuery 2

        По очереди включите и сохраните изменения. После этого очистите кеш.

        Возможно, это сможет вам помочь.
    11. Здравствуйте! После переноса сайта на другой хостинг перестала работать версия для слабовидящих. При нажатии на ссылку ничего не происходит. Хотелось бы узнать проблема с хостингом или с самим скриптом. сайт http://ersh-centrdosuga.ru/
    12. Добрый день!
      Все сделал как написано в инструкции, скрипт не работает,
      подскажите в чём может быть проблема?
      www.iat38.ru
      Спасибо!!!