Сбербанк разработал гайдлайны, которые помогают адаптировать продукт для клиентов с особенными потребностями.
Ограниченные возможности — это термин, который привыкли применять к людям с инвалидностью. Но более корректно использовать этот термин не по отношению к человеку, а к среде, продуктам или процессам, которые ограничивают его возможности.
Человек с дейтеранопией (вид дальтонизма с выпадением волн зелёной части спектра) заходит на сайт с подтверждающей кнопкой, которая выделена зелёным цветом. Она может ограничить его возможности. Слабовидящий человек заходит в приложение с тонкими серыми шрифтами на тёмном фоне — приложение ограничивает его возможности.
Ограничение возможностей может быть временным
Женщина с коляской, которая столкнулась с лестницей без пандуса. Водитель, который едет в дождливую погоду ночью и плохо видит знаки. Клиент с простудой, которому тяжело говорить, но приходится звонить в колл-центр. Всё это примеры временных ограничений, с которыми может столкнуться любой человек.
В России каждый третий человек маломобилен и каждый первый может иметь временно ограниченные возможности. Компании нужно помнить, что её продукт должен быть доступным для всех. Иначе в любой момент её клиентом может стать человек, у которого возникнут трудности.
Главные принципы доступности одинаковы для всех цифровых продуктов:
- Воспринимаемость — пользователи должны иметь возможность потреблять контент тем способом, который им доступен.
- Понятность — контент и интерфейс должны быть понятны любому человеку.
- Управляемость — у пользователей должна быть возможность управлять контентом удобным способом.
Надёжность — интерфейс не должен меняться при изменении операционной системы, устройства или версии продукта.
Сбербанк сделал гайдлайны, которые помогают привести цифровой продукт к такому виду, чтобы им мог пользоваться человек с любыми ограничениями. Ниже речь пойдёт о барьерах, которые разные специалисты могут поставить перед пользователем, и о том, как их решить.
iOS- и Android-разработчики
Сильнее всего разработчики влияют на доступность продукта для незрячих людей. Одна из проблем, с которой сталкиваются последние — невозможность увидеть элементы интерфейса. Для незрячего человека путеводителем становится скринридер — программа для чтения с экрана компьютера и смартфона.
Скринридер используют и люди с разными типами зрительных нарушений — у них сохраняется остаточное зрение, но программа помогает им лучше ориентироваться в продукте.
Первый барьер. Пользователь не понимает тип элемента
Зрячий человек может отличить заголовок от кнопки, пункт списка от абзаца текста.
Чтобы скринридер мог прочитать не только контент, но и его тип, любой элемент интерфейса должен содержать информацию о нём.
iOS
Правильно: 🍎
accessibilityLabel = "Красное яблоко"
Неправильно: 🍎
accessibilityLabel = “qiejbn.png”
Android
Правильно: 🍎
android:contentDescription="Яблоко"
Неправильно: 🍎
android:contentDescription="qiejbn.png"
Это касается любого элемента: чекбокса, картинки, списка, текста, заголовка. В последних нужно прописывать ещё и уровень — h1, h2, h3.
Второй барьер. Пользователю дают картинку с текстом вместо текста
Скринридеры не умеют читать текст с изображения. Поэтому любую таблицу нужно верстать кодом, а не картинкой — иначе она будет недоступна незрячему пользователю.
Третий барьер. Появляются новые элементы, а пользователи об этом не знают
Если пользователь переключился на поле ввода пароля, ему нужно сообщить о том, что открылась клавиатура. Это же касается, например, автоматической замены символа «8» на «+7» в номере телефона или чекбокса, который стал отмеченным после клика.
На Android принципы разработки для людей с особенными потребностями почти такие же, как на iOS. Отличаются только скринридеры (на iOS — VoiceOver, на Android — TalkBack) и детали их работы.
Четвёртый барьер. Пользователю дублируют тип нативного элемента системы
Для нативных кнопок ОС — например, звонок, меню, поиск — не нужно прописывать тип элемента для скринридера. Он умеет читать их по умолчанию. Но обязательно нужно подписать кнопку звонка «Позвонить в банк». А поиска — «Найти ближайший банкомат».
Как подписывать нативные элементы в Android
Правильно:
📞
ImageView imageView = findViewById(R.id.imageView_call);
imageView.setContentDescription ("Позвонить в банк");
Неправильно:
📞
ImageView imageView = findViewById(R.id.imageView_call);
imageView.setContentDescription ("Кнопка позвонить");
Пятый барьер. Скринридер зачитывает пользователю бесполезный элемент
Элементы, которые не имеют ценности для пользователя скринридера, нужно скрывать. К примеру, декоративные картинки.
Как скрыть элемент в Android
Атрибут XML:
android:importantForAccessibility=”no”
Программно:
mImageView.setImportantForAccessibility
(View.IMPORTANT_FOR_ACCESSIBILITY_NO);
Веб-разработчик
Первый барьер. Не все элементы работают со скринридером на десктопе
На десктопе пользователи скринридера перемещаются по сайту с помощью клавиатуры. Когда вёрстка уже готова, нужно проверить, останавливается ли фокус на всех важных элементах.
Второй барьер. Пользователю приходится прокручивать сайт по горизонтали при масштабировании
Вёрстка должна быть адаптивной как минимум до увеличения в 200%. Это важно не только для людей с плохим зрением, которые зумят сайт для удобства, но и для тех, кто взаимодействует с сайтом с устройств с нестандартным разрешением — например, с планшетов.
Третий барьер. Пользователь не знает, на какой части страницы он находится
Чтобы убрать этот барьер, нужно проработать лендмарк-элементы — атрибуты, которые указывают на тип секции страницы. Тогда пользователь будет понимать, где он находится — в шапке, основной части сайта, панели навигации.
Базовые элементы
<header> — шапка сайта
<aside> — боковая колонка
<section> — делит страницу на смысловые части
<footer> — нижний блок страницы
<nav> — панель навигации
<main> — основное содержимое страницы
Дизайнер
От аккуратного и лёгкого дизайна выигрывают все — не только пользователи с особенными потребностями. Дизайнеру нужно помнить, что простота закрывает потребности и тех пользователей, которые не хотят тратить время на обучение продукту.
Совет: дизайнеру стоит проверить, как выглядит его сайт для разных пользователей. Например, для дальтоников, людей со слабым зрением или с дислексией.
Первый барьер. Пользователь не может прочитать контент, потому что он недостаточно контрастен
Минимальный коэффициент контрастности должен составлять 4,5:1. Для увеличенного текста — 3:1. Исключениями могут быть только логотипы или элементы, которые не несут полезной функции для пользователя. Проверить контрастность можно с помощью плагина Stark, Colour Contrast Analyser или Colorable.
Второй барьер. Пользователю сложно читать текст на странице
Несколько правил:
- Минимальный кегль для основного текста — 16 пикселей. Но размер может меняться в зависимости от стиля шрифта.
- Оптимальная длина строки — 45–75 символов.
- Заголовки должны отличаться от основного текста размером, стилем, цветом, чтобы у пользователя было понимание иерархии.
- В основном тексте соотношение интерлиньяжа к кеглю должно быть около 1,4–1,65. Для заголовков — 1–1,3, для подписей — около 1,3. Если соотношение меньше или больше, текст читать труднее.
Менеджер
- Основная задача менеджера — изучить принципы доступности и донести их команде. Имеет смысл это делать на старте разработки продукта, а не в середине или конце, когда всё уже почти готово.
- Пользователи с особенными потребностями должны входить в фокус-группы. Им нужно показывать продукт, задавать вопросы и получать обратную связь. Они лучше знают, как им удобно.
- Нужно выбрать способ автоматизированного тестирования вместе с разработчиками и проводить его каждый спринт. Это поможет отлавливать распространённые ошибки, но пользовательский тест тоже нужен — только так продукт будет соответствовать всем требованиям доступности.
Гайдлайны Сбербанка основаны на реальной работе с клиентами с особенными потребностями и международном стандарте WCAG 2.1. Их может использовать любая компания, которая хочет внести свой вклад в доступность цифровых продуктов в России.
Можно выпускать любые гайды, но всякие антивирусы в приложении, подтверждение переводов через звонок и все остальные отвратительные решения — это единственное, что ухудшает продукт, а никак не аксесабилити. Сорян.
Комментарий недоступен
Забота о людях с ограниченными возможностями, безусловно — хорошо. Но во многом только для маркетинга. Подобные люди не первый день живут со своим недугом и, скорее всего, используют кучу решений, которые уже существуют. К примеру, разнообразные плагины для браузеров, цветовые схемы в OS и прочая. И в реальном мире, скорее всего, произойдет наложение ваших гайдлайнов на суровую действительность.
Прокрастина́ция (от англ. procrastination — задержка, откладывание; от лат. procrastinatio — с тем же значением, восходит к лат. cras — завтра или лат. crastinus — завтрашний, и лат. pro — для, ради) — в психологии склонность к постоянному откладыванию даже важных и срочных дел, приводящая к жизненным проблемам и болезненным психологическим эффекта
Комментарий удален модератором
Я являюсь пользователем скринридеров под Windows и Android. Веб-версия Сбербанк-онлайн как была слаба в плане доступности, так таковой и остается на протяжении всего срока своего существования. Стоило бы им самим хоть как-то следовать положениям своих гайдлайнов. Без дел, это просто пустое муссирование на тему "какие мы хорошие, что об этом говорим".