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

Недавно нашел одно решение, которым и делюсь, возможно кому-то пригодится.

Установка скрипта достаточно простая:

  1. Качаем архив со скриптом версии для слабовидящих.
  2. На все страницы сайта перед тегом вставляем:

, где — jikaka.ru меняем на свой сайт.

Данная версия для слабовидящих является универсальной для любого сайта. Стили можно настроить под себя любимого.

Пример работы скрипта можно посмотреть здесь (справа внизу плавает иконка глаза, хотя ее трудно не заметить).

Пользуйтесь! Да прибудет с вами сила джедая!

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

Что вам нужно выполнить для установки версии для слабовидящих:

  1. Скачать архив с скриптом — здесь.
  2. Распаковать архив у себя на компьютере.
  3. После распаковки вы увидите папку assets, внутри которой найдете еще три папки (css, fonts и js). Все правильно, так и должно быть.
  4. Устанавливаем FTP клиент Filezilla, скачать его можно с официального сайта разработчиков — здесь.
  5. Настраиваем подключение FTP к вашему сайту для ftp клиента Filezilla.О том как это сделать пошагово, читаем в материале — здесь. Если вы не установили пароль FTP как пишется в инструкции, перейдите в разделhttp:// ваш-сайт.ру /panel/?a=ftppass где сможете его назначить и после использовать в Filezilla при добавлении своего сайта.
  6. После как установили Filezilla и добавили свой сайт, проверили что подключение работает и вы видите в программе свои папки и файлы которые у вас отображаются в файловом менеджере, тогда можно приступать к загрузке файлов. В втором шаге выше вы распаковали архив, теперь выберите в приложении Filezilla папку assets и загрузите ее в корень фтп.

Если у вас также как на скриншоте и папку вы загрузите, теперь нужно приступать к финальному шагу установки.

Перейти в Панель управления — Главная — Дизайн — Быстрая замена участков шаблонов http:// ваш-сайт.ру /panel/?a=frep. Тип замены(многострочный).
Что заменить:

Жмем на кнопку — Произвести замену . Почти готово.

Еще одну замену проделаем, в поле что заменить вставьте:

Жмем на кнопку — Произвести замену. Последний этап установки скрипта, мы все завершили на 99%, но еще нужно установить кнопку для включения и выключения версии для слабовидящих. Перейдите в первый либо второй контейнер и добавьте новый блок как описано в материале https://www.ucoz.ru/qa/index.php/111802 в вкладке содержимое вставьте код:

сохраните изменения и готово. После можете обновить страницу сайта и проверить работу скрипта.

После чего увидите панель для работы с версией для слабовидящих:

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

Далее пройдемся по функционалу панели версии для слабовидящих:

    Размер шрифта — в данной вкладке вы можете нажимая на иконку + увеличить размер шрифта на 12 пунктов вперед или же нажимая иконку — для уменьшения и все эти действия будут озвучены если вы активируете синтез речи.

  • Цвет сайта — в данной вкладке вы имеете возможность для изменения цвета фона сайта. Для выбора предлагается 6 вариантов фона (черным по белому, белым по черному, темно-синим по голубому, коричневым по бежевому и зеленым по темно-коричневому).
  • Изображения — в данной вкладке вы имеете возможность отключить изображения, включить снова и включить режим черно-белых фото (то есть фото были цветными и после нажатия на кнопку черно-белые они станут в прямом смысле черно-белыми).
  • Дополнительно — в данной вкладке вы имеете возможность:
    • Включить синтез речи нажав на иконку динамика чтобы все ваши действия озвучивали и также отключить нажав на иконку повторно.
    • Далее перейдя в вкладку настройки мы можем дополнительно работать пунктами Кернинг в котором можем выбрать расстояние между символами в тексте.
    • Интервал вы можете настроить при каком интервале вам удобно читать текст выбрав одинарный, полуторный или двойной.
    • Гарнитура в данном пункте мы можем выбрать как нам удобно читать текст, с тем шрифтом что есть или с засечками.
    • Там же мы можем нажать на кнопку Вернуть стандартные настройки которая сбросит все ваши изменения которые вы выбирали в интерфейсе версии для слабовидящих.
    • Также рядом возле кнопки возврата настроек вы найдете кнопку Обычная версия сайта нажав на которую вы отключите версию для слабовидящих в привычный стандартный режим.

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

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

      Примеры рабочих панелей:

      Преимущества версии для слабовидящих:

      1. В первую очередь версия для слабовидящих улучшает юзабилити сайта для лиц с ограниченными возможностями
      2. Администраторы web проектов получают дополнительный охват и, как следствие, дополнительную прибыль

      Какие основные возможности должны быть включены в версию сайта для слабовидящих:

      1. Изменение шрифта
      2. Изменение цветовой гаммы фона сайта и блоков
      3. Изменение цвета текста
      4. Возможность отключение медиафайлов

      Как добавить на сайт версию для слабовидящих?

      С этого момента начнем рассматривать техническую часть вопроса по работе с версией для слабовидящих. У веб разработчика есть несколько способов как выполнить поставленную задачу, но базовые приёмы сводятся к простым правилам и техникам. Давайте рассмотрим их по порядку:

      1. Версия для слабовидящих должна работать в режиме реального времени и без перезагрузки страницы, поэтому её нужно делать в виде javascript плагина. Те разработчики, кто пользуются фреймворками, могут написать плагин, например, для jQuery
      2. Инициализироваться плагин должен первым и после полной загрузки страницы, что бы изменения коснулись всех DOM-элементов
      3. Вне зависимости от ваших навыков в области программирования, базовый принцип функционирования версии для слабовидящих сводится к навешиванию классов на тег. Немного остановимся на этом пункте.
        Допустим вы активировали плагин и первое что должно произойти — это добавление основного класса к названному тегу. Должно получиться примерно следующее:
        jQuery:
        $(‘body’).addClass(‘bad-eye’);