Что такое версия для слабовидящих на сайте
Как сделать сайт доступным для незрячих и слабовидящих?
Если проследить эволюцию создания сайтов и сервисов, то можно заметить, что сначала было важно, чтобы они хотя бы были и работали. Затем создатели стали задумываться о внешней красоте и привлекательности для клиентов, ну а потом постепенно стали ориентироваться и на удобство для пользователей.
Теперь же возник новый тренд — “доступность”. Ведь сейчас сайты просматривают не только с больших мониторов в спокойной обстановке, но и со смартфонов в трясущихся автобусах и ноутбуков в шумных кафе, а среди пользователей появляется все больше пенсионеров и даже людей с ограниченными возможностями.
Когда задумались о доступности?
В 1996 году был создан Консорциум Всемирной Паутины (World Wide Web Consortium, W3C), и на одной из встреч был предложен черновик гайдлайнов для улучшения доступности веба. Инициатива получила поддержку таких крупных спонсоров, как Microsoft, IBM, Adobe, и сейчас все популярные браузеры имеют настройки доступности и поддержку разметки WAI-ARIA для предоставления возможности полноценного использования Интернета людям с физическими ограничениями (нарушения работы органов зрения и опорно-двигательного аппарата).
Сейчас существуют руководства для веба с целью повышения доступности контента: международный стандарт WCAG2.0 для пользователей с различными ограничениями здоровья (зрение, слух, моторика и т.д.) и российский национальный стандарт доступности веб-ресурсов для инвалидов по зрению ГОСТ Р 52872-2012. Они разрабатывались для людей с нарушениями здоровья, однако использование тех же принципов повысит уровень комфорта в работе с сайтом и для здоровых людей. Ведь люди могут просто устать или же читать сайт с маленького телефона с тусклым экраном, на котором плохо виден текст.
Экология доступности
Среди огромного количества рекомендаций по повышению уровня доступности мы выделили три типа, которым желательно следовать на любых массовых сайтах — как сайтах банков или госструктур, так и развлекательных. Соблюдение этих рекомендаций поможет не только слабовидящим людям, но и нам с вами!
1. Масштабируемая верстка
(5.1.7.7 ГОСТ Р 52872-2012: размер шрифта текста может быть изменен в пределах 200 процентов без применения вспомогательных технологий таким образом, что пользователю не нужно прибегать к горизонтальной прокрутке для прочтения строки при режиме отображения страницы во весь экран).
Масштабируемая верстка будет полезна и для массовых пользователей — например, когда они заходят на сайт с устройства с маленьким экраном.
В качестве удачного примера использования масштабируемой верстки можно привести сайт Центрального Банка РФ. Масштаб сайта можно увеличить в браузере не только до 200%, но и до 500% без появления горизонтальной прокрутки.
На скриншоте: увеличение масштаба до 200%. Полосы прокрутки нет
2. Достаточная контрастность текста и фона
(5.1.7.3 ГОСТ Р 52872-2012: Визуальное отображение текста и изображения текста имеет коэффициент контрастности не менее 4,5:1).
Важно, чтобы основной текст на сайте можно было легко прочитать с экранов разной яркости и качества.Также существует множество людей с различными нарушениями зрения. Например, пользователи с расстройствами цветового зрения просто не увидят текст или смогут разглядеть его с большим трудом, если он не будет контрастен фону. Часто при разработке брендбуков не принимают во внимание эту рекомендацию в погоне за красивым дизайном, а потом оказывается, что текст на сайте сложно читать.
Контрастность текстов можно проверить с помощью чекеров контрастности, например Colour Contrast Analyser, или расширений для браузера, например “Contrast Ratio Checker” для Chrome. Существуют даже онлайн-чекеры контрастности, не требующие установки на компьютер.
На сайте Пенсионного Фонда РФ основной текст имеет достаточную контрастность, 14:1.
Для дополнительного текста (подсказок, рекламных материалов) требования к контрастности чуть менее строгие.
3. Возможность работать с сервисом с помощью клавиатуры
(5.2.1.1 ГОСТ Р 52872-2012: Всей функциональностью контента можно управлять через интерфейс клавиатуры без каких-либо ограничений по времени нажатия на клавишу, за исключением случаев, когда вызываемая функция требует ввода с помощью других устройств, зависящего от направления движения пользователя, а не только от конечной точки. Это не запрещает и не должно препятствовать предоставлению возможностей ввода с помощью мыши и других способов в дополнение к клавиатуре).
Переключение между клавиатурой и мышкой — временны́е затраты, которые можно минимизировать, если корректно работает 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-ФЗ «О внесении изменений в отдельные законодательные акты Российской Федерации по вопросам социальной защиты инвалидов в связи с ратификацией конвенции о правах инвалидов», и большинство государственных сайтов добавили версию для слабовидящих. Однако на некоторых из них такая версия отсутствует.
Доступность сайтов важна не только для государственных сайтов, но и для бизнеса. Следование рекомендациям по повышению уровня доступности уже поможет расширить аудиторию не только за счет лиц с инвалидностью, но и за счет улучшения пользовательских качеств сайта для широкой аудитории и нас с вами. Конечно, для принятия максимально эффективных мер необходимо провести аудит текущей версии сайта, составить ТЗ на верстку, соответствующую рекомендациям, или как минимум внедрить панель комфортного чтения.
По нашему мнению, в ближайшем будущем появятся и стандарты для панели для слабовидящих, и правила “хорошего тона” верстки будет соблюдаться все чаще и чаще!
Как сделать версию для слабовидящих на вашем сайте
С 1 января 2016 года образовательные учреждения и государственные организации должны оснастить свои сайты версией для слабовидящих.
«Порядок обеспечения условий доступности для инвалидов по зрению официальных сайтов федеральных органов государственной власти, органов государственной власти субъектов Российской Федерации и органов местного самоуправления в сети «Интернет» устанавливается уполномоченным Правительством Российской Федерации федеральным органом исполнительной власти.»
Источник: Изменения в Статье №10 ФЗ-8 от 9 февраля 2009 года.
Изменения в законе касаются очень многих: это и администрации городских и сельских поселений, детские сады, школы, автошколы, колледжи и техникумы, учреждения здравоохранения и многие другие.
Что такое версия для слабовидящих?
Это специальная версия сайта адаптированная для людей у которых есть трудности со зрением. Говоря простым языком: на сайте должны использоваться контрастные цвета (например черный и белый цвет), шрифты должны быть крупными, отсутствовать мелкие декоративные элементы, усложняющие восприятие сайта.
Если же изучать тему с формальной точки зрения, то существует ГОСТ Р 52872-2012 «Интернет-ресурсы. Требования доступности для инвалидов по зрению.». Согласно этому документу существует несколько стандартов, доступности информации, например «Уровень А — уровень минимальной доступности. Позволяет инвалиду по зрению обеспечить доступность к интернет-ресурсу без потерь информации».
Если следовать букве закона, то на сайтах, где требуется использование версии для слабовидящих, необходимо размещать кнопку или ссылку включающую данный функционал, где должны быть предусмотрены специальные функции, например по увеличению шрифта.
В рамках стандартных возможностей по работе с текстами сайта, такие требования не обеспечить. А значит сайт придется оснащать специальными техническими средствами.
Можно ли установить версию для слабовидящих бесплатно?
Многие организации уже задумались о том, чтобы привести свои сайты в соответствие с новым законодательством. В наиболее выигрышном положении оказались те, чьи сайты находятся на современных платформах, позволяющих быстро и удобно внести соответствующие обновления. Некоторые компании-разработчики заранее позаботились о своих клиентах и самостоятельно уже предоставили им доступ к версии сайта для слабовидящих.
Например, в конструкторе сайтов Nubex уже прошло обновление, позволяющее подключить эту версию. Все организации, использующие сайты на данной платформе, получили обновление бесплатно. Никакая дополнительная переделка сайта при этом не требовалась. Функционал автоматически появился на сайтах государственных учреждений, детских садов и школ. А прочие компании по желанию могут ее активировать на своем сайте, просто добавив специальную ссылку.
Как выглядит версия для слабовидящих на конструкторе сайтов Nubex
Во все шаблоны сайта мы встроили специальную кнопку, которая размещается в левой колонке. Выглядит она вот так:
При нажатии на эту кнопку, открывается специальная панель управления шрифтами и цветами сайта для инвалидов по зрению, а сам сайт перекрашивается, убираются лишние декоративные элементы, шрифт упрощается и становиться крупнее.
Посмотреть, как выглядит рабочая версия для слабовидящих на Nubex, можно на примере сайта для детского садика.
Как установить на сайт версию для слабовидящих?
В случае если вы используете наш конструктор сайтов Nubex, это можно сделать в несколько кликов следующим образом. В шаблонах профильных организаций уже встроена работающая версия для слабовидящих, достаточно разместить специальную ссылку на нее. Делается это следующим образом:
Готово!
Что если у меня сайт сделан на другой платформе?
Если же сайт учреждения работает на другой платформе, где до сих пор не подключена подобная версия, то вы можете легко перенести его на современную платформу Nubex. Чтобы сделать это, не нужно быть программистом или обладать специальными знаниями. Достаточно будет посмотреть несколько коротких понятных видеоуроков. В целом создание сайта и перенос основной информации занимает не более 1 часа.
При переходе на Nubex версия для слабовидящих уже будет активирована. Также мы можем сделать вам предложение за небольшую плату перевести ваш сайт под ключ на нашу платформу.
Мы подготовили специальное предложение по созданию сайта детского сада под ключ с переносом информации и подключением всего необходимого, в соответствии с новыми законами и требованиями Рособрнадзора в срок до 5 дней. Подобные предложения составлены и для других учебных заведений или школ.
Преимущество работы с конструктором сайтов Nubex
Наверняка законодательство еще не раз будет меняться, а в месте с ним будут изменяться и требования к сайтам. Команда разработчиков Nubex внимательно отслеживает все обязательные нововведения и своевременно выпускает обновления, позволяющие сайтам соответствовать новым требованиям. Поэтому, если ваш ресурс работает на этой платформе, вы будете готовы к любым законодательным изменениям, касающимся сайтов.
Мы уже не раз обновляли платформу в соответствии с требованиями законодательства, упрощая работу с сайтом для наших клиентов.
Как сделать версию сайта для слабовидящих
Версия для слабовидящих должна быть обязательно на сайтах госструктур, медицинских и образовательных учреждений. Использовать такую версию рекомендуется и коммерческим сайтам для увеличения аудитории посетителей.
Низкое зрение пользователей необходимо учитывать при создании сайта. Таким людям сложно ориентироваться на ресурсе без адаптации под их потребности.
Как сделать версию сайта для слабовидящих
При создании адаптивного шаблона сайта важно учитывать характер разных заболеваний людей с ограниченными возможностями. Например, при дальтонизме нарушено восприятие цветов и их оттенков. Астигматизм означает нарушение четкости восприятия текста и картинок. В некоторых случаях простое увеличение шрифта не помогает человеку со слабым зрением понять, что написано на 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 также подходит вариант с установкой скрипта и созданием отдельной версии на поддомене. Важно, чтобы кнопка переключения была заметна человеку с плохим зрением. Перед запуском плагина или скрипта его необходимо протестировать на корректность работы. В некоторых случаях не срабатывает диктор либо не получается переключить управление с мыши на клавиатуру. Все проблемы нужно устранить до активации адаптивной версии сайта.
Адаптация сайта для слабовидящих: 18 требований, 2 плагина и 9 мифов
В статье мы расскажем:
Адаптация сайта для слабовидящих стала востребована после внесения в прошлом году изменений в ГОСТ о требованиях доступности интернет-ресурсов для инвалидов по зрению. Это не прихоть чиновников, а действительно важные поправки. В России зарегистрировано 13 млн слабовидящих людей. Вы только представьте, сколько человек не могут воспользоваться вашим сайтом, рассчитанным на здоровых пользователей, из-за проблем со зрением.
Разработать версию для слабовидящих людей можно разными способами — от использования плагина до внедрения скриптов. Все варианты рабочие и легко настраиваемые, но лучше сразу продумать доступность ресурса на этапе разработки, чтобы потом не пришлось ничего докручивать до выдвигаемых требований.
Адаптация сайта для слабовидящих по закону
В соответствии с ;законодательством Российской Федерации во избежание нарушения прав людей с ограниченными возможностями у любого интернет-ресурса должна быть версия для слабовидящих. Вместе с тем государство контролирует соблюдение данных требований лишь по отношению к сайтам:
органов государственной и муниципальной власти;
учреждений культуры и искусства;
Каждый из этих ресурсов должен иметь версию для пользователей с ослабленным зрением.
Создавая версию сайта для слабовидящих, разработчик действует согласно ГОСТ Р 52 872 – 2012 «Требования доступности интернет-ресурсов для инвалидов по зрению». Согласно данному документу существует три уровня доступности сайта для слабовидящих:
специализированный сайт, предназначенный для инвалидов по зрению (ААА).
Идеальный вариант — это уровень ААА, однако технический потенциал для соблюдения всех требований есть не всегда. Поэтому во избежание штрафов и санкций от проверяющих органов разработчику следует предусмотреть на сайте версию минимального уровня доступности (А).
Версия для слабовидящих представляет собой специальную версию сайта, адаптированную для людей, которые имеют проблемы со зрением. Проще говоря, интернет-ресурс должен быть оформлен контрастными цветами (к примеру, черным и белым) и крупными шрифтами. Кроме того, на его страницах не должно быть мелких декоративных элементов, которые значительно усложняют восприятие сайта.
Доступность чрезвычайно важна не только для сайтов государственных организаций и учреждений, но и для интернет-площадок бизнеса. Соблюдая рекомендации по повышению уровня доступности, вы сможете увеличить охват аудитории не только за счет людей с инвалидностью, но и благодаря улучшению пользовательских качеств для широкой аудитории.
18 требований к версии сайта для слабовидящих
Этот раздел содержит простое объяснение требований, которым должна соответствовать версия сайта для слабовидящих, чтобы им без проблем пользовались инвалиды по зрению, а собственнику ресурса не пришлось платить штраф.
Шрифт увеличивается до 200 % без появления горизонтальной полосы прокрутки. Добиться такого эффекта позволяет масштабируемая верстка.
Встроенная функция увеличения шрифта
Адаптация сайтов для слабовидящих предполагает наличие в панели управления встроенного инструмента увеличения шрифта (без необходимости изменять его в браузере).
Существует множество заболеваний глаз, при одних человек способен распознать, что изображено на картинках, при других — нет. В версии для слабовидящих следует предусмотреть возможность включения и отключения изображений.
Цвет не является способом передачи информации
В ходе адаптации сайта под слабовидящих допустимо использование не только черно-белого, но и цветного интерфейса. При этом примите во внимание, что цвет не должен служить способом передачи информации (к примеру, «заполните зеленые поля» — человек, который не различает цвета, просто не способен это сделать).
Медиаконтент заменяется текстом
Чтобы обеспечить более эффективную индексацию страниц и SEO-продвижения, атрибут Alt для изображений следует прописывать с применением ключевых фраз. Однако в ходе работы над версией сайта для слабовидящих рекомендуется вспомнить истинное назначение атрибута Alt как альтернативного текста к изображению. Прописывая Alt не ключами, а в зависимости от объекта, изображенного на картинке, вы дарите возможность пользователю со слабым зрением лучше понять контент на странице.
Вся графическая и медиаинформация на сайте должна сопровождаться текстовым аналогом. Речь идет не только о картинках, видео, кнопках, но также о полях формы и фоновых элементах дизайна (если они способствуют лучшему пониманию контента).
Контрастность фона и контента
Минимальное значение коэффициента контрастности текста к фону и значимым элементам дизайна — 7:1, если речь идет об увеличенном тексте — 4,5:1. Существует множество сервисов, которые позволяют проверить это соотношение. К примеру, в Webaim Contrast Checker достаточно ввести HEX-номера обоих цветов в формате #FFFFFF и на экране появится коэффициент. Если вы используете Figma, то решить эту задачу поможет плагин Stark.
Требования относительно контрастности, масштабирования и подписывания альтернативным текстом не относятся к логотипу компании. Если вы располагаете лого в монохромном исполнении, смело используйте его, если нет — просто оставьте все как есть.
Предоставьте пользователю возможность выбрать цвет верхнего слоя и фона из 5 следующих вариантов:
коричневый на бежевом;
темно-синий на голубом;
зеленый на темно-коричневом.
Выбор должен быть обусловлен особенностями цветовосприятия при различных нарушениях зрения: человек может легко различать одни цвета и при этом совершенно не видеть другие.
Согласно ГОСТу длина страницы не должна превышать 2-3 экранов. Иными словами, полноценный лендинг несовместим с версией для слабовидящих.
Отсутствие посторонних включений
Повествование следует вести линейно, не отвлекая пользователей. Людям со слабым зрением и без того сложно дается восприятие электронного контента, а из-за лишних отступлений, блоков рекламы и неоправданной перелинковки ситуация значительно усугубляется. Посторонние включения, дополнительная информация об акциях, блоки «читайте также» посреди статьи, автоматически всплывающие окна — все это существенно мешает слабовидящим пользователям.
Чтобы обеспечить адаптацию сайта для слепых, откажитесь от использования капчи. Если же сделать это невозможно, установите капчу с аудиоверсией.
Управление с клавиатуры
Одно из самых сложных в реализации требований заключается в том, что любые действия на сайте в адаптации для слабовидящих должны быть осуществимы с использованием исключительно клавиатуры, без необходимости применять мышь. Перемещение по странице осуществляется кнопками вверх-вниз. Для выделения элементов применяется пробел, для переключения — клавиша Tab, для подтверждения действий — Enter. Это требование предъявляется к доступности сайтов для людей с нарушением моторики рук, однако по ГОСТу ему должны соответствовать и версии для слабовидящих.
Отсутствие ограничений по времени
На ресурсе не должно быть действий, которые совершаются с временными ограничениями (к примеру, перенаправление на другую страницу через N секунд). Инвалиды по зрению нуждаются в достаточном количестве времени, чтобы прочитать контент.
Аккуратная верстка текста
Весь контент следует по возможности размещать на страницах сайта. Иными словами, его адаптация для слабовидящих не предполагает использование pdf-файлов для скачивания. Если без них не обойтись, обязательно проверьте, чтобы они без проблем масштабировались.
Таблицы на сайте должны иметь простую структуру — несколько уровней вложенности в шапке будут неуместны.
Требования относительно кеглей шрифта, отступов, интервалов, интерлиньяжа
Согласно ГОСТу критерии к разметке текстового контента выглядят следующим образом:
ширина строки не превышает 80 символов;
не следует использовать функцию выравнивания по ширине;
межстрочный интервал внутри абзаца минимум в 1,5 раза больше, чем кегль шрифта;
отступы между абзацами минимум в 1,5 раза больше, чем межстрочный интервал, и минимум в 2 раза больше, нежели кегль шрифта;
интервал между буквами составляет минимум 0,12 от кегля шрифта;
интервал между словами не должен быть меньше 0,16 от кегля шрифта.
Ридеры для слабовидящих и слепых
Важно, чтобы программы экранного доступа для людей с ослабленным зрением корректно функционировали на сайте (речь идет о Jaws for Windows, ONYX camera, MAGic, NVDA, дисплее Брайля). Обязательно протестируйте, корректно ли работают эти сервисы на вашем сайте, вся ли информация считывается правильно.
4 варианта создания версии сайта для слабовидящих
Создавая адаптивный шаблон сайта, примите во внимание особенности заболеваний слабовидящих людей. К примеру, астигматизм характеризуется нарушением четкости восприятия текста и картинок, а при дальтонизме человек не способен адекватно различать цвета и их оттенки. Простое увеличение шрифта далеко не всегда позволяет человеку с ослабленным зрением понять содержание web-страницы. Поэтому так важно пользоваться дополнительными параметрами настройки дизайна.
В стандартных плагинах учтены все существующие нарушения зрения. При создании уникальной версии адаптации сайта для слабовидящих важно предусмотреть следующие возможности:
увеличение шрифта на 200 % и более (без горизонтальной прокрутки);
функцию управления клавиатурой;
выбор цвета текста и фона;
изменение интервалов шрифта.
Для проверки контрастности текста на сайте используйте специальные программы, расширения для браузеров и онлайн-инструменты (к примеру, Color Contrast Analyser).
Как создать адаптивную версию для людей с ослабленным зрением:
Внедрите уникальный скрипт (его необходимо заказать у программиста).
Используйте демоверсии стандартных скриптов и плагинов (бесплатно или за символическую плату).
Разработайте отдельную версию ресурса на поддомене. Это самый затратный вариант, ведь для его реализации потребуется обратиться к услугам верстальщика и дизайнера.
Создайте адаптивный шаблон для существующего сайта.
Установка скрипта для слабовидящих
В образце применяется шрифт ligature symbols, но у вас есть возможность заменить его на любой другой.
Далее после закрывающего тега вставьте еще один участок кода:
Это и есть описание шаблона, активация которого осуществляется при нажатии кнопки перехода на версию сайта для людей с ослабленным зрением. Кроме того, в этот момент активируется панель настроек шрифта, изображений и цветов. Чтобы шаблон начал функционировать, добавьте кнопку в любое место на странице, используя следующий участок кода:
Его следует добавить именно в том месте, где бы вы хотели видеть кнопку перехода к адаптивной версии сайта. Чтобы скрипт окончательно загрузился, в конце страницы рекомендуется добавить еще одну строку:
2 плагина WordPress для слабовидящих
Чтобы упростить процесс адаптации сайта для людей с ослабленным зрением, используйте бесплатные и платные плагины (к примеру, Button visually impaired или For the visually impaired).
Для сайтов на WordPress можно использовать вариант с созданием отдельной версии на поддомене и установкой скрипта. Убедитесь, что кнопка переключения хорошо видна человеку с ослабленным зрением. Прежде чем запускать плагин или скрипт, протестируйте корректность их работы. Чаще всего проблемы связаны с функционированием диктора или при переключении управления с мыши на клавиатуру. Любые неисправности следует устранить до того, как адаптивная версия сайта станет доступна пользователям.
Панели для слабовидящих
Вы наверняка заметили, что значительная часть требований носит технический характер и касается верстки. Вместе с тем вы можете добиться заметного результата и без подобных корректировок. В качестве примера можно привести сайты многих государственных структур с панелью для слабовидящих, которая обеспечивает необходимый уровень контрастности и размер шрифта. Данный инструмент позволяет предусмотреть функции, которые соответствуют нуждам людей с ослабленным зрением: настройку отображения цвета на сайте (особенно актуально при дальтонизме), увеличение интервалов между буквами и строчками, шрифт с засечками (для пользователей с дислексией, которым сложно читать и понимать тексты из-за особенностей работы мозга).
Удачные варианты реализации панели для слабовидящих можно увидеть на сайте Росбанка, а также ПФ РФ, причем настройки цветовой схемы данных ресурсов имеют существенные отличия. В 2018 году подобный инструмент был внедрен в работу сайта ВТБ. Сайт Пенсионного фонда РФ отличается определенными настройки контрастности, а также наличием собственного экранного диктора, который не требует запуска дополнительных программ.
Чтобы установить подобную панель, иметь доступ к исходному коду сайта вовсе необязательно. Подобные плагины предусмотрены и для популярных CMS и установить их сможет практически каждый, без каких-либо крупных вложений. В качестве примера можно привести плагин Comfortable Reading, применимый для WordPress и Joomla!).
Семантическая верстка
Семантической версткой принято называть корректный подход к созданию веб-страниц, адаптированных для людей с ослабленным зрением. Если вы стремитесь разработать читабельный сайт, без понимания основных принципов семантической верстки вам не обойтись.
Пользователь может не заметить неточности в семантическом HTML-коде, однако скрыть их от поисковых систем невозможно. В ходе адаптации сайта для слабовидящих важно внимательно прописывать:
теги структуры документа (html, head, body);
текстовые теги (p, h1, blockquote);
медиатеги (img, video);
корреляционные теги (ul, ol).
Благодаря качественной семантической верстке вы сможете построить логичную и последовательную иерархию веб-страниц, а также сменить обычную версию сайта на версию для людей с ослабленным зрением и обратно без каких-либо сбоев. Кроме того, сама адаптированная версия сайта будет иметь четкую структуру и функционировать без проблем.
Распространенные ошибки в создании версии сайта для слабовидящих
Неочевидная иконка. Речь идет о кнопке переключения на версию для людей с ослабленным зрением. Ее следует обозначать стандартным образом, привычным пользователю, — это могут быть глаза или очки. Рекомендуется не использовать креативные варианты — для слабовидящего человека все должно быть предельно понятным и очевидным.
Кнопку переключения на адаптивную версию сложно найти. На некоторых ресурсах ее не найдет даже пользователь с отличным зрением. Тщательно продумайте расположение кнопки так, чтобы она была на виду.
Отдельный поддомен. Версию сайта для слабовидящих людей не следует размещать на отдельном поддомене. Из-за такой конфигурации возрастут ваши затраты, поддержка сайта станет сложнее. Кроме того, если поисковые системы обнаружат дублирование контента, вы рискуете попасть под их санкции.
Контента меньше, чем в полной версии. Несомненно,адаптивную версию не нужно перегружать лишними блоками, которые отвлекают внимание от содержимого сайта. Однако нередко разработчики даже полезный контент сокращают наполовину. Не стоит забывать, что основная задача онлайн-ресурса заключается в информативности. Идеальная версия сайта для людей с ослабленным зрением проще не по содержанию, а по форме.
Погрешности в работе экранного диктора. Нередко в ходе адаптации сайта под слабовидящих о встроенном экранном дикторе просто забывают либо он функционирует неправильно: произносит с ошибками, считывает не всю информацию, препятствует выбору элементов на экране в ходе озвучки. Отсюда важная рекомендация — перед запуском сайта тестируйте функцию экранного диктора.
Неполный функционал панели управления. Все чаще адаптивную версию добавляют на сайт исключительно для того, чтобы избежать нарушений законодательства и штрафов, а не для помощи людям с ослабленным зрением. Часто панель управления, которая устанавливается на сайт, включает лишь минимальный функционал и не соответствует нуждам инвалидов по зрению. К примеру, если человек страдает дислексией, ему не поможет увеличение шрифта и изменение цветовой схемы — текст останется нечетким. В данном случае может помочь возможность выбрать шрифт с засечками или настройка, увеличивающая межбуквенное расстояние.
9 мифов про адаптацию сайта для слабовидящих
Миф 1. Скринридер считает любой сайт
Формально это так, однако без адаптации сайта слабовидящим людям будет совершенно неудобно им пользоваться. Предположим, заголовки на страницах интернет-магазина просто написаны капслоком, но не отмечены в верстке. Это лишает незрячего пользователя возможности быстрой навигации по заголовкам, из-за чего он тратит на вашем сайте больше времени, нежели на конкурентском. Вероятнее всего, в будущем желания вернуться на неудобный ресурс у него не возникнет.
Или, предположим, вы зашли на сайт и видите только черный текст на белом фоне. Насколько комфортно и приятно вам было бы пользоваться таким ресурсом? Предпочли бы вы красивый и удобный сайт конкурента?
Миф 2. Адаптировать необходимо лишь основные страницы
На сайте нет мелочей или неважных элементов, которые можно оставить без изменений. Одной из самых распространенных проблем можно назвать неподписанные ссылки в подвале сайтов, где обычно размещают иконки. Закрепленные за ними ссылки ведут на группы в социальных сетях. Пользователь скринридера легко разберется в назначении иконки, если она сопровождается текстовой меткой. Многие разработчики упускают этот момент из виду, хотя он требует совсем немного времени.
Миф 3. Любой человек с ослабленным зрением поможет адаптировать сайт
Привлекайте для адаптации сайта под слабовидящих специалистов в этой области. Не стоит рассчитывать на то, что вы воспользуетесь помощью человека с плохим зрением и он расскажет разработчикам, что именно нужно делать. Незрячий сотрудник может быть настоящим профессионалом в своей области (к примеру, написании текстов или продажах), но при этом он может совершенно не разбираться в адаптивной верстке. Поэтому его советы, вероятнее всего, не принесут пользы.
Миф 4. Приложения и сайты считываются одинаково
Разработчики сделали вывод, что значительная часть крупных компаний успешно справляется с адаптацией сайта для слепых, однако с мобильными приложениями ситуация не столь оптимистична. В данном случае требуется особый подход и специальные знания, которыми большая часть программистов не владеет.
Нередко проблемы связаны с графическим кодом картинки (капчей). В веб-версии сайта предусмотрена возможность распознать капчу с помощью сторонних сервисов, однако в мобильном приложении справиться с этой задачей без помощи зрячего человека просто нереально. Другая распространенная сложность сводится к тому, что по группе кнопок, собранных в одну область, невозможно перемещаться свайпами. К примеру, в приложении авиакомпании все разделы (заказ билетов, личный кабинет, расписание) могут быть объединены в одну группу, поэтому выбрать один из них невозможно.
Миф 5. Можно адаптировать сайты по ГОСТу
В апреле 2020 года в Российской Федерации вступил в силу новый государственный стандарт, объединивший критерии доступности в отношении интернет-сайтов, цифровых программ и мобильных приложений. После этого появилось распространенное заблуждение, что компании могут осуществлять адаптацию своих сервисов по ГОСТу, который регламентирует основные принципы данного процесса и затрагивает визуальную часть. При этом многие забывают, что требования стандарта высшего уровня не распространяются на индивидуальные аспекты (такие как, к примеру, адаптация под скринридер).
В сущности, ГОСТ можно сравнить с международной декларацией, а стандарты для скринридера — с законодательными актами того или иного государства. В тексте государственного стандарта указано, что он может быть дополнен другими нормативными актами, которые не противоречат его основным принципам.
Миф 6. Можно сначала создать сайт, а потом адаптировать
Работа над доступностью — это вовсе не то, что следует выполнять «поверх» готового ресурса. Адаптация сайта под слабовидящих является одной из стадий разработки и не уступает по важности всем остальным. Это утверждение особенно актуально при работе над крупными проектами, ведь вносить правки и изменения после запуска намного сложнее. Кроме того, стоит принять во внимание, что адаптация представляет собой непрерывный процесс. Нужно избегать ситуаций, когда разработчики сначала добавляют новый функционал, выкладывают и уже потом адаптируют. Действовать необходимо в обратном порядке: адаптируйте, вносите корректировки и лишь потом выкладывайте.
Миф 7. Адаптация сервисов стоит дорого
Стоимость работы над доступностью крупных проектов наверняка не будет низкой. А на какие затраты рассчитывать тем, кто стремится адаптировать ресурс, к примеру, небольшого интернет-магазина? Самое главное — не пугайтесь, ведь все зависит от числа пользовательских сценариев на сайте либо в приложении. Если их немного, то сделать адаптацию сайта для слабовидящих можно за небольшие деньги. Для небольших проектов разработчики обычно предлагают более низкие тарифы. Вероятнее всего, доступность станет вашим конкурентным преимуществом и вложения очень скоро окупятся.
Миф 8. Для адаптации подойдет «коробочное» решение
Использование лучших практик многим из нас кажется верным и беспроигрышным решением, однако в реальности эта аксиома работает не всегда. Если речь идет об адаптации сайтов, даже передовые решения «из коробки» и готовые сценарии могут оказаться неэффективными. По этой причине лучше отказаться от услуг разработчика, который предлагает использовать в работе над вашим проектом сразу все лучшие готовые решения. Грамотный специалист знает, что каждый алгоритм необходимо индивидуально адаптировать под потребности пользователей.
Миф 9. Ситуация с доступностью меняется в лучшую сторону
Создается впечатление, что сегодня тема доступности сайтов постоянно на слуху и ситуация постепенно изменяется в лучшую сторону. Однако, к сожалению, поводов для оптимизма не так много. Распространенная проблема заключается в том, что не каждая новая функция адаптирована под скринридер. После внедрения таких опций на сайт или в приложение у людей с ослабленным зрением возникают дополнительные сложности при работе с сервисом. Элементы неадаптированного дизайна скринридер не способен считывать правильно.
Второй фактор, из-за которого положение ухудшается, можно назвать излишней адаптацией. В предыдущем пункте мы уже обсуждали, что желание применить все лучшее сразу редко приводит к хорошему результату. Нередко компании адаптируют свои сайты не для того, чтобы обеспечить удобство незрячих людей, а чтобы поймать на этом хайп. Такой подход в долгосрочной перспективе абсолютно неэффективен.
Штрафы за отсутствие версии сайта для слабовидящих
Если адаптация сайта для слабовидящих не выполнена, закон предусматривает наказание в виде административной или уголовной ответственности:
По Кодексу об административных правонарушениях РФ — штраф от 3 000 рублей (для физических лиц) и 50 000 – 100 000 рублей (для юридических лиц).
По Уголовному кодексу РФ — штраф до 300 000 рублей.
В нашей стране зарегистрировано более 13 миллионов лиц с ограниченными возможностями, что составляет около 10 % населения. Иными словами, практически каждый десятый пользователь Интернета страдает от тех или иных проблем со здоровьем. А если принять во внимание тех, кто использует различные гаджеты (для них описанные принципы также применимы), и пожилых людей, то цифра вырастет до 30–40 %. Согласитесь, это весьма убедительный довод в пользу того, чтобы позаботиться об адаптации своего сайта для посетителей с ослабленным зрением.
Лично мы придерживаемся мнения о том, что вовсе необязательно в точности исполнять требования ГОСТ Р 52 872 – 2012 в каждом проекте: порой этот процесс может оказаться чересчур трудозатратным. Главное — разобраться в основных принципах и применить их в работе. Такой подход позволит вашему сайту стать гораздо более удобным для самых разных пользователей.