Как сделать онлайн-шопинг удобнее для пользователей программ экранного доступа и не сломать при этом голосовой ввод

Мое видео на тему «Специальные возможности в действии: практические советы по увеличению доступности пользовательских интерфейсов» уже доступно онлайн. Этот пост — дополненная расшифровка той части видео, где рассказывается, как создавать более информативные текстовые метки в виде кнопок и (или) ссылок, чтобы сделать покупки в Интернете более комфортными для пользователей программ экранного доступа и не нарушать рекомендаций по обеспечению доступности веб-контента (WCAG). Немаловажно, что тем самым мы не ломаем метки для пользователей голосового ввода. Описанные принципы подходят для всех видов текстовых меток, включая элементы управления формы.

Коротко о функции VoiceOver на устройствах macOS и о том, как использовать ее для отображения содержимого страницы

VoiceOver (VO) — это встроенная функция чтения с экрана на устройствах macOS. Люди, использующие ее, могут перемещаться в цифровом пространстве с помощью инструмента «ротор».

Ротор VoiceOver предназначен для быстрого просмотра веб-страниц и навигации по ним. Это своеобразный аналог базовых команд для пользователей функции экранного доступа, который повышает эффективность навигации по веб-страницам.

Его можно активировать в приложении VoiceOver с помощью сочетания клавиш Ctrl + option + U. После этого в средней части экрана появится оверлей ротора. Разные типы элементов здесь объединены в списки.

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

В этом видео я покажу, как использовать ротор VoiceOver для навигации по сайту A List Apart. Нажатие на стрелки «влево» и «вправо» открывает разные меню и дает общее представление о типах контента, размещенного на странице.

Если в документе использована семантическая верстка с элементами секционирования (такими как nav, header, main, footer, aside и т. д.), пользователь сможет быстро перемещаться по странице без необходимости проматывать содержимое каждого раздела. И это очень важная возможность.

Имейте в виду, что видимая в роторе структура документа определяется структурой HTML-кода. Если не добавить заголовок, он не отобразится в меню ротора, и это отразится на иерархии элементов для пользователей программ экранного доступа. А если забыть об ориентирах, люди не смогут использовать их для навигации по странице.

Полезные источники:

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

Изучаем каталог товаров с помощью ротора VoiceOver

Обычная страница интернет-магазина — это каталог товаров, у каждого из которых есть собственная кнопка Добавить в корзину для быстрого добавления в список покупок.

Рассмотрим в качестве примера сайт Yeti, где представлен каталог многоразовых бутылок. У каждой позиции есть собственная кнопка Добавить в корзину, а у некоторых — еще и возможность выбора расцветки. В своем видео я показываю, как перемещаться по этой странице с помощью ротора VoiceOver.

Выбрав меню элементов управления формы, вы получите список всех этих элементов на странице, включая кнопки Добавить в корзину.

Беглого взгляда на них достаточно, чтобы понять — они почти бесполезны, поскольку непонятно, какая кнопка соответствует конкретному товару. Как пользователю выбрать нужную?

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

Технически это можно реализовать так:

<button type=".." class=“..">
    Add <span class="visually-hidden">PRODUCT_NAME</span> to Cart
</button>
<!-- P.S. Don’t do this -->

Вы добавляете название товара в строку текстовой метки кнопки, и в меню элементов управления формы отображается, к какой бутылке она относится.

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

Просмотр веб-страниц с помощью голосовых команд

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

Одна из самых популярных программ распознавания речи для веб-серфинга называется Dragon Naturally Speaking. Через нее можно управлять компьютером и просматривать веб-страницы. В подробном руководстве к ней объясняется, как использовать голосовой ввод для выполнения различных задач офлайн и онлайн. Такой функционал полезен для множества людей с ограничениями здоровья — например, для тех, у кого проблемы с руками (но не только для них), а также для продвинутых пользователей, которые хотят увеличить скорость своей работы (потому что диктовать быстрее, чем печатать).

Давайте посмотрим, как это работает. Компания Level Access выпустила видеоинструкцию о том, как заполняется форма на веб-странице с помощью Dragon Naturally Speaking. В своем видео я привожу короткий фрагмент этого ролика, а полную версию можно посмотреть на YouTube.

Примечание. Обратите внимание, как пользователь останавливает и возобновляет работу программы с помощью команд «Усни» (Go to sleep) и «Проснись» (Wake up).

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

Когда на странице несколько кнопок Добавить в корзину, пользователь Dragon должен назвать конкретную метку, чтобы активировать одну из них. Вот почему скрытый текст делает кнопку недоступной — находясь в середине строки, он разрывает содержимое видимой текстовой метки. В результате пользователь называет кнопку, но метка у нее на самом деле не такая, как отображается на экране. Такой интерфейс не соответствует критерию успеха WCAG 2.5.3 «Метка в названии», который заключается в том, что названия элементов интерфейса с метками, которые включают текст или изображения текста, должны быть видимыми. Лучшим решением будет поместить текст метки перед названием элемента.

Следующие два абзаца взяты из текста критерия успеха (выделения мои):

Цель этого критерия — гарантировать, что подписи, визуально обозначающие элементы интерфейса, связаны с этими элементами на программном уровне. Таким образом, люди с ограничениями здоровья смогут уверенно использовать видимые метки для взаимодействия с этими элементами.
Большинство элементов управления имеют видимые текстовые метки. У них также есть программное или «доступное» название. Пользователям намного удобнее взаимодействовать с интерфейсом, если слова и знаки видимой метки элемента управления совпадают с его доступным именем или являются его частью. В этом случае пользователи, применяющие голосовой ввод (программы для распознавания речи), могут осуществлять навигацию по странице, называя текстовые метки элементов, таких как меню, ссылки и кнопки, отображенные на экране. Зрячие пользователи, применяющие функцию преобразования текста в речь (программы экранного доступа), также чувствуют себя комфортнее, когда то, что они слышат, и то, что видят на экране, совпадает.
Критерий успеха WCAG 2.5.3

Оптимизируем интерфейс под функцию экранного доступа, не мешая пользователям голосового ввода

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

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

<button type=".." class=“..">
    Add to Cart <span class="visually-hidden">, PRODUCT_NAME</span>
</button>

Таким образом, видимая подпись останется нетронутой, и в меню элементов управления формы ротора отобразится список кнопок Добавить в корзину с соответствующими названиями товаров.

Когда человек произнесет голосовую команду Нажать «Добавить в корзину», Dragon присвоит номера этим кнопкам, что мы видели в ролике на примере полей с флажками и переключателей, и пользователь сможет назвать номер нужной кнопки. Это становится возможным, поскольку название выбранного элемента не разрывается содержимым разметки.

Итак, если вам нужно добавить текст к видимой метке, лучше разместить его после нее.

Убедитесь также, что доступное название (которое озвучивает программа экранного доступа) как можно полнее совпадает с видимой меткой. Это значит, что не следует использовать атрибут aria-label, который отличается от метки элемента управления.

Заключение: добавляйте текстовые метки везде, где это возможно

Понимание того, как выглядит Интернет с точки зрения пользователей голосового управления, может вдохновить на новые улучшения.

Людям нужны видимые метки, чтобы взаимодействовать с элементами управления, но как быть с элементами, у которых нет меток? Как быть с компонентами, включающими, например, элементы точечной навигации (обычно используются в слайдерах и «каруселях»)? Чтобы активировать такой элемент, нужно произнести доступное название, но на экране его не видно. У пользователя остается два пути: использовать голосовое управление или функцию сетки координат мыши (MouseGrid), а это самый утомительный и неудобный способ навигации.

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

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

Спасибо за внимание!

Перевод материала подготовлен в рамках курса "JavaScript Developer. Professional". Если вам интересно узнать о курсе подробнее, а также познакомиться с преподавателем — приходите на день открытых дверей онлайн.

Доступные текстовые метки для всех