Блог

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

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

В вашем распоряжении есть несколько инструментов.

Заголовки

Заголовки — это один из самых простых способов запекания при очень простом переключении разделов. Пользователи программы чтения с экрана будут использовать клавиши с 1 по 6 для навигации по уровням заголовков, поэтому, если обе ваши панели являются <h2> s (например), они могут просто переключать местоположение с помощью заголовков.

Сочетания клавиш

Вы можете установить сочетания клавиш.

Однако вы никогда не должны делать это изолированно. Под этим я подразумеваю, что если вы говорите, что окно переключения — say Alt 0, вы должны разрешить пользователям изменять эти привязки клавиш в соответствии со своими предпочтениями.

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

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

Затем мы переходим к интересной области, которую я хотел бы проиллюстрировать словами: «Как бы однорукий пользователь использовал вашу страницу?».

Этот пример позволяет понять, что также можно рассмотреть какое-то решение с липкими клавишами, где комбинации клавиш могут выполняться с помощью последовательности клавиш с интервалом в любое время (например, у вас может быть кто-то без РУК, использующий технологию eye gaze или переключатель, поэтому вы не хотите вводить ограничение по времени.)

Очевидно, что приведенные выше примеры являются крайними, но вы можете захотеть рассмотреть (и на самом деле любой, кто использует eye gaze, Сможет визуально переключать панели и т. Д.)

Голосовые команды

Также важно иметь возможность переключать панели с помощью голоса (например, Dragon Naturally Speaking).

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

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

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

Предполагая, что эти кнопки имеют уникальные имена, я мог бы просто сказать «нажмите активировать панель 2» (где «активировать панель 2» — это название кнопки) и немедленно переключиться.

Вам нужно управлять фокусом?

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

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

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

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

Пользовательские настройки

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

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

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

Это сложная проблема! Я много думал над подобной проблемой. Я изложил одну идею, которая использует ARIA live regions, и альтернативную идею, которая может работать лучше, если поддержка быстрой клавиатуры жизненно важна.

1. Анонсы регионов в режиме реального времени в рамках <form>

<output> Тег может быть тем, что вы ищете. Он сопоставлен с ролью ARIA status , поэтому любые изменения в его содержимом будут объявлены без какого-либо изменения фокуса. Таким образом, пользователь может продолжать перемещаться и вносить изменения в левой части без необходимости постоянно переворачиваться на правую сторону, чтобы узнать, какие изменения были внесены.

Роль status имеет неявное значение aria-live «вежливый», так что объявление будет ждать, пока не будет завершено любое другое описательное объявление.

Он имеет неявное aria-атомарное значение «true», что означает, что любое изменение вызовет объявление всего содержимого элемента, которое может соответствовать или не соответствовать содержимому. Если нет, добавьте aria-atomic="false" для считывания только измененный узел.

Если содержимое внутри <output> может быть чем угодно, кроме формулировки содержимого (включая <div> s или теги заголовков), то вместо этого вам следует использовать a <div> с атрибутом роли «статус».

Пользовательские элементы управления с клавиатуры могут усложняться различными типами программного / аппаратного обеспечения вспомогательных технологий (AT). Кроме того, эти команды, вероятно, не могут быть легко обнаружены. Некоторые ATS предоставляют команду клавиатуры для переключения между управляющим элементом и элементом, назначенным через его атрибут aria-controls. К сожалению, эта функциональность плохо поддерживается, но это текущий стандарт, поэтому со временем поддержка может улучшиться. В настоящее время его поддерживает только NVDA в Windows, с помощью команды клавиатуры Insert Alt M.

Добавление элементов управления aria к элементу, управляющему <output> / status , в любом случае является обязательным, поэтому присвойте ему уникальный атрибут id и установите его в качестве значения элементов управления aria для каждого элемента формы внутри <form> .

Если <output> / status заключен в a <fieldset> , а все входные данные заключены в содержащий <fieldset> , то каждый <fieldset> из них действует как контейнер группировки, поэтому пользователь может быстро перемещаться между ними. Как часть этого, убедитесь <fieldset> , что содержит <output> непосредственно следующие <fieldset> , содержащие элементы формы в исходном порядке. Если это невозможно, добавьте атрибут aria-owns к содержащему <form> и ссылайтесь на атрибуты id обоих <fieldset> разделов с пробелом между ними.

2. Всегда открытый немодальный <dialog>

Вместо этого вы можете рассмотреть возможность сделать правую боковую панель всегда открытой немодальной <dialog> . A <button> рядом с каждым интерактивным элементом на левой панели переместит фокус на <dialog> , а клавиша Escape вернет фокус обратно на <button> . Фокус не привязан к немодальному <dialog> , поэтому пользователь по-прежнему может перемещаться между каждой панелью, используя обычные методы навигации. <dialog> Для отображения должен быть open атрибут, и он также должен иметь aria-modal="false" .

Для каждого <button> из них потребуется значение aria-controls, ссылающееся на <dialog> атрибут ‘s id, и значение aria-haspopup «dialog». Символы <button> s могут быть невидимыми, пока не будут сфокусированы.

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

На самом деле, самое важное не в том, чтобы иметь возможность быстро переключаться между различными частями (вы должны только каким-то образом предоставить возможность делать это только с помощью клавиатуры), а в том, чтобы не терять положение курсора при переключении. Например, если я отредактирую что-то слева, перейду вправо, чтобы проверить результат, а затем вернусь к левой стороне, я ожидаю найти точку вставки именно там, где я ее оставил. Вы действительно должны убедиться, что это всегда правильно и как можно ближе, когда происходят изменения (особенно когда это асинхронно, т. Е. Изменение происходит на правой стороне, когда вы находитесь на левой стороне).

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

Не стесняйтесь добавлять другие более простые или дополнительные сочетания клавиш, если переключение должно быть действительно частым, например, Ctrl Tab, если такие сочетания клавиш еще не используются для чего-то другого. Клавиши F6 и Shift F6 — не самые простые сочетания клавиш, особенно на ноутбуках, где все клавиши F1-12 могут быть недоступны вообще или доступны только при использовании дополнительной клавиши FN. Лично я всегда считал F6 приемлемым выбором, но это всего лишь мнение; по крайней мере, у нас есть что-то, и это, конечно, лучше, чем ничего.

Однако не заменяйте существующий часто используемый ярлык. (например, Ctrl Tab = переключение между разными вкладками, не используйте его для переключения между представлениями, если в вашем приложении есть вкладки, и сохраните его для вкладок)