Три базовых требования к доступности сайтов
Сейчас существуют руководства для веба с целью повышения доступности контента:
международный стандарт WCAG2.0
для пользователей с различными ограничениями здоровья (зрение, слух, моторика и т.д.)
и российский национальный стандарт доступности веб-ресурсов для инвалидов по зрению
ГОСТ Р 52872-2012. Они разрабатывались для людей с нарушениями здоровья, однако использование тех же принципов повысит комфорт в работе с сайтом и для здоровых людей. Ведь люди могут просто устать, или же читать сайт с маленького телефона с тусклым экраном, на котором плохо виден текст.
Три базовых требования к доступности сайтов
Из всего многообразия рекомендаций к доступности можно выделить 3 базовых требования к сайтам, которые желательно применять на сайтах массовых сервисов (госсектор, банки, развлекательные сайты).
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. Это ускоряет доступ к нужному контенту при управлении с клавиатуры.
Главная страница сайта банка Barclays. При нажатии на TAB пользователь может пропустить весь блок с верхним меню.
Панели для слабовидящих
Как можно заметить, большая часть требований — технические, относящиеся к верстке. Тем не менее хорошего эффекта можно добиться без исправления верстки всего сайта. Например, на многих государственных сайтах используется такое решение как «Панель для слабовидящих», которая решает вопрос с контрастностью и размером шрифта. С помощью нее можно добавить функции, которые удовлетворят потребностями людей с ограниченными возможностями. Например, возможность настроить отображение цвета на сайте поможет людям с дальтонизмом, а увеличение интервалов между буквами и строчками, а также настройка шрифта с засечками — людям с дислексией, которые из-за особенностей работы мозга испытывают трудности с чтением и пониманием текстов.
Такая панель хорошо реализована на уже упоминавшемся выше сайте ПФРФ. Также удачный вариант ее реализации можно увидеть на сайте Росбанка. В ней используются иные настройки цветовой схемы, чем у ПФРФ.
Панель комфортного чтения на сайте Росбанка
В 2018 году такая панель появилась и на сайте ВТБ.
Панель комфортного чтения на обновленном сайте ВТБ
На сайте Пенсионного Фонда РФ есть несколько иные варианты настройки контрастности, а также существует свой собственный «экранный диктор», не требующий запуска дополнительных программ.
Панель комфортного чтения на сайте ПФРФ (с примененной настройкой контрастности).
Для установки подобной панели не обязательно иметь доступ к исходному
коду сайта. Существуют подобные плагины и для популярных CMS,
которые может установить практически каждый, без особенных затрат. Например,
плагин Comfortable Reading (для WordPress и Joomla).
Пример настройки сайта с помощью плагина Comfortable Reading.
Проблемы реализации функционала для слабовидящих
Рассмотрим сайты, где функционал для слабовидящих есть, но имеются проблемы с его реализацией. Проблемы можно разделить на три основных типа.
1. Ограниченный функционал
Используются только настройки размера шрифта и цвета. Это улучшит комфортность чтения для слабовидящих людей, однако оставляет без внимания потребности людей, например, с дислексией. Пример: сайт Генпрокуратуры РФ.
Ограниченные настройки для слабовидящих на сайте Генпрокуратуры РФ.
2. Отдельная версия сайта для слабовидящих
Версия для слабовидящих находится на отдельном URL. Также на ней может отсутствовать часть контента по сравнению с обычной версией. Это неудачное решение, поскольку нужно поддерживать две отдельных версии сайта. Такой вариант используется, например, на сайте Президента России.
Версия сайта Президента РФ для слабовидящих вынесена на отдельный URL: special.kremlin.ru .
3. Проблемы работы с экранным диктором
На некоторых сайтах хорошо реализована панель для настроек (ПФРФ) или адаптивная версия (Госуслуги), но есть проблемы взаимодействия с программами экранных дикторов. Например, не озвучивается часть контента или сложно
установить фокус на элемент при включенной программе диктора.
О проблемах работы Интернет-банков и мобильных приложений с экранном диктором компания Юзабилитилаб подробно рассказывала на банковском завтраке в сентябре 2017&. Для государственных сайтов эти проблемы не менее актуальны.
4. Версию для слабовидящих сложно найти даже зрячему человеку
На многих сайтах ссылка для перехода к версии для слабовидящих скрыта за мелкими и бледными иконками, как, например, на сайте Счетной Палаты РФ.
Мелкая и бледная иконка для перехода к версии для слабовидящих на сайте Счетной Палаты РФ.
Иногда используются нестандартные пиктограммы, по внешнему виду которых сложно догадаться, что это версия для слабовидящих (например, сайт Конституционного суда).
Нестандартная иконка для перехода к версии для слабовидящих на сайте Конституционного Суда РФ.
Как можно заметить, единого стандарта на разработку версии для слабовидящих не существует. Так, в нескольких рассмотренных выше решениях с панелью для настроек чтения сайта используются разные параметры и цветовые схемы, а где-то отсутствует часть функционала.
Заключение
1 января 2016 года вступил в силу Федеральный закон N419-ФЗ «О внесении изменений в отдельные законодательные акты Российской Федерации по вопросам социальной защиты инвалидов в связи с ратификацией конвенции о правах инвалидов», и большинство государственных сайтов добавили версию для слабовидящих. Однако до сих пор не все госсайты адаптированы для людей с ограниченными возможностями, что подтверждает необходимость развития темы доступности. Это, например:
Доступность сайтов важна не только для государственных сайтов, но и для бизнеса. Следование рекомендациям по улучшению доступности поможет расширить аудиторию не только за счет лиц с инвалидностью, но и за счет улучшения пользовательских качеств для широкой аудитории и нас с вами.
Благодаря нашим проектам в 2008 и 2016 г. с Росбанком, а также нашей работе по оценке доступности Интернет-банков и банковских мобильных приложений для незрячих в 2016-2017гг, у нас появилась экспертиза и планы на стандартизацию требований к этому функционалу.
Usabilitylab продолжит развивать экспертизу в области юзабилити и доступности сайтов, приложений и сервисов, например, интернет-банков. Владельцы сайта и бизнес ставят себе задачу по развитию своих сервисов и мы готовы с этим помочь. Мы можем:
- провести обучение работе с сервисами по аудиту доступности,
- разработать требования к панели для людей с ограничениями по зрению,
- оценить доступности и юзабилити вашего сервиса и разработать рекомендации для повышения этих показателей.
Подписывайтесь на наш Телеграм, чтобы не пропустить выход новых полезных статей!
