Версия сайта для слабовидящих. Как сделать хорошо?
Требования, гайдлайны, примеры и рекомендации
В процессе работы над версией сайта для слабовидящих я собрала список полезных статей и гайдлайнов — возможно, это кому-то пригодится. Сам проект показать не могу (NDA).
Работу над задачей я начала с поиска требований и хороших референсов. По закону против дискриминации инвалидов, еще с 1 января 2016 года каждый сайт обязан иметь версию для слабовидящих.
На деле это соблюдают только сайты государственных и образовательных учреждений, а также больницы (их контролируют и штрафуют). По состоянию на сентябрь 2019 год появились версии для слабовидящих у коммерческих организаций, их можно разделить на две группы:
- Профильные организации: офтальмологические клиники или медицинские центры, у которых целевая аудитория — слабовидящие. Примеры: МНТК «микрохирургия глаза», офтальмологическая клиника «Эксимер», медицинский центр «УГМК-здоровье».
- Банки, которые хотят сделать свои услуги доступными для большего числа клиентов. Примеры: ВТБ, Русский Стандарт Банк, Росбанк.
Какие существуют требования к версии для слабовидящих?
Требования регулирует ГОСТ Р 52 872−2012 «Интернет-ресурсы. Требования доступности для инвалидов по зрению». Коротко:
Сразу скажу, понятие «версия для слабовидящих» общее и эта версия сайта должна быть приспособлена для людей во всеми типами нарушений — зрения, слуха, моторики, нарушения опорно-двигательного аппарата, проблемы восприятия текста/информации (дислексия, деменция).
Также нужно отметить, что сайты, которые приспособлены для людей с особыми потребностями, легче воспринимаются и обычными пользователями. Тем более что обычные пользователи часто попадают в ситуации временного ограничения своих возможностей — например, молодая мама с ребенком на руках, или человек, который сломал руку.
Все пользователи периодически испытывают трудности. Делая сайт доступным, вы заботитесь о каждом.
Отличный и наиболее полный гайдлайн по доступности есть у Сбербанка. В нем детально и с примерами описаны все требования к доступности сайта. Считаю его обязательным к изучения для каждого дизайнера, разработчика и аналитика продукта. В гайдлайне Сбербанка есть ссылки на другой гайдлайн — WCAG 2.1 (Web Content Accessibility Guidelines — правила доступности веб-контента), его тоже полезно изучить.
В гайдлайне Сбербанка также описываются технологии, которые помогают людям с особенностями пользоваться сайтами — screen reader (скринридер, программа для чтения с экрана), голосовое управление, функция увеличения страницы в браузере, экранные лупы.
Кстати, Сбербанк специально приглашает людей с инвалидностью для тестирования интерфейсов. Еще у них есть незрячий штатный тестировщик.
Коротко, есть три базовых требования к доступности сайта
- При масштабировании не должна появляться горизонтальная прокрутка. Страница должна оставаться читаемой. Идеальные примеры — сайты Сбербанка и Центрального Банка России. На этих сайтах можно масштабировать страницу до 500% без появления горизонтальной прокрутки
Да, информации на один экран вмещается меньше, но она никуда не пропадает и остается доступной.
2. Контраст текста и фона. Коэффициент контрастности должен быть не менее 7:1 (для крупного текста допускается 4,5:1). Текст, который является частью логотипа, не требует контрастности. Я использую сайт WebAIM для проверки контрастности, а также плагин Stark для Figma.
3. Возможность полноценно работать с сайтом с клавиатуры без использования мыши (это прописывается в коде). Хороший пример — Госуслуги. Попробуйте пройти сайт Tab’ом, у вас получится. При нажатии кнопки Tab фокус переключается последовательно на каждую кнопку/ссылку.
Обязанность проектировщика — прописать эти возможности в документации при передаче разработчику.
Делая сайт доступным, вы одновременно делаете его более удобным для всех пользователей.
Что еще можно сделать, чтобы сайт стал доступнее?
— Разбить текст на заголовки, подзаголовки и абзацы. Написать текст просто и понятно, использовать доступную для всех терминологию.
Ильяхов для проектировщика интерфейсов не менее важен, чем для UX-писателя (особенно если в вашей компании нет писателя и вы совмещаете обе должности). Я использую сервис «Главред» для проверки текстов.
Важно: заголовки 1-го уровня на макете должны быть заголовками H1 в коде.
— Использовать достаточно крупный шрифт (не менее 16 px), который хорошо читается. Отношение интерлиньяжа к кеглю должно быть около 1.4–1.65 для основного текста, для заголовков — 1–1.3.
— Использовать альтернативные версии контента. Например, поиск банкомата можно реализовать как через карту, так и через таблицу или список.
— По-минимуму использовать модальные окна (они плохо читаются скринридерами).
— Использовать иконки как дополнительные визуальные подсказки. Использовать привычные иконки. Валидацию также осуществлять не только текстом и цветом, но и иконкой.
— Увеличить область нажатия иконок до 48 px.
— Не забывайте регулярно проводить тестирования (по возможности привлекайте людей с особыми потребностями).
С требованиями понятно, а делать-то как?
Во-первых, проверьте ваш сайт на соответствие вышеперечисленным требованиям.
Во-вторых, определитесь, какие настройки версии для слабовидящих вы будете делать.
Минимальные настройки:
— три размера шрифта
— три цветовых схемы
— возможность включения/отключения изображений
Что еще можно сделать:
— выбор типа шрифта — с засечками или без
— выбор кернинга (расстояния между буквами — стандартное, среднее, большое)
— выбор интерлиньяжа (уменьшенный/увеличенный)
— больше цветовых схем
— возможность переводить изображения в монохром
— встроенный диктор
Примеры панели настроек версий для слабовидящих
Для нашего проекта я по требованию заказчика использовала минимальную панель настроек — 3 размера шрифта, 3 цветовых схемы (черный текст на белом фоне, белый текст на черном фоне и темно-синий текст на голубом фоне), возможность включать и отключать изображения.
Частые проблемы версий для слабовидящих
На основании просмотренных референсов я хочу отметить частые проблемы версий для слабовидящих:
- Саму иконку «версия для слабовидящих» сложно заметить на основном сайте. Она может располагаться или в шапке сайта, или в подвале, часто иконка маленькая и недостаточно контрастная. Я считаю, что иконка должна располагаться в шапке сайта, чтобы сразу бросаться в глаза. Чтобы добраться до подвала, надо проскролить весь сайт, что особенно неудобно при постоянной подгрузке контента. Так сделано на сайте Президента России.
2. Версия для слабовидящих расположена на отдельном поддомене — это усложняет поддержку сайта и увеличивает расходы. Например, так сделано на сайте Президента России.
3. Версия для слабовидящих часто содержит меньше контента, чем обычная версия сайта.
4. При масштабировании «слетает» верстка и появляется горизонтальная прокрутка.
Некоторые сайты, например Сберабанк и Госуслуги (в новой версии), не делают отдельную версию для слабовидящих — это допустимо, но только если на основном сайте вы соблюдаете все условия доступности. И все равно остается вопрос с цветом фона — при некоторых заболевания удобней читать белый текст на черном фоне, или темно-синий на голубом.
Как показать наведение?
Еще один важный вопрос — как показать наведение не цветом?
Я для себя решила вопрос так: при наведении на плашку или кнопку меняется цвет заливки и увеличивается толщина обводки (с 4 до 8 px). Дополнительно использую анимацию нажатия.
Ссылки при наведении становятся подчеркнутыми и меняют цвет.
У нас используется довольно сложная система фильтров. В фильтрах при наведении у элемента появляется прямоугольная обводка всей строки, при выборе значения — галочка. В поиске тот же принцип — выбранная строка подсказки выделяется прямоугольной обводкой.
Итак, еще раз, базовые требования:
— При масштабировании не должна появляться горизонтальная прокрутка. Страница должна оставаться читаемой.
— Контраст текста и фона. Коэффициент контрастности должен быть не менее 7:1 (для крупного текста допускается 4,5:1).
— Возможность полноценно работать с сайтом с клавиатуры без использования мыши (прописывается в коде).
Минимальные настройки:
— три размера шрифта
— три цветовых схемы
— возможность включения/отключения изображений
Проектируйте с заботой о людях и не забывайте проводить тестирования.
То ,что облегчает жизнь слабовидящих — улучшает пользовательский опыт для всех.
