Функционал для слабовидящих: небольшой обзор и рекомендации

Три базовых требования к доступности сайтов

Панели для слабовидящих

Проблемы реализации функционала для слабовидящих

Заключение

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

Три базовых требования к доступности сайтов

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

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

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

На скриншоте: увеличение масштаба до 200% на сайте ЦБ РФ без появления горизонтальной полосы прокрутки

Комментарий Юрия Божора, начальника отдела методологии и анализа рисков финансовой доступности службы по защите прав потребителей и обеспечению доступности финансовых услуг (ЦБ РФ):

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

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

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

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

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

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

Вот что говорит о важности работы над доступностью государственных сайтов Александр Павлович, заместитель директора департамента развития электронного правительства РФ:

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

Главная страница сайта банка Barclays. При нажатии на TAB пользователь может пропустить весь блок с верхним меню.

Панели для слабовидящих

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

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

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

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

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

На сайте Пенсионного Фонда РФ есть несколько иные варианты настройки контрастности, а также существует свой собственный «экранный диктор», не требующий запуска дополнительных программ.

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

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

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

Проблемы реализации функционала для слабовидящих

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

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

Ограниченные настройки для слабовидящих на сайте Генпрокуратуры РФ.

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

Версия сайта Президента РФ для слабовидящих вынесена на отдельный URL: special.kremlin.ru .

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

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

На многих сайтах ссылка для перехода к версии для слабовидящих скрыта за мелкими и бледными иконками, как, например, на сайте Счетной Палаты РФ.

Мелкая и бледная иконка для перехода к версии для слабовидящих на сайте Счетной Палаты РФ.

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

Нестандартная иконка для перехода к версии для слабовидящих на сайте Конституционного Суда РФ.

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

Заключение

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

Благодаря нашим проектам в 2008 и 2016 г. с Росбанком, а также нашей работе по оценке доступности Интернет-банков и банковских мобильных приложений для незрячих в 2016-2017гг, у нас появилась экспертиза и планы на стандартизацию требований к этому функционалу.