Версия для слабовидящих - нюансы разработки

  

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

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

ris1_8829F

ris2_4151A

ris3_A0FD5

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

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

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

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

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

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

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

    HTML:
    <body class='bad-eye'>
    ...
    </body>

    Что это значит? Всё просто! Добавленный класс перекроет все стили, находящиеся внутри. Теперь, если мы хотим увеличить шрифт, мы добавляем следующий класс и нужные нам CSS свойства:
    jQuery:
    $('body').addClass('big-size');

    HTML:
    <body class='bad-eye big-size'>
    ...
    </div>

    CSS:
    .bad-eye.big-size{font-size: 3em;}

    То же самое следует делать при изменение цвета фона или текста. В результате мы обращаемся к нашим классам через основной ('.bad-eye'), что исключает поломку css стилей всего сайта.

  4. Информацию об активности плагина, о текущем размере шрифта, цвете фона и текста мы храним в cookie браузера. Записываем их туда и стираем с использованием всё того же javascript.

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

  1. Прописывать размер шрифтов лучше в относительных единицах — em. То есть в тех, которые определяются по текущему контексту. Это позволяет получить правильное изменение всех шрифтов в зависимости от масштаба страницы
  2. Не забываем про то, что люди встречаются как близорукие, так и дальнозоркие. Поэтому задавать шрифты нужно не только большие, но и маленькие
  3. При активации плагина желательно сразу отключать все картинки, слайдеры и прочую инфографику, оставляя при этом самую необходимую информацию.
  4. Попросите дизайнера грамотно оценить как будет выглядеть тот или иной блок в версии сайта для слабовидящих. Для лучшего результата возможно придется что-то изменить.
  5. При установке cookie с данными по плагину, не забываем записывать их ко всему сайту, а не для текущей страницы. Это поможет избежать в будущем проблему неработоспособности версии на разных разделах сайта.

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

SEO 2.0
SEO 2.0
Евгения Медникова
Иван

Спасибо за подробную статью! Есть вопрос, почему если я вешаю класс на body, то стили не действуют?

nikita
Иван, скорее всего нарушен приоритет в стилях. Попробуйте переопределить основные стили, добавив к ним окончание !important, например,

.sizeBig{
font-size: 3em !important;
}
Создание и продвижение сайтов для бизнеса только кликни мы откликнемся
8-800-77-55-123 Меню
В порядке и на условиях, определённых Федеральным законом от 27 июля 2006 года № 152-ФЗ «О персональных данных». Согласие на обработку следующих моих персональных данных: фамилии, имени, отчества, года, месяцы, даты и места рождения, пола, гражданства, места жительства, в том числе сведения о регистрации по месту жительства, месту пребывания, места работы, социального положения (статуса), реквизитов документа, удостоверяющего личность. Обработка моих персональных данных Оператором осуществляется исключительно в целях защиты моих прав на регистрацию доменного имени, услуги по созданию и продвижению сайтов, услуги по размещению рекламных компаний в интернет и обеспечения соблюдения законов и иных нормативных правовых актов, связанных с предоставлением этих услуг. Я предоставляю Оператору право осуществлять следующие действия с моими персональными данными: сбор, систематизация, накопление, хранение, уточнение (обновление, изменение), использование, обезличивание, блокирование, уничтожение персональных данных, передача персональных данных между: - Оператором ООО «КликОН», в котором мне будут осуществляться вышеперечисленные услуги ; - Оператором АНО «Региональный Сетевой Информационный Центр», осуществляющим непосредственную регистрацию доменных имён ; Мне гарантируется конфиденциальность моих персональных при обработке их и хранении не дольше срока, предусмотренного нормативными актами. Настоящие согласие данное мной и действует бессрочно. Я оставляю за собой право отозвать своё согласие посредством составления соответствующего письменного документа, который может быть направлен мной в адрес Оператора по почте заказным письмом с уведомлением о вручении либо вручен лично под расписку уполномоченному представителю Оператора.