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

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

С 1 января 2016 года образовательные учреждения и государственные организации должны оснастить свои сайты версией для слабовидящих.

«Порядок обеспечения условий доступности для инвалидов по зрению официальных сайтов федеральных органов государственной власти, органов государственной власти субъектов Российской Федерации и органов местного самоуправления в сети «Интернет» устанавливается уполномоченным Правительством Российской Федерации федеральным органом исполнительной власти.»

Источник: Изменения в Статье №10 ФЗ-8 от 9 февраля 2009 года.

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

Что такое версия для слабовидящих?

Это специальная версия сайта адаптированная для людей у которых есть трудности со зрением. Говоря простым языком: на сайте должны использоваться контрастные цвета (например черный и белый цвет), шрифты должны быть крупными, отсутствовать мелкие декоративные элементы, усложняющие восприятие сайта.

Если же изучать тему с формальной точки зрения, то существует ГОСТ Р 52872-2012 «Интернет-ресурсы. Требования доступности для инвалидов по зрению.». Согласно этому документу существует несколько стандартов, доступности информации, например «Уровень А — уровень минимальной доступности. Позволяет инвалиду по зрению обеспечить доступность к интернет-ресурсу без потерь информации».

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

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

Можно ли установить версию для слабовидящих бесплатно?

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

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

Как выглядит версия для слабовидящих на конструкторе сайтов Nubex

Во все шаблоны сайта мы встроили специальную кнопку, которая размещается в левой колонке. Выглядит она вот так:

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

Посмотреть, как выглядит рабочая версия для слабовидящих на Nubex, можно на примере сайта для детского садика.

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

В случае если вы используете наш конструктор сайтов Nubex, это можно сделать в несколько кликов следующим образом. В шаблонах профильных организаций уже встроена работающая версия для слабовидящих, достаточно разместить специальную ссылку на нее. Делается это следующим образом:

1. Для этого зайдите в главное меню системы управления сайтом: «Документы сайта» -> Колонка № 1.
2. Нажмите на голубую стрелочку внутри кнопки «создать текстовый блок» в выпадающем списке выберите «Создать ссылку на версию для слабовидящих».
3. Ссылка на версию отобразиться в левой колонке вашего сайта (можно переместить ее повыше используя кнопку «Изменить порядок».

Готово!

Если на вашем сайте дизайн настроен таким образом, что левая колонка отсутствует на главной, вам придется ее включить. Для этого зайдите в раздел «оформление» -> «настроить тему» -> «настройка композиции» -> в блоке «Разбивка центрального поля главной страницы» выберите вариант с двумя колонками (узкая колонка слева L2).

Что если у меня сайт сделан на другой платформе?

Если же сайт учреждения работает на другой платформе, где до сих пор не подключена подобная версия, то вы можете легко перенести его на современную платформу Nubex. Чтобы сделать это, не нужно быть программистом или обладать специальными знаниями. Достаточно будет посмотреть несколько коротких понятных видеоуроков. В целом создание сайта и перенос основной информации занимает не более 1 часа.

При переходе на Nubex версия для слабовидящих уже будет активирована. Также мы можем сделать вам предложение за небольшую плату перевести ваш сайт под ключ на нашу платформу.

Мы подготовили специальное предложение по созданию сайта детского сада под ключ с переносом информации и подключением всего необходимого, в соответствии с новыми законами и требованиями Рособрнадзора в срок до 5 дней. Подобные предложения составлены и для других учебных заведений или школ.

Преимущество работы с конструктором сайтов Nubex

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

Мы уже не раз обновляли платформу в соответствии с требованиями законодательства, упрощая работу с сайтом для наших клиентов.

Версия для слабовидящих

Чтобы включить версию для слабовидящих, нажмите Версия для слабовидящих внизу страницы.

В этом режиме увеличены шрифты и уменьшено количество элементов на странице.

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

Помогла ли вам статья?

Оцените статью

Спасибо за ваш отзыв!

Спасибо за ваш отзыв!

Из какой вы страны?

• Россия
• Беларусь
• Казахстан
• Кыргызстан
• Армения
• Узбекистан

Как сделать сайт доступным
для незрячих и слабовидящих?

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

Теперь же возник новый тренд — “доступность”. Ведь сейчас сайты просматривают не только с больших мониторов в спокойной обстановке, но и со смартфонов в трясущихся автобусах и ноутбуков в шумных кафе, а среди пользователей появляется все больше пенсионеров и даже людей с ограниченными возможностями.

Когда задумались о доступности?

В 1996 году был создан Консорциум Всемирной Паутины (World Wide Web Consortium, W3C), и на одной из встреч был предложен черновик гайдлайнов для улучшения доступности веба. Инициатива получила поддержку таких крупных спонсоров, как Microsoft, IBM, Adobe, и сейчас все популярные браузеры имеют настройки доступности и поддержку разметки WAI-ARIA для предоставления возможности полноценного использования Интернета людям с физическими ограничениями (нарушения работы органов зрения и опорно-двигательного аппарата).

Сейчас существуют руководства для веба с целью повышения доступности контента: международный стандарт WCAG2.0 для пользователей с различными ограничениями здоровья (зрение, слух, моторика и т.д.) и российский национальный стандарт доступности веб-ресурсов для инвалидов по зрению ГОСТ Р 52872-2019 . Они разрабатывались для людей с нарушениями здоровья, однако использование тех же принципов повысит уровень комфорта в работе с сайтом и для здоровых людей. Ведь люди могут просто устать или же читать сайт с маленького телефона с тусклым экраном, на котором плохо виден текст.

Экология доступности

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

1. Масштабируемая верстка

(5.1.7.7 ГОСТ Р 52872-2019 : размер шрифта текста может быть изменен в пределах 200 процентов без применения вспомогательных технологий таким образом, что пользователю не нужно прибегать к горизонтальной прокрутке для прочтения строки при режиме отображения страницы во весь экран).

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

В качестве удачного примера использования масштабируемой верстки можно привести сайт Центрального Банка РФ . Масштаб сайта можно увеличить в браузере не только до 200%, но и до 500% без появления горизонтальной прокрутки.

На скриншоте: увеличение масштаба до 200%. Полосы прокрутки нет

2. Достаточная контрастность текста и фона

(5.1.7.3 ГОСТ Р 52872-2019 : Визуальное отображение текста и изображения текста имеет коэффициент контрастности не менее 4,5:1).

Важно, чтобы основной текст на сайте можно было легко прочитать с экранов разной яркости и качества.Также существует множество людей с различными нарушениями зрения. Например, пользователи с расстройствами цветового зрения просто не увидят текст или смогут разглядеть его с большим трудом, если он не будет контрастен фону. Часто при разработке брендбуков не принимают во внимание эту рекомендацию в погоне за красивым дизайном, а потом оказывается, что текст на сайте сложно читать.

Контрастность текстов можно проверить с помощью чекеров контрастности, например Colour Contrast Analyser , или расширений для браузера, например “Contrast Ratio Checker” для Chrome. Существуют даже онлайн-чекеры контрастности, не требующие установки на компьютер.

На сайте Пенсионного Фонда РФ основной текст имеет достаточную контрастность, 14:1.

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

3. Возможность работать с сервисом с помощью клавиатуры

(5.2.1.1 ГОСТ Р 52872-2019 : Всей функциональностью контента можно управлять через интерфейс клавиатуры без каких-либо ограничений по времени нажатия на клавишу, за исключением случаев, когда вызываемая функция требует ввода с помощью других устройств, зависящего от направления движения пользователя, а не только от конечной точки. Это не запрещает и не должно препятствовать предоставлению возможностей ввода с помощью мыши и других способов в дополнение к клавиатуре).

Переключение между клавиатурой и мышкой — временны́е затраты, которые можно минимизировать, если корректно работает TAB и ENTER. Многие из нас пользуются клавиатурой для навигации, даже не задумываясь над этим.

Люди с нарушениями здоровья могут не пользоваться мышкой из-за проблем с мелкой моторикой. А незрячие люди могут пользоваться экранными дикторами — программами для озвучивания текста на экране. В таких случаях важно, чтобы на сайте корректно работал фокус (при нажатии на кнопку TAB выделялась следующая ссылка/кнопка, а также в строке состояния браузера отображалась ссылка, куда будет совершен переход).

Работа с клавиатурой на сайте хорошо реализована на сайте Госуслуг .

Госуслуги: при нажатии кнопки TAB фокус переключается последовательно на каждую кнопку/ссылку.

Если посмотреть на сайты иностранных коллег, например на сайте банка Barclays реализована возможность пропустить повторяющиеся элементы (верхнее меню) при управлении с клавиатуры. Она включается только по клавише TAB.

На скриншоте видно, что пропускается все сквозное верхнее меню и идет переход сразу к первой кнопке на странице.

Это ускоряет доступ к нужному контенту при управлении с клавиатуры при просмотре сайта.

Как можно заметить, большая часть требований — технические, относящиеся к верстке сайта.

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

Что делать, если с версткой сайта все плохо? Панель комфортного чтения!

Хорошего эффекта можно добиться без исправления верстки всего сайта. Например, на многих государственных сайтах используется такое решение, как “Панель для слабовидящих”, которая решает вопрос с контрастностью и размером шрифта. С помощью нее можно добавить функции, которые удовлетворят потребности людей с ограниченными возможностями — например, возможность настроить отображение цвета на сайте поможет людям с дальтонизмом, а увеличение интервалов между буквами и строчками, а также настройка шрифта с засечками — людям с дислексией, для которых рядом стоящие буквы меняются при чтении местами.
Такая панель хорошо реализована на уже упоминавшемся выше сайте ПФРФ.

Также удачный вариант ее реализации — на сайте Росбанка. В ней используются иные настройки цветовой схемы, чем у ПФРФ.

Панель комфортного чтения на сайте Росбанка.

В 2018 году такая панель появилась и на сайте ВТБ .

Панель комфортного чтения на обновленном сайте ВТБ.

На сайте Пенсионного Фонда РФ есть несколько иные варианты настройки контрастности, а также встроен свой собственный “экранный диктор”, благодаря чему не требуется запуск дополнительных программ.

Панель комфортного чтения на сайте ПФРФ (с примененной настройкой контрастности)

Для установки подобной панели не обязательно иметь доступ к исходному коду сайта. Существуют подобные плагины и для популярных CMS, которые может установить практически каждый без особенных затрат, поскольку установка плагина осуществляется либо автоматически, либо требует не слишком трудоемких манипуляций пользователя с готовым скриптом. Например, можно использовать плагин Comfortable Reading (для WordPress и Joomla).

Пример настройки сайта с помощью плагина Comfortable Reading

Есть панель — нет проблем? Все не так просто!

Рассмотрим сайты, где такой функционал есть, но имеются проблемы с его реализацией. Проблемы можно разделить на три основных типа:

1. Ограниченный функционал

Используются только настройки размера шрифта и цвета. Это повышает комфортность чтения для слабовидящих людей, однако оставляет без внимания потребности людей, например, с дислексией, которым все равно будет сложно читать текст: буквы будут сливаться. Таким людям помогли бы, к примеру, увеличение расстояние между буквами и шрифт с засечками.

Пример: сайт Генпрокуратуры РФ . Имеются настройки размера шрифта и три варианта цветовой схемы.

2. Отдельная версия сайта для слабовидящих

Версия для слабовидящих находится на отдельном URL. Также на ней может отсутствовать часть контента по сравнению с обычной версией. Это не самое удачное решение, поскольку нужно поддерживать две отдельных версии сайта, что ведет к дополнительным затратам. Такой вариант используется, например, на http://kremlin.ru/ .

3. Проблемы работы с экранным диктором

На некоторых сайтах хорошо реализована панель для настроек ( ПФРФ ) или адаптивная версия ( Госуслуги ), но есть проблемы взаимодействия с программами экранных дикторов. Например, не озвучивается часть контента или сложно установить фокус на элемент при включенной программе диктора.

О проблемах работы интернет-банков и мобильных приложений с экранным диктором компания USABILTIYALB подробно рассказывала на банковском завтраке в сентябре 2017 года.

4. Версию для слабовидящих сложно найти даже зрячему человеку

Например, используются очень бледные, незаметные иконки, как на сайте Счетной палаты РФ :

Смогли бы вы сразу заметить иконку, если бы она не была выделена на скриншоте?

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

Пример нестандартной иконки

Как можно заметить, единого стандарта на разработку версии сайта для слабовидящих не существует. Так, в нескольких рассмотренных выше решениях с панелью для настроек чтения сайта используются разные параметры и цветовые схемы, где-то отсутствует часть функционала.

Заключение

Мы видим, что развитие юзабилити и доступности на данный момент идет не столько со стороны бизнеса, сколько со стороны государства. Проблемы доступности активно обсуждаются и решаются в банковской сфере , при поддержке ЦБРФ.

1 января 2016 года вступил в силу Федеральный закон № 419-ФЗ «О внесении изменений в отдельные законодательные акты Российской Федерации по вопросам социальной защиты инвалидов в связи с ратификацией конвенции о правах инвалидов», и большинство государственных сайтов добавили версию для слабовидящих. Однако на некоторых из них такая версия отсутствует.

Доступность сайтов важна не только для государственных сайтов, но и для бизнеса. Следование рекомендациям по повышению уровня доступности уже поможет расширить аудиторию не только за счет лиц с инвалидностью, но и за счет улучшения пользовательских качеств сайта для широкой аудитории и нас с вами. Конечно, для принятия максимально эффективных мер необходимо провести аудит текущей версии сайта, составить ТЗ на верстку, соответствующую рекомендациям, или как минимум внедрить панель комфортного чтения.

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

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

Нашли ошибку? Выделите мышкой и нажмите Ctrl+Enter

Версия для слабовидящих

Наличие версии для слабовидящих — обязательное условие для сайтов государственных учреждений, а также медицинских и образовательных организаций. В Аспро: Корпоративный сайт 3.0 соответствующий функционал доступен с версии 1.1.3.

В Аспро: Корпоративный сайт 3.0 версия для слабовидящих активируется кнопкой в шапке или футере сайта.

В версии для слабовидящих над шапкой сайта отображается дополнительное меню. Здесь пользователь может управлять:

• Размером шрифта (1) — выбрать уменьшенный, нормальный или увеличенный.
• Цветовой схемой (2) — выбрать удобное сочетания фона и шрифта. С версии решения 1.2.2 доступно 5 сочетаний: черным по белому, белым по черному, синим по голубому, черным по желтому и зеленым по черному.
• Отображением изображений (3). При включенной настройке на сайте будут отображаться картинки. Если настройка неактивна, изображения будут отключены, а пользователь сможет сосредоточиться на тексте.
• Озвучивание текста (4). При включенной настройке весь текст, который выделен на сайте курсором, будет озвучен компьютером.
• Пользователь также может отключить версию для слабовидящих. Для этого нужно нажать кнопку «Обычная версия сайта» (5).

По умолчанию версия для слабовидящих отключена. Чтобы включить ее, нужно активировать кнопку переключения в обоих шапках сайта — фиксированной и обычной, а также в футере сайта.

Для этого в публичной части сайта откройте виджет настроек.

Перейдите во вкладку «Шапка» (1). В выбранном типе отображения фиксированной шапки откройте «Состав шапки» (2) и активируйте переключатель версии для слабовидящих (3).

То же самое проделайте с выбранным вариантом шапки ниже.

Теперь повторяем операция с футером: перейдите во вкладку «Футер» (1). В выбранном типе отображения откройте «Состав футера» (2) и активируйте переключатель версии для слабовидящих (3).

То же самое можно проделать и в административной части сайта. Для этого переходим в «Аспро» (1) — «Аспро: Allcorp3» (2) — Настройки (3). Переходим во вкладку «Шапка» (4) и на выбранном типе шапки ставим галочку в пункте «Версия для слабовидящих» (5). Аналогично с настройкой футера сайта.

Готово. Кнопка активации версии для слабовидящих появилась в шапке сайта.