Оптимизация UX для пользователей только с клавиатурой и вспомогательных технологий

(Это спонсируемая статья.) Одна из замечательных особенностей специальных возможностей заключается в том, что они заставляют вас видеть и думать о своем приложении, выходящем за рамки обычного зрительного взаимодействия с пользователем с помощью мыши. Пользователи, которые осуществляют навигацию только с помощью клавиатуры (KO) и/или вспомогательных технологий (AT), в значительной степени зависят не только от продуманной информационной архитектуры вашего приложения, но и от возможностей, которые ваше приложение предоставляет для обеспечения максимально простой работы для всех типов пользователей.

В этой статье мы рассмотрим некоторые из тех возможностей, которые могут улучшить ваш пользовательский опыт KO/AT без реального изменения опыта для кого-либо еще.

Дополнения к UX вашего приложения

Это функции, которые вы можете добавить в свое приложение, чтобы улучшить UX для пользователей KO/AT.

Пропустить ссылки

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

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

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

Вот пример того, как мы обрабатываем пропущенные ссылки. После того, как вы нажмете на ссылку, нажмите Tab ⇥ и посмотрите в левый верхний угол. Ссылка для пропуска имеет две ссылки: « Основное содержимое » и « Примеры кода» . Вы можете использовать Tab ⇥ для перемещения между ними, нажмите Enter , чтобы перейти к ссылке.

Ярлыки/меню горячих клавиш

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

Для пользователей KO/AT ярлыки/горячие клавиши бесценны. Они позволяют им использовать приложения по назначению, без необходимости визуально наводить что-либо или перемещаться по приложению, чтобы перейти к элементу или содержимому. Хотя частые действия и контент всегда приветствуются, когда они представлены в меню ярлыков/горячих клавиш, вы также можете рассмотреть некоторые менее частые действия, которые могут быть скрыты в вашем пользовательском интерфейсе (по уважительной причине), но все же это то, что пользователь хотел бы видеть. иметь доступ.

Создание ярлыков для этих функций будет чрезвычайно полезно для пользователей KO/AT. Вы можете сделать команду немного более сложной, например, используя (3) нажатия клавиш для ее вызова, чтобы подразумевать, что это менее часто используемая часть функциональности. Если у вас есть меню быстрого доступа/горячих клавиш, обязательно найдите способ продвигать его в своих приложениях, чтобы ваши пользователи, особенно пользователи KO/AT, могли найти его и эффективно использовать.

Обучение пользователей

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

Одна вещь, которую вы должны задать себе при разработке, размещении и/или написании текста для вашего обучения пользователей:

«Если бы я не мог этого видеть, было бы полезно понять ______?»

Во многих случаях просто переориентация обучения пользователей через эту призму может привести к гораздо лучшему опыту для всех. Например, вместо того, чтобы говорить «Далее, нажмите кнопку ниже», вы можете написать: «Чтобы начать, нажмите кнопку СТАРТ». Второй метод удаляет визуальную ориентацию и вместо этого сосредотачивается на общей информации, которая была бы в распоряжении как зрячего, так и пользователя KO / AT.

Примечание : я должен упомянуть, что совершенно нормально использовать функции обучения пользователей, такие как указания, чтобы визуально указывать на вещи в приложении, просто убедитесь, что сопутствующий текст позволяет вашим пользователям KO / AT понять те же самые вещи, которые упоминаются визуально.

Дополнения к UX вашего приложения

Есть изменения или настройки, которые вы можете внести в общие компоненты/функции, чтобы улучшить UX для пользователей KO/AT.

Модальная фокусировка

Теперь мы переходим к мелочам. Одна из замечательных особенностей доступности заключается в том, что она открывает двери для новых способов решения проблем, о которых вы, возможно, раньше не задумывались. Вы можете сделать что-то полностью доступным в соответствии с WCAG 2.0 AA и решить проблему с помощью самых разных подходов. Для модальных окон мы в Deque придумали интересный подход, который был бы совершенно незаметен для большинства зрячих пользователей, но почти сразу же был бы замечен пользователями KO/AT.

Чтобы модальное окно было доступным, оно должно объявить о себе при вызове. Два распространенных способа сделать это: сфокусировать тело модального окна после открытия модального окна или сфокусировать заголовок модального окна (если он есть) после открытия модального окна. Вы делаете это, чтобы AT пользователя мог прочитать намерение модального окна, например «Редактировать профиль» или «Создать новую подписку».

После того, как вы сфокусируете тело или заголовок, нажатие Tab ⇥ отправит фокус на следующий доступный для фокуса элемент в модальном окне — обычно это поле или, если оно находится в заголовке, иногда это кнопка закрытия (X). При переходе на вкладку вы будете перемещаться по всем активным элементам в модальном окне, обычно заканчивая кнопками терминала, такими как СОХРАНИТЬ и/или ОТМЕНА.

Теперь мы подходим к интересной части. После того, как вы сфокусируете последний элемент в модальном окне, повторное нажатие Tab ⇥ вернет вас к первой позиции табуляции, которая в случае модального окна будет либо телом, либо заголовком, потому что с этого мы начали. Однако в наших модальных окнах мы «пропускаем» эту начальную остановку табуляции и переводим вас на вторую остановку (которая в наших модальных окнах — это закрытие (X) в верхнем углу. Мы делаем это, потому что модальное окно не должно постоянно объявлять о себе . снова и снова в каждом цикле Это нужно делать только при первоначальном вызове, а не при любых последующих проходах, поэтому у нас есть специальная программная остановка, которая пропускает себя после первого раза.

Это небольшое (но ценное) улучшение юзабилити, которое мы придумали исключительно для пользователей KO/AT, было совершенно неизвестно всем остальным.

Перемещение по меню навигации и управление фокусом/выделенным

Навигационные меню сложны. Они могут быть структурированы множеством способов, многоуровневыми, вложенными и иметь бесчисленные механизмы вызова, раскрытия и обхода. Это делает важным рассмотрение того, как они взаимодействуют и представляются пользователям KO/AT на этапе проектирования. Хорошие меню должны быть «входными» и «выходными», то есть вы переходите в меню, чтобы использовать его, и выходите из него, чтобы выйти из него (если вы его не используете).

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

1. Перейдите на https://pattern-library.dequelabs.com/;
2. Нажмите Tab ⇥ три раза. Первая вкладка — это ссылка для пропуска (которую мы рассмотрели ранее), вторая — это логотип, который действует как ссылка «вернуться домой», а третья вкладка входит в меню;
3. Теперь, когда вы находитесь в меню, используйте клавиши со стрелками ( → и ↓ ), чтобы перемещать и открывать разделы меню;
4. Нажатие Tab ⇥ в любой момент приведет к выходу из меню и отправит вас к содержимому страницы.

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

Логическое удержание фокуса (удаление строки IE, возврат на страницу)

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

• Куда перемещается фокус, когда поле, в котором вы находитесь, удаляется?
• Что делать, если вас перенаправили на другую вкладку, где приложение имеет новый контекст?
• Что делать после закрытия модального окна из-за действия терминала, такого как СОХРАНИТЬ?

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

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

Главный вывод из всего этого — не столько конкретные примеры, сколько менталитет, который их поддерживает — рассмотрите UX для вашего приложения через призму пользователя KO/AT, а также хорошо видящего пользователя, использующего только мышь. Некоторые из лучших и самых умных идей рождаются из самых интересных и важных задач.

Если вам нужна помощь в обеспечении доступности ваших функций, все приведенные выше примеры, а также бесчисленное множество других, можно протестировать с помощью бесплатного приложения Deque для тестирования доступности в Интернете: ax pro. Это бесплатно, и вы можете зарегистрироваться здесь.