Версия для слабовидящих - нюансы разработки
Все студии создания сайтов с 1 января 2016 должны добавить на свой интернет проект версию для слабовидящих.
С недавнего времени данная процедура является обязательной в отношении к интернет ресурсам образовательных, медицинских и государственных учреждений. И если по каким-то причинам данное требование до конца 2016 года выполнено не будет — это влечет за собой наложение административного штрафа.
Примеры рабочих панелей:
Преимущества версии для слабовидящих:
- В первую очередь версия для слабовидящих улучшает юзабилити сайта для лиц с ограниченными возможностями
- Администраторы web проектов получают дополнительный охват и, как следствие, дополнительную прибыль
Какие основные возможности должны быть включены в версию сайта для слабовидящих:
- Изменение шрифта
- Изменение цветовой гаммы фона сайта и блоков
- Изменение цвета текста
- Возможность отключение медиафайлов
Как добавить на сайт версию для слабовидящих?
С этого момента начнем рассматривать техническую часть вопроса по работе с версией для слабовидящих. У веб разработчика есть несколько способов как выполнить поставленную задачу, но базовые приёмы сводятся к простым правилам и техникам. Давайте рассмотрим их по порядку:
- Версия для слабовидящих должна работать в режиме реального времени и без перезагрузки страницы, поэтому её нужно делать в виде javascript плагина. Те разработчики, кто пользуются фреймворками, могут написать плагин, например, для jQuery
- Инициализироваться плагин должен первым и после полной загрузки страницы, что бы изменения коснулись всех DOM-элементов
- Вне зависимости от ваших навыков в области программирования, базовый принцип функционирования версии для слабовидящих сводится к навешиванию классов на тег. Немного остановимся на этом пункте.
Допустим вы активировали плагин и первое что должно произойти — это добавление основного класса к названному тегу. Должно получиться примерно следующее:
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 стилей всего сайта. - Информацию об активности плагина, о текущем размере шрифта, цвете фона и текста мы храним в cookie браузера. Записываем их туда и стираем с использованием всё того же javascript.
Рекомендации по настройке версии для слабовидящих:
- Прописывать размер шрифтов лучше в относительных единицах — em. То есть в тех, которые определяются по текущему контексту. Это позволяет получить правильное изменение всех шрифтов в зависимости от масштаба страницы
- Не забываем про то, что люди встречаются как близорукие, так и дальнозоркие. Поэтому задавать шрифты нужно не только большие, но и маленькие
- При активации плагина желательно сразу отключать все картинки, слайдеры и прочую инфографику, оставляя при этом самую необходимую информацию.
- Попросите дизайнера грамотно оценить как будет выглядеть тот или иной блок в версии сайта для слабовидящих. Для лучшего результата возможно придется что-то изменить.
- При установке cookie с данными по плагину, не забываем записывать их ко всему сайту, а не для текущей страницы. Это поможет избежать в будущем проблему неработоспособности версии на разных разделах сайта.
На этом наш небольшой урок подошел к концу. Если у вас по каким-либо причинам не получается самостоятельно настроить версию для слабовидящих, то команда ClickON сделает это за вас профессионально и в самые быстрые сроки.
![Бэкдор в WordPress](/preview/blog_also/pic/17514_WordPress.png)
![Настройка рекламных аккаунтов на Facebook](/preview/blog_also/pic/17450_Facebook.png)
![Вместе до результата или как правильно организовать работу с веб-студией](/preview/blog_also/pic/17358_Vmeste-do-rezultata-ili-kak-pravilno-organizovat-organizovat-rabotu-s-veb-studiej.png)
![Зачем и как правильно оформлять страницы сайта?](/preview/blog_also/pic/16799_clickon.png)
![Семинар по продвижению услуг учреждений культуры в социальных сетях](/preview/blog_also/pic/16784_Seminar.jpg)
![Как сэкономить на контекстной рекламе или не Директом единым...](/preview/blog_also/pic/16695_Kak-syekonomit-na-kontekstnoj-reklame-ili-ne-Direktom-edinym.png)
![Таргетинг по тематическим площадкам в РСЯ](/preview/blog_also/pic/16677_Targeting-RSYa.png)
![Зачем платить за рекламу в социальных сетях](/preview/blog_also/pic/16575_Zachem-platit-sotsseti.png)
![Какие сайты должны использовать сертификаты безопасности?](/preview/blog_also/pic/15934_announce.png)
![Что продается в социальных сетях](/preview/blog_also/pic/15912_Chto-prodaetsya-v-sotsialnyh-setyah.png)
![Контекстная реклама или SMM, что выбрать?](/preview/blog_also/pic/15458_Konntekstnaya-reklama-i-SMM-printsipy-raboty.png)
![Каким должен быть сайт медицинского учреждения?](/preview/blog_also/pic/15294_Kakim-dolzhen-byt-sajt-meditsinskogo-uchrezhdeniya.png)
![Палех. Жар-птица для оптимизатора](/preview/blog_also/pic/14942_Novyj-algoritm-Paleh.png)
![Участие в семинаре "Как создать успешную рекламную компанию в Google AdWords"](/preview/blog_also/pic/14780_Shablon.png)
![Google Tag Manager все скрипты в одном контейнере…](/preview/blog_also/pic/14668_Google-Tag-Manager-vse-skripty-v-odnom-kontejnere.png)
![UTM метки в SMM или как считать лиды из социальных сетей](/preview/blog_also/pic/13436_Shablon.png)
![Черная и белая стороны продвижения в Instagram](/preview/blog_also/pic/13384_Shablon-3.png)
![Новый пиксель ВКонтакте - новые возможности по сбору баз ретаргетинга с сайтов](/preview/blog_also/pic/13211_logo.jpg)
![Почему seo-продвижение сайтов это не только ссылки?](/preview/blog_also/pic/12417_Rynok_APK.png)
![Старые продукты. Польза или вред?](/preview/blog_also/pic/12379_cashFire.png)
![Почему мы используем Parser в большинстве своих проектов?](/preview/blog_also/pic/12067_Parser.png)
![Что показывает статистика Яндекс Wordstat](/preview/blog_also/pic/11950_skachannye-fajly-19.png)
![Стоит ли разделять CSS и JS на более мелкие](/preview/blog_also/pic/11467_css4.jpg)
![Что лучше адаптивная вёрстка или мобильная версия](/preview/blog_also/pic/11386_1111.jpg)
![Новый алгоритм "Владивосток" - ранжирование сайтов в мобильном поиске Яндекса](/preview/blog_also/pic/10810_Logo.png)
![Поздравление клиентов с новым 2016 годом](/preview/blog_also/pic/10295_image-3.jpeg)
![Адская капча](/preview/blog_also/pic/9650_capcha.png)
![Что нужно дизайнеру для работы в web-студии?](/preview/blog_also/pic/9207_preview_requirements.png)
![ClickON на семинарах Google AdWords и Google Analytics в Волгограде](/preview/blog_also/pic/9173_11439819847278.jpg)
![Интересные страницы ошибок 404](/preview/blog_also/pic/8781_logo.png)
![Творческий клиент — инфаркт дизайнера](/preview/blog_also/pic/8585_client.png)
![Никто не знает что такое “тех.поддержка сайтов”](/preview/blog_also/pic/8449_1tehpodderzhka.jpg)
![Что такое продвижение с социальных сетях (SMM) и что оно даст вашему бизнесу?](/preview/blog_also/pic/8435_Dlya-bloga.jpg)
![Как организовать рассылку со своего сайта и не попасть в спам-лист](/preview/blog_also/pic/8408_image00.png)
![SEO 2.0](/preview/blog_also/pic/8390_seo.jpg)
![Яндекс отжигает :)](/preview/blog_also/pic/8296_Yandeks-otzhigaet.png)
![Вот нехорошо, но не удержался](/preview/blog_also/pic/8334_Vot-nehorosho-no-ne-uderzhalsya.png)
![А вот просто про время. :)](/preview/blog_also/pic/8335_A-vot-prosto-pro-vremya.png)
![Человечные опыты над Blender (часть II)](/preview/blog_also/pic/8337_Blender2.png)
![Как должна называться правильная веб-студия, или "фух, отлегло" :)](/preview/blog_also/pic/8338_Kak-dolzhna-nazyvatsya-pravilnaya-veb-studiya.png)
Иван
Спасибо за подробную статью! Есть вопрос, почему если я вешаю класс на body, то стили не действуют?
nikita
Иван, скорее всего нарушен приоритет в стилях. Попробуйте переопределить основные стили, добавив к ним окончание !important, например,.sizeBig{
font-size: 3em !important;
}