Как сделать версию для слабовидящих на сайте wix
Добрый день. Меня зовут Тамара. Подскажите, пожалуйста, как можно создать версию сайта для слабовидящих в конструкторе Wix? Это вообще возможно? Заранее спасибо.
Как вы уже знаете, в этом году был принят законопроект, обязывающий госорганизации иметь версию сайта для слабовидящих. Скорее всего, у вас именно такой сайт, и теперь думаете, как выполнить норму закона.
К сожалению, Wix не обладает функционалом, который может в автоматическом режиме адаптировать сайт для людей с плохим зрением. Возможен единственный вариант решения этой задачи — вручную создавать дубли страниц через меню «Страницы». Затем вам потребуется каждую из них переформатировать, увеличив текст и картинки. Фактически вам придётся создать дополнительную версию сайта (по аналогии с мультиязычным сайтом). На основном сайте размещаете крупную и хорошо читаемую кнопку для перехода на версию для слабовидящих. Конечно, это неудобно и сложно реализовывать, особенно новичкам.
Вообще, если вы попадаете под действие этого закона и от версии для слабовидящих не отвертеться, то лучше его делать на платформе, которая изначальна приспособлена под эту задачу. Это uCoz. На данном конструкторе вы сможете активировать этот функционал одним переключателем безо всяческих дополнительных костылей и телодвижений.
Поэтому можно с уверенностью сказать, что перенести сайт на uCoz будет проще, чем попытаться реализовать необходимое в Wix.
Тем более, что «государственные учреждения и муниципальные образовательные организации» могут использовать uCoz совершенно бесплатно, да еще и в полнофункциональном виде. То есть вы получите сайт со всем необходимым вообще без денег. Разве что затраты на домен останутся.
В общем, вы изначально неправильно выбрали платформу. Викс – хорош, но не для указанного сценария использования. Бесплатный сайт госслужбы лучше всего делать на Юкозе. Так вы легко удовлетворите требования законодательства и сэкономите деньги.
Если у вас остались еще какие-то вопросы вы можете задать их через комментарии. Если же вам нужна помощь в реализации или переносе сайта — обращайтесь через форму.
P.S. Помимо uCoz, возможность добавить версию сайта для слабовидящих есть у следующих конструкторов: Ukit, Setup, Netdo, Nubex.
Версия сайта для слабовидящих: для каких сайтов необходима и как ее сделать
Версия сайта для слабовидящих подразумевает наличие крупного шрифта, повышенной контрастности и другие подстройки визуала под нюансы восприятия. Сегодня, наличие такой версии обязательно для определенных категорий сайтов государственных учреждений, это предусмотрено законом . Тем не менее доступность версии сайта для слабовидящих важна как для государственных учреждений, так и для коммерческих, ведь это позволит увеличить аудиторию посетителей.
Директ Лайн
Крупнейшее региональное интернет-агентство России. ТОП-10 в рейтинге Рунета.
1200+ проектов
90 специалистов
15 лет на рынке
Какие организации обязаны иметь на сайте версию для слабовидящих
Сделать альтернативную версию сайта для слабовидящих обязаны государственные учреждения. Согласно требованиям 181-ФЗ , запрещена дискриминация по признаку инвалидности. Последнее говорит о необходимости в разработке версии сайтов для людей, имеющих нарушения зрения для реализации их прав. Официально, данные требования должны осуществляться в следующих учреждениях:
- Органах федеральной, региональной власти;
- Государственных медучреждениях;
- Образовательных учреждениях;
- Учреждениях культуры и искусства;
- Социальных учреждениях.
Указанные органы должны иметь версию для слабовидящих.
Нет времени разбираться?
Техподдержка сайта на «1С-Битрикс» под ключ
Специализируемся на «1С-Битрикс» более 10 лет и знаем все подводные камни и специфику. Работаем с сайтами любой технической сложности и бизнес-логики. При необходимости подключаем UX-специалиста и дизайнера. В течение 2 часов реагируем на обращения в тикетной системе.
Пример сайта с версией для слабовидящих
Общие требования к сайтам для слабовидящих
Версия сайта для слабовидящих должна соответствовать следующим требованиям:
- Отсутствие на страницах фреймов.
- Возможность выбора цвета текста, его фона.
- Минимальное использование файлов формата PDF.
- Отсутствие таблиц с большой степенью вложенности.
- Наличие текстового описания всех графических файлов при помощи тега Alt.
- Наличие аудиоверсии капчи.
- Возможность увеличения шрифта с сохранением удобства чтения и просмотра, отсутствие горизонтальной полосы прокрутки.
- Запрет на использование цвета для передачи информации.
Функционал
Людям должны быть доступны:
- Возможность выбора одного из трех размеров шрифта;
- Возможность выбора одной из трех цветовых схем;
- Возможность выбора отключения изображений.
В качестве стандартных цветовых решений принято считать:
- Фон черного цвета с белым шрифтом;
- Фон черного цвета с зеленым шрифтом;
- Фон белого цвета с черным шрифтом;
- Фон бежевого цвета с коричневым шрифтом;
- Фон голубого цвета с темно-синим шрифтом.
Так как существует множество различных заболеваний, по этой причине рекомендуется наличие множества цветовых решений для удобства глаз.
Функционал в версии сайта для слабовидящих
При разработке альтернативных версий для людей с нарушениями зрения необходимо учитывать ГОСТ Р 52 872 − 2012. Согласно стандартам, зафиксированы три степени соответствия доступности:
- А. Минимальная доступность;
- АА. Степень средней доступности;
- ААА. Высшая степень.
Законодательство рекомендует стремление к наивысшей степени ААА в том случае, если технические возможности позволяют реализовать это. С другой стороны, несоответствие минимальной степени доступности А влечет санкции и штрафы от контролирующих органов.
Привлекли 35.000.000 людей на 185 сайтов
Мы точно знаем, как увеличить онлайн–продажи
Применяем лучшие практики digital–продвижения как из вашей тематики, так и из смежных областей бизнеса. Именно это сделает вас на голову выше конкурентов и принесёт лиды и продажи.
Необходимость масштабирования
Согласно требованиям, должна быть реализована возможность увеличения шрифта на 200% без появления горизонтальной полосы прокрутки. Требование возможно выполнить за счет масштабируемой верстки версии сайта для слабовидящих. При этом панель управления должна содержать встроенную опцию увеличения шрифта, не увеличивая его в браузере. Рекомендуемые масштабы достигают 500%.
Возможность отключения изображения
Нарушения зрения вызваны различными причинами и имеют различное проявление. В некоторых случаях человек может распознать изображения, а в других – не может. По этой причине в версиях сайтов для людей с нарушениями зрения должна быть возможность включения и отключения изображений.
Оформление страницы
Удобство прочтения текста должно сопровождаться возможностью регулирования уровня яркости. В то же время необходимо обеспечить необходимый уровень контрастности. При соотношении текста и фона контрастность должна быть не менее 7:1, при крупном тексте подходит 4,5:1.
Также действуют другие требования к оформлению:
- Основная информация на странице должна умещаться на 2-3 экранах.
- Ширина строчки составляет не более 80 знаков.
- Текст не должен быть выровнен по ширине.
- Запрещается использовать Flash-анимацию.
Удобство управления
Альтернативная версия сайта для людей с патологией зрительных органов должна содержать функцию управления при помощи клавиатуры. Также частота время нажатия кнопок не должна влиять на типы команд. Возможность ввода информации с использованием голосовых команд не запрещается.
Навигация при помощи клавиатуры должна обеспечивать перемещение фокуса в той последовательности, при которой передача смысла не нарушается. В качестве примера можно привести то, что нажатие кнопки Tab перемещает фокус к следующей ссылке или окну. В то же время ограничивается количество ссылок и кнопок до 15 шт.
Также необходима разработка способов помощи для ввода информации. Людям с нарушением зрения должны быть предоставлены следующие виды опций:
- возврат отправленных данных;
- проверка данных на корректность;
- проверка, исправление и подтверждение данных перед отправкой.
Выполняемые действия на сайтах необходимо сделать предсказуемыми. Запрещается внезапное открытие окон при навигации или пользовании страницей. В случае изменения настроек, важно сохранение контекста, а также поддержание единообразной навигации.
Контент
Обязательное условие – сопровождение нетекстового контента текстовым аналогом. В то же время информация должна быть донесена логичным и удобным языком, обязательно использование заголовков, которые обозначены тегами h1, h2, h3.
На каждой странице должны содержаться заголовки, передающие основную цель. Учитывая широкое использование слабовидящими людьми дикторов, которые зачитывают текстовую информацию, в том числе, заголовки и теги, необходимо разработать возможность быстрого ухода со страницы, когда возникает такая потребность.
Как сделать?
Для создания версий сайтов для слабовидящих возможно использование нескольких вариантов – это скрипты и плагины. Мы рассмотрим примеры готовых решений. Однако стоит сказать, что под некоторые CMS системы, готовые решения могут не подойти.
Скрипт
Пример готового скрипта для создания версии сайта для слабовидящих
Воспользуемся каталогом от UScript. В числе их универсальных скриптов есть нужный нам скрипт « Версия сайта для слабовидящих ». Этот скрипт позволяет сделать версию сайта для слабовидящих на самых популярных CMS. Однако стоит помнить, что корректное отображение элементов зависит от верстки сайта. И важное уточнение, о котором нас предупреждает разработчик, скрипт не подойдет для сайтов на платформе Wix.
- Возможность простой установки;
- Возможность изменения размеров шрифта текста;
- Возможность настройки межтекстового интервала;
- Возможность голосового озвучивания текста;
- Возможность отключения/включения графического контента;
- Возможность изменения цвета изображений;
- Наличие качественного набора цветовой палитры.
Плагины
Внедрение версий сайтов для людей с патологией зрительных органов возможно также при помощи плагинов. Установка плагина происходит автоматически, не требуя особых усилий и не занимая много времени для пользователя. Это является преимуществом плагинов перед скриптами. Таких плагинов имеется большое множество, выбирать стоит исходя из индивидуальных потребностей и возможностью совместимости с вашим сайтом.
Почти все подобные плагины содержат:
- Возможность включения и отключения изображений, отображения их в черно-белом режиме;
- Возможность выбора шрифта;
- Возможность изменения размера шрифта из пяти режимов: 14px-26px;
- Возможность изменения межстрочного интервала;
- Возможность изменения интервала между символами;
- Возможность изменения фона страницы из вышеуказанных пяти режимов;
- Возможность добавления кнопок в виджетах;
- Возможность добавления кнопок в меню;
- Возможность добавления быстрых коротких переходов;
- Возможность выбора из двух языков: русского и английского.
Поддерживающим основные современные версии браузеров и платформ является плагин Button visually impaired . Плагин бесплатный.
Пример плагина для создания версии сайта для слабовидящих
Частые проблемы и ошибки при разработке версии сайта для слабовидящих
Сайты для людей с патологией зрительных органов часто не полностью соответствуют требованиям. Зачастую приоритет ставится на формальное наличие данных версий, отодвигая удобство и комфорт на задний план.
На примерах множества сайтов можно убедиться в наличии следующих частых проблем:
- Съезжает верстка;
- Некорректное отображение иконки;
- Некорректное функционирование фокуса;
- Отсутствие диктора или невозможность прочтения текста встроенным диктором.
- Возникновение полосы прокрутки при масштабировании страницы.
Поэтому после создания на сайте версии для слабовидящих, ее всегда нужно тестировать и дорабатывать в зависимости от имеющихся недостатков.
Итак, обобщим еще раз ключевые требования:
- Текстовое сопровождение всего нетекстового контента, чтобы встроенный в браузер диктор смог его прочитать.
- Возможность управления через клавиатуру и увеличения шрифта на 200% без полосы прокрутки.
- Наличие заполненных тегов Title и H1 в каждой странице.
- Внедрение нескольких шрифтов и цветовых схем, функции отключения картинок.
- Внедрение опции масштабирования коэффициентов контрастности не менее 7:1.
Как сделать версию для слабовидящих на сайте wix
Версия сайта для слабовидящих
Как сделать сайт почти осязаемым и в каких случаях придётся подружиться с контрастными шрифтами и аудиоозвучкой (по-хорошему, во всех)
В России проживает более миллиона слепых и слабовидящих людей, а легкие расстройства вроде близорукости есть у каждого второго. Интернет подстраивается под таких людей: у Windows есть функция экранного диктора, существуют программы для озвучки текста вроде Text To Speech Maker или для его увеличения на экране, например, MAGic.
Создатели сайтов тоже могут позаботиться о слабовидящих и сделать для них специальную версию сайта: с повышенной контрастностью, увеличенным шрифтом и другими особенностями. Для людей с ограничениями — это хороший способ получать информацию легче и быстрее. А мы подскажем в статье, что конкретно нужно.
Каким сайтам обязательно нужна версия для слабовидящих
В 2016 году был принят закон против дискриминации инвалидов, так что версия для слабовидящих должна быть у любого сайта. Но на деле за этим следят только на сайтах государственных учреждений, школ, институтов и больниц.
- салонам оптики и клиникам, в которых предлагают коррекцию зрения;
- больницам и частным окулистам;
- госучреждениям;
- социальным и образовательным учреждениям.
Версия для слабовидящих у оптики «Эксимер»
Если вы разрабатываете именно такой сайт, то заложить отдельную версию в проект нужно обязательно. В других случаях такую функцию можно добавить, если позволяет время и деньги.
За отсутствие версии можно получить штраф до 3 тысяч рублей для физических лиц и до 100 тысяч для юридических.
Какой должна быть версия сайта для слабовидящих
Вообще на этот случай есть ГОСТ Р 52 872−2012 «Интернет-ресурсы. Требования доступности для инвалидов по зрению», который описывает все нюансы, а также международные стандарты Web Content Accessibility Guidelines (WCAG 2.0.) — от W3C, Section 508 Standards — США, WaSP — Великобритания, DAL — Дания. Чтобы соблюсти законы, хватит ГОСТа, да и в целом он требует только необходимое.
Требования ГОСТ к версии для слабовидящих
У всей важной информации должен быть текстовый аналог, то есть описания к изображениям и элементам фона. Сами изображения можно отключить.
— Капча обязательно должна иметь аудио-версию (к капче Гугла «Я не робот» это не относится — там только галочка ставится)
— Все основные страницы (например, «Главная» или «Контакты») должны быть не длиннее двух-трех экранов.
— Размер шрифта должен увеличиваться в два раза. При увеличении на странице не должна появляться горизонтальная полоса прокрутки.
— Внутри главного контента (статей, новостей, рецензий) не должно быть вставок постороннего, например, блока «другие новости по этой теме» посреди самой новости.
— Цвета нельзя использовать как элемент передачи информации.
— Коэффициент контрастности должен быть не меньше 7 к 1. Можно проверить сочетаемость онлайн на сайте BL2 — если в графе АА стоит «да», то цвета подходят.
— Пользователь должен иметь возможность выбрать цвета переднего плана и фона: черный на белом, белый на черном, темно-синий на голубом или коричневый на бежевом.
— Любые действия на сайте можно совершать только с клавиатуры, без ограничения по времени — ничего не должно открываться внезапно и перенаправлять куда-то само через несколько секунд.
Самые частые болезни глаз, при которых нужна специальная версия сайта
— близорукость,
— астигматизм,
— дальтонизм,
— миопия,
— катаракта,
— глаукома.
Это версия для слабовидящих сайта http://special.kremlin.ru/events/president/news. На ней соблюдены все требования ГОСТ
Соблюсти все требования сложно: на это уйдет много времени и денег. Но на практике достаточно добавить несколько функций, которые упростят чтение. Сложность в том, что их нужно объединить в одну версию — по отдельности функции добавить не получится.
Как сделать версию сайта для слабовидящих
Это не всегда просто, во многих случаях сайт нужно переверстать заново. Чтобы создать версию для слабовидящих достаточно добавить на сайт три переключателя:
— изменение размера шрифта, его типа и межстрочного интервала;
— изменение цветовой схемы;
— включение/отключение изображений.
Будет проще, если на основном сайте сразу сделана хорошая верстка, можно управлять всем с клавиатуры и нет посторонних включений в основном контенте.
Можно пойти сложным путем — повесить версию сайта со всеми переключателями на отдельный поддомен и по кнопке просто перебрасывать пользователя на него. Так сделано на сайте Президента РФ. Это усложняет администрирование и увеличивает расходы. А еще, как один из вариантов — можно записывать куки пользователя и при следующем переходе на сайт перенаправлять его на поддомен.
Второй вариант — оставлять пользователя на той же версии, но сразу изменять дизайн сайта под более контрастный при нажатии на кнопку переключения. Так сделано на сайте офтальмологической клиники «Эксимер». Такой вариант переключает пользователя на специальную тему, которая быстро загружается и не засоряет основной код.
Более изящное решение — обычная панель с переключателями, которая открывается по нажатию кнопки, как, например, на сайте новосибирского ВУЗа СибГУТИ.
Панель открывается при нажатии на текст «Версия для слабовидящих», внутри уже можно редактировать нужные параметры.
Можно написать эти переключатели для CSS на JavaScript самостоятельно. Однако у некоторых CMS есть готовые решения: модули Template Selector и Fast Font для Joomla, плагины Comfortable Reading или For the visually impaired для WordPress.
У системы школьных сайтов edusite.ru модуль включен по умолчанию. В сети продаются и выкладываются бесплатно и готовые скрипты для тех CMS, где их нет, или для сайтов без CMS.
Как сделать сайт доступным для каждого
Большинство людей, от бизнесменов до художников, создает сайты с единственной целью — донести свои идеи, продукты и сервисы до широкой аудитории. И для этого нужно убедиться, что контент сайта доступен для всех — в том числе, для людей с ограниченными возможностями.
Более миллиарда человек по всему миру не могут полноценно пользоваться большей частью информации в Интернете, потому что она не адаптирована под их нужды. Эта огромная цифра — и чтобы ее уменьшить, требуются совместные усилия пользователей и платформ по созданию сайтов.
В 2016 году Wix присоединился к движению за доступные сайты и начал активную работу по адаптации продуктов платформы для людей с ограниченными возможностями. Спустя несколько лет разработки, мы с гордостью представляем Мастер специальных возможностей Wix .
Что такое доступный сайт
Доступными называются сайты, которые учитывают потребности людей с ограниченными возможностями. Например:
- Люди с ограниченными возможностями зрения
- Люди с ограниченными возможностями слуха
- Люди с ограниченными двигательными способностями
- Люди с ограниченными когнитивными способностями
- Люди с временными ограничениями
Как создать сайт для людей с ограниченными возможностями? С помощью специальных шаблонов и функций, которые позволяют таким пользователям наслаждаться контентом в полной мере. Мастер специальных возможностей Wix позволяет сделать сайт более доступным, даже если у вас нет опыта в веб-дизайне.
Мастер специальных возможностей Wix
Последние 5 лет команда Wix работала над тем, чтобы сделать сайты платформы более доступными. Мы исправили тысячи багов, создали инклюзивные продукты, настроили поддержку программ чтения с экрана и многое другое. Но в процессе мы осознали кое-что важное: доступными должны быть не только продукты, но и контент, создаваемый нашими пользователями.
Сначала мы пытались решить эту задачу с помощью контрольного списка , который помогал привести сайт в соответствие с региональными законами о доступности сайта. Список включал в себя советы по добавлению визуальных индикаторов, работе со шрифтами, формами Wix Forms Accessible и многое другое. Однако процесс адаптации сайта оказался слишком тяжелым и времязатратным для многих пользователей — и это побудило нас начать работу над более универсальным решением.
Таким решением стал Мастер специальных возможностей — инструмент, который позволяет сделать сайт более доступным прямо в редакторе Wix. Объясняем принцип его работы.
1. Автоматическое сканирование
Мастер специальных возможностей сканирует сайт и выделяет проблемы, связанные с доступностью: отсутствие alt-текста, отсутствие контраста между текстом и иконками или неправильная структура заголовка. После этого инструмент помогает исправить каждую проблему прямо в редакторе Wix.
2. Практические решения
Некоторые проблемы Мастер специальных возможностей не может определить автоматически. Поэтому на этом этапе инструмент предоставляет специальный чек-лист, по которому вы сможете проверить на доступность важные части сайта. После этого запустите автоматическое сканирование еще раз, чтобы убедиться, что все проблемы устранены.
Совет: используйте автоматическое сканирование каждый раз, когда вносите изменения в опубликованную версию сайта. Зачастую правки, которые кажутся незначительными, могут существенно повлиять на уровень доступности.