скрипт для слабовидящих на html сайт
Скрипт для слабовидящих на html сайт
letsee — Режим для слабовидящих для любого сайта
Letsee adapts any website for visually impaired people
Разместите папку letsee там, где хранятся статические файлы (*.js, *.css) на вашем сайте. В шаблоне всех страниц сайта в блоке разместите код подключения скрипта:
Измените пути к css- и js-файлам, если необходимо.
В нужном месте шаблона разместите ссылку «Режим для слабовидящих»:
Например, такой код спрячет ссылку на режим для слабовидящих когда этот режим уже включен, а также спрячет блок слайдшоу если пользователь отключил картинки:
Пишите мне, если вам требуется добавить какой-то функционал. С удовольствием помогу установить скрипт на сайты некоммерческих и образовательных организаций.
Upload letsee folder to your website, preferrably into where other *.js and *.css files are stored. Put this code into toplevel site template inside block:
Change paths to css- and js-file if needed.
Use this code where you want to place a link on the mode for visually impaired people:
You may set additional CSS rules for different modes that user may select using letsee panel. Put this code before «>
For example, this code will hide accessibility mode link if the mode is enabeld and also will hide a slideshow if user choosed to disable images:
Feel free to contact me if you need additional features or customizations. I will be glad to help to install this script for nonprofit and educational organizations.
About
Режим для слабовидящих для любого сайта / Adapt any website for visually impaired people
Как я делал версию сайта для слабовидящих. Скрипт. Отзыв
Каждый администратор решает проблему версии для слабовидящих по-своему. Есть по-настоящему толковые специалисты, которые сами в состоянии написать программный код. Такие решают проблему быстро, просто, их ресурс прекрасно работает, проверяющие остаются от подобных сайтов в полном восторге.
Обычно сайтом в школе занимается учитель информатики, у которого и без этого забот воз и маленькая тележка. А тут еще версию сайта для слабовидящих делай. Одним словом, новые требования, которые по идее должны кардинально улучшить информационную наполненность сайтов и их функциональность, легли дополнительной нагрузкой на плечи администраторов школьных сайтов. А ведь среди них, чего уж греха таить, встречаются и такие, кто в сайтах вообще не очень понимает и поручает эту работу более продвинутым ученикам-старшеклассникам.
Причем если в городских школах ситуация еще более иль менее нормальная, то где-нибудь в сельской глубинке все обстоит не так радужно, как это хотелось бы нашим генералам от образования.
Но сейчас давайте все же вернемся к тому, как сделать версию сайта для слабовидящих. Ведь сайты уже проверяют на предмет наличия этого функционала. И горе будет тем недальновидным руководителям, которые загодя не позаботились о его наличии. В лучшем случае им будет выдано предписание «устранить в трехдневный срок». Вот тут и начнется самое интересное.
Между тем, некоторые директора учреждений культуры и образования проявили активность заранее. А поскольку я занимаюсь поддержкой сразу нескольких сайтов таких учреждений, мне было поручено найти решение данной проблемы.
Получив задание найти модуль версии сайта для слабовидящих, я перебрал множество разных вариантов.
Среди них были такие решения:
Так с некоторым сожалением я отметал вариант за вариантом, время шло, а у меня не было готового решения.
Версия сайта для слабовидящих. Требования
И тогда вдруг в поле моего зрения попало предложение одной компании, специализирующейся на web-программировании. Оказывается, для того чтобы на вашем сайте появилась версия для слабовидящих, причем, правильная, сделанная в соответствие со всеми требованиями ГОСТа, не надо быть первоклассным программистом и опытным администратором сайтов.
Достаточно просто добавить фрагмент программного кода на свой сайт, а все остальное сделают специалисты компании «на своей стороне».
Забегая немного вперед скажу, что я купил такой модуль и теперь на нескольких сайтах, находящихся под моим управлением, действительно появилась версия для слабовидящих.
Самой впечатляющей функцией модуля является синтезатор речи. Если человеку действительно не очень комфортно читать текст, он может нажать на соответствующую кнопку и прослушать текст страницы, озвученный голосом. Это действительно удобно для тех, кто испытывает затруднения с чтением текста с экрана. Данный функционал подключается бесплатно по отдельному запросу.
Вот несколько скриншотов с сайта.
Кнопка перехода к версии для слабовидящих:
Значок для переключения в режим для слабовидящих находится в правом верхнем углу. Вообще, он должен быть довольно крупным, чтобы реально слабовидящий человек сразу его заметил. На некоторых сайтах эти значки расположены так, что даже зрячий должен будет приложить немалые усилия, чтобы обнаружить заветную кнопку. Вот пример: сможете быстро найти переключатель?
Значок должен быть хорошо виден, чтобы человек со слабым зрением его сразу увидел.
После нажатия на кнопку станица преображается:
Шрифт становится крупным, черным, исчезает все оформление, фоновый рисунок. Теперь сайт выглядит не так красиво: на нем уже нет слайдеров, фотокаруселей, красивых подложек и элементов декора. Зато:
В самом верху страницы есть панель настроек. Если нажать кнопку «настройки«, можно дополнительно сделать картинки черно-белыми или вовсе отключить их отображение, можно поменять межбуквенный и межстрочный интервалы.
Можно выбрать варианты цветового оформления. Помимо черно-белых можно использовать следующие:
И, само собой, можно переключать размер шрифта.
Вот какие вполне исчерпывающие возможности имеются у модуля, который предоставляет компания.
Как сделать версию сайта для слабовидящих
Изучая модуль, я обнаруживал дополнительные плюсы и все более проникался мыслью, что это удачное решение.
Вот основные положительные черты:
Насчет последнего пункта хочется показать некую конкретику.
Чтобы установить модуль версии для слабовидящих, надо добавить на свой сайт (например, в шаблон, или отдельный HTML-модуль) вот такой HTML-код (просто скопировать и вставить):
После этого на сайте появляется новая кнопка, позволяющая переключаться в версию для слабовидящих.
По вашему желанию дизайн кнопки можно изменить и разместить ее в том месте сайта, где вам необходимо.
Сколько стоит модуль для слабовидящих. 6500 руб. (для друзей скидки!)
Безусловно, за подобные удовольствия приходится платить, но иногда это более оправдано, чем пытаться сделать свое собственное трехколесное транспортное средство, не обладая достаточным опытом. Представляете, какая раскоряка может получиться? :). А что скажут проверяющие?
Поэтому, посоветовавшись с владельцем сайта, мы заплатили 6500 рублей и решили проблему с версией для слабовидящих в тот же день.
А дальше произошло вот что. Путем переговоров мы с производителем пришли к соглашению о скидке для моих клиентов и подписчиков, то есть, вас, читающих этот текст.
В принципе, вы можете купить модуль напрямую у производителя на официальном сайте, но это, как ни странно, обойдется дороже. Партнерские программы тем и хороши, что если не жадничать, можно «сделать хорошо всем»:
Поэтому, если мое предложение вас заинтересовало, предлагаю Вам прямо сейчас, безо всяких условий, установить на свой сайт код, который доступен по этой ссылке (будет скачан текстовый документ с кодом модуля). Сделайте это сами или поручите Вашему специалисту по сайту.
Затем пришлите мне письмо на адрес Этот адрес электронной почты защищен от спам-ботов. У вас должен быть включен JavaScript для просмотра. с темой «Модуль для слабовидящих +1» и адресом Вашего сайта в теле письма. Я перешлю Ваши данные производителю и он подключит модуль к Вашему сайту. Так Вы сможете посмотреть, как он работает. Если понравится, можно будет переходить к оплате.
Заключение
Модуль для создания версии сайта для слабовидящих, о котором идет речь, испытан мной лично на нескольких подконтрольных сайтах. Никаких претензий к его работе не возникло. В том числе со стороны проверяющих, ибо все сделано по ГОСТу. Вы сами можете посмотреть, как он работает: http://nokk-33.ru.
Считаю его удачным решением за сравнительно небольшие деньги.
Если у Вас остались вопросы или Вы желаете заказать модуль со скидкой, заполните эту форму.
Как сделать версию сайта для слабовидящих
Версия для слабовидящих должна быть обязательно на сайтах госструктур, медицинских и образовательных учреждений. Использовать такую версию рекомендуется и коммерческим сайтам для увеличения аудитории посетителей.
Низкое зрение пользователей необходимо учитывать при создании сайта. Таким людям сложно ориентироваться на ресурсе без адаптации под их потребности.
Как сделать версию сайта для слабовидящих
При создании адаптивного шаблона сайта важно учитывать характер разных заболеваний людей с ограниченными возможностями. Например, при дальтонизме нарушено восприятие цветов и их оттенков. Астигматизм означает нарушение четкости восприятия текста и картинок. В некоторых случаях простое увеличение шрифта не помогает человеку со слабым зрением понять, что написано на web-странице. Поэтому нужно использовать дополнительные параметры настройки дизайна.
Стандартные плагины учитывают все возможные нарушения зрения. При создании уникального адаптивного шаблона для сайта важно предусмотреть все варианты:
Проверить контрастность текста на сайте можно с помощью специальных программ, расширений для браузеров и онлайн-инструментов. Например, Color Contrast Analyser. По ГОСТ показатель контрастности на сайте должен быть не менее 4,5:1. На сайте пенсионного фонда России задаются персональные настройки отображения версии для слабовидящих. Контрастность шрифта позволяет прочитать текст людям с плохим зрением.
Методы создания адаптивной версии для людей с нарушенным зрением:
Как установить скрипт на сайт для слабовидящих
В этом случае используется шрифт ligature symbols. Вы можете заменить его на любой другой.
Далее необходимо вставить еще один участок кода после закрывающего тега :
Это и есть описание шаблона, который активируется при нажатии кнопки перехода на версию сайта для слабовидящих. В этом случае активируется панель настроек шрифта, изображений и цветов. Чтобы шаблон заработал, необходимо добавить кнопку в любое место на странице. Для этого используется участок кода:
Его нужно добавить там, где бы вы хотели отобразить кнопку перехода на адаптивную версию сайта. В конце страницы желательно добавить еще одну строку для окончательной загрузки скрипта:
Как сделать сайт для слабовидящих HTML
Для использования этого сервиса достаточно добавить несколько строк в код HTML или Javascript по инструкции. Нужно зайти на сайт FineVision и ввести домен в строку.
Далее можно посмотреть, как будет выглядеть сайт после добавления кнопки, и сразу получить код для установки ссылки на адаптивную версию. Описания по установке для каждой CMS находятся на сайте сервиса. Стоимость лицензии FineVision на один год составляет 350 рублей при условии оплаты через Робокассу.
Версия сайта для слабовидящих WordPress
Для создания адаптивного шаблона сайта для людей с плохим зрением удобно использовать платные и бесплатные плагины. Например, Button visually impaired или For the visually impaired.
Для сайтов на WordPress также подходит вариант с установкой скрипта и созданием отдельной версии на поддомене. Важно, чтобы кнопка переключения была заметна человеку с плохим зрением. Перед запуском плагина или скрипта его необходимо протестировать на корректность работы. В некоторых случаях не срабатывает диктор либо не получается переключить управление с мыши на клавиатуру. Все проблемы нужно устранить до активации адаптивной версии сайта.
Кнопка для слабовидящих на сайте с использованием сервисов
Кнопка для слабовидящих на сайте должна быть у всех организация подпадающих под Федеральный закон «О социальной защите инвалидов в Российской Федерации». Чтобы не получать уведомления или предписания судебных органов, необходимо позаботиться о создании версии сайта для слабовидящих.
С технической точки зрения, все выглядит следующим образом. Необходимо создать вторую версию сайта или шаблона, если используется cms- ситема, где будут изменены необходимые стили отображения.
Способов решения этой задачи не мало и в этом посте речь пойдет о самом быстром, простом и условно-бесплатном.
Основными требованиями к версиям сайтов для слабовидящих являются
Всех подробностей касаться не будем, все это есть на официальных сайтах, но если выполнить основные требования, то вопросов у правоохранительных органов к вам не возникнет.
Как делается кнопка для слабовидящих на сайте с помощью сервиса.
Процесс простой до «безобразия». Всю техническую задачу берет на себя тот сервис, которому отдается предпочтение. В общих чертах все выглядит одинаково. От администратора сайта требуется только адрес ресурса.
В нашем случае сервис FineVision возьмет на себя всю рутинную работу. С его помощью можно установить кнопку для слабовидящих на сайт созданный с помощью сервисов (uCoz,Wix), практически любых cms- систем и самописных сайтов.
Этапы внедрения кнопки для слабовидящих на сайт
Что касается самого процесса, то его можно было не описывать. Визуально все понятно без слов.
Выбираем необходимый вариант кнопки для слабовидящих
Копируем полученный html- код и вставляем в нужное место на сайте.
Практически все варианты html- кода являются обычными ссылками, которые можно вставлять в любом месте и разными способами.
Кроме этого, стиль кнопки-ссылки можно менять и подгонять под нужные параметры вашего проекта.
Конечно, внедрение html- кода в разные версии сайтов выглядит не однообразно, но на сайте FineVision предусмотрена обратная связь, если редактирование кода вызывает трудности.
На всякий случай я записал видео о добавлении кнопки для слабовидящих на сайт, для владельцев сайтов созданных на joomla и wordpress. Для остальных движков все идентично.
Видео как установить кнопку для слабовидящих на сайте
шпаргалки блогерши
И последние время меня уже неоднократно спрашивали, как это реализовать именно в блоге.
Вот, всё же наткнулась на ответ. Цитата.
Федеральный закон «О социальной защите инвалидов в Российской Федерации» обязывает организации создавать условия инвалидам для беспрепятственного доступа к объектам социальной инфраструктуры, а также для беспрепятственного пользования средствами связи и информации. Государственными стандартами предусматривается обязательная альтернативная версия для инвалидов по зрению в случаях, когда сайт имеет значительное число элементов, доступ к которым для данной категории граждан затруднен, отмечается в сообщении.
Приказ Росстандарта от 29.11.2012 N1789-ст «Об утверждении национального стандарта»
Версия сайта для слабовидящих должна быть у школ, детских садов, библиотек, культурных и спортивных учреждений, ВУЗ-ов, больниц, администраций, управлений, департаментов и др. бюджетных организаций.
И, поскольку среди моих читателей очень много работают в вышеперечисленных сферах, стало всё понятно. Так что, держите дорогие мои.
На самом деле много скриптов версии сайта для слабовидящих. Один из них я приведу ниже. Дело в том, что если шаблон перепичкан всякой всячиной они не всегда работают корректно. Или, вообще, не хотят работать. Предложу вам более удобный и рабочий вариант версии для слабовидящих. Воспользуемся сайтом finevision.ru. Где можно получить готовый код для установки в блоге.
Подходит практически для всех сайтов и CMS (Alto CMS, AVE.cms, CMS Made Simple, concrete5, Danneo, DataLife Engine, Drupal, InstantCMS, Jimdo, Joomla, LiveStreet, MaxSite CMS, MODx, Nethouse, NGCMS, okis.ru, Setup.ru, Textpattern, TYPO3, uCoz, uDiscuz!, Wix, WordPress.
Идём по этой ссылке. В поле вписываем адрес своего блога и нажимаем получить код для вставки. На следующей странице предложены 3 варианта отображения баннера. Выбирайте тот, который нравится и копируйте готовый код.
Код вставляйте в Блоггере в гаджет HTML/JavaScript. Отображаться он будет в правом поле блога и всегда будет перед глазами во время прокрутки страницы. При нажатии на кнопку все его рабочие функции включатся выше навбара.
Функций достаточно. Регулировать можно сам размер шрифта, межстрочный интервал, цвет фона и даже отображение (или нет) картинок. Воочию посмотрите что получилось у меня на тестовом блоге.
Посоветую на сайте finevision.ru пробежаться и по рубрикам. Там есть полезная информация по установке и настройке. И ещё разработчики пишут, что
В настоящее время сервис находится на стадии тестирования и предоставляется бесплатно, после завершения тестового периода, в зависимости от размера сайта оплата составит от 200р до 500р в год
Ну и как обещала ещё один скрипт версии для слабовидящих. Там же на тестовом вверху сайдбара посмотрите.
Скрипт для такого варианта.
И у меня на сегодня всё. Удачи вам и до скорых встреч.