Адаптация дизайн-макетов под скрин-ридер
Зачем это нужно
Сейчас большая часть сайтов и приложений полноценно не адаптирована под людей, которые регулярно пользуются скрин-ридерами (12% от всей аудитории пользователей интернета). Поэтому важно сделать так, чтобы они также на равных условиях пользовались интерфейсами, как и другие люди.
У этого есть ряд преимуществ как для бизнеса, так и для пользователей
Для бизнеса: при должном маркетинге улучшается позиционирование бренда за счет того, что бренд заботится о всех своих пользователях и адаптирует свои продукты для людей с инклюзией, а также еще одно преимущество — это увеличение аудитории.
Для пользователей: улучшается жизнь за счет того, что пользователям становиться легче и быстрее ориентироваться в интерфейсе.
Пример неадаптированного интерфейса
Например, вот как может выглядеть не адаптированный интерфейс для пользователей, которые используют скрин-ридер.
- Не у всех интерактивных элементов есть обозначение, что это кнопка, ссылка, изображение и так далее
- У кнопок-иконок нет корректного названия и приходится угадывать их назначение
- Нет групп и это увеличивает продолжительность навигации, если что-то не интересно и нужно пропустить
- Отображаются ненужные для пользователей объекты, например декоративные изображения. Они не дают никакой информации для пользователя и тратят его время
Пример адаптированного интерфейса
- У всех интерактивных элементов есть обозначение и это сразу дает пользователю понимание какую функцию выполняет тот или иной элемент
- У кнопок-иконок появились корректные названия и легко понять какую функцию они выполняют
- Появились группы и можно быстро перемещаться по ним, что экономит время для пользователя
- Скрыты ненужные для пользователей объекты, такие как декоративные изображения
Привычный интерфейс
А вот как выглядит интерфейс для большинства пользователей
Гайд
Теперь перейдем к действиям, которые нужно сделать, чтобы адаптировать интерфейс для скрин-ридеров.
1. Определите и передайте ориентиры страницы. Только для Web
Ориентиры — это атрибуты, которые добавляются к смысловым блокам страницы. Они нужны, чтобы создать семантические разделы на странице и помочь пользователям со скрин-ридером легче перемещаться по сайту.
Самые распространенные ориентиры в HTML:
- <header> для шапки сайта;
- <nav> для навигации;
- <main> для основного контента;
- <aside> для дополнительного контента;
- <section> для разделения страницы на смысловые блоки;
- <footer> для подвала сайта;
2. Передайте перечень и иерархию заголовков
По статистике, навигацию по заголовкам использует до 85% пользователей скрин-ридеров.
С помощью скрин-ридеров пользователи могут прослушать полный список заголовков, выбрать заголовки конкретного уровня и ориентироваться по ним.
Поэтому передайте заголовки с правильной иерархией по убыванию — от H1 до H6. Если в вашем макете нет H1 или текущий заголовок не отвечает на вопрос «Что это за страница?», просто добавьте скрытый заголовок первого уровня.
3. Сгруппируйте элементы
При необходимости объединяйте элементы в один блок. В противном случае пользователю, который взаимодействует с интерфейсом с помощью скрин-ридера, придется перемещаться по каждому элементу и много раз свайпать.
4. Передайте правильный порядок чтения элементов для скрин-ридера
Скрин-ридер зачитывает элементы в том порядке, в котором они расположены в коде. Передать порядок чтения нужно, чтобы контент не зачитывался хаотично.
Помните об избыточности информации — пользователь может потратить много времени, если скрин-ридер будет сообщать обо всех элементах. Поэтому лучше скрыть от него декоративный контент.
5. Опишите поведение компонентов
Чтобы скрин-ридер корректно озвучивал все возможные состояния компонентов опишите их. Кстати, мы в дизайн-системе уже описали озвучивание всех состояний компонентов, это можно посмотреть тут
6. Напишите альтернативные тексты для изображений и сложным иллюстрациям
Всегда добавляйте атрибут alt к тегам <img>, чтобы описать содержание изображения. Это позволяет пользователям с нарушениями зрения понимать, что изображено на картинке.
Сложное изображение, например, диаграмма, график или карта должны иметь рядом с собой текстовое описание. Кроме названия укажите в нем всю видимую информацию: оси графика, точки, метки и другие детали.
7. Скройте неважные элементы для скрин-ридера
Некоторый контент лучше скрывать, чтобы не перегружать пользователя лишней информацией. Например, декоративные изображения, иконки в кнопках или неважный текст.
8. Продумайте корнер-кейсы и как они будут озвучиваться
Помимо основного состояния также опишите и корнер-кейсы, например, что будет озвучивать скрин-ридер, если поиск не дал результатов или произошла ошибка при подключении. Это нужно, чтобы люди с особенностями могли полноценно воспринимать все состояния интерфейса и не упустить ничего важного.
9. Проведите ревью после адаптации
Чтобы пользователи полноценно пользовались продуктом без ошибок важно предварительно протестировать адаптированный под скрин-ридер интерфейс.
Советы
- Проверьте раскладку клавиатуры и язык символов
Обратите внимание на внешне идентичные, но разные английские и русские буквы. Например, русская «А» и английская «А».
Скрин-ридеры зачитывают символ исходя из его кода в таблице символов, а не из внешнего вида на экране. Поэтому такие опечатки могут сильно усложнять чтение текста незрячим людям.
Например, в макет вставили текст «МТС». Позже выяснилось, что скрин-ридер читает «ЭмТэСи» вместо привычного «ЭмТэЭс», так как в тексте буква «С» написана на английской раскладке.
Контролируйте раскладку клавиатуры, чтобы скрин-ридер правильно проговаривал контент.
- Описывайте текст правильно
Текст будет читаться намного лучше, если вы его просклоняете: 1 рубль, 2 рубля, 5 рублей. В каждом языке разные способы работы с числами. В английском их два, в русском три.
А также текст в некоторых кнопках нужно изменять специально для скрин-ридер, например:
Не корректно — См все, 179 знак рубля, 30 см
Корректно — Смотреть все, 179 рублей, 30 сантиметров
- Указывайте для ссылок и иконок осмысленные названия
Кнопки с обобщенным названием могут запутать пользователя — «Подробнее» и «Узнать больше» не имеют никакого контекста.
Люди, использующие для навигации список всех кнопок или ссылок на странице и вовсе не поймут, что произойдет при нажатии.
Если в макете веба нет возможности называть элемент осмысленно, придумайте ему название и попросите разработчика добавить его в доступное имя. Это имя элемента в коде, которое зачитывает скрин-ридер.
- Указывайте названия для SVG
У ценных SVG-изображений тоже должен быть альт-текст.
Добавьте роль role="img" для изображения, а альт-текст укажите с помощью aria-labelили сочетания title и aria-labelledby.
В заключении
Следуя этим рекомендациям и рассматривая адаптацию интерфейсов для скрин-ридеров как важную часть продукта, дизайнеры и разработчики могут сделать интернет более инклюзивным и доступным для всех, что в конечном итоге принесет пользу как бизнесу, так и пользователям. Это не только морально правильно, но и является стратегическим шагом, способствующим росту бренда и удовлетворению потребностей всего многообразия пользователей интернета.
