Основы доступа к клавиатуре

Rob Dodson

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

Фокус и порядок табуляции

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

Чтобы переместить фокус на странице, используйте TAB для перехода вперёд и SHIFT + TAB для перехода назад. Элемент в фокусе часто обозначается кольцом фокуса , и в разных браузерах оформление этих колец различается. Порядок перемещения фокуса вперёд и назад по интерактивным элементам называется порядком табуляции .

Интерактивные HTML-элементы, такие как текстовые поля, кнопки и списки выбора, неявно фокусируются : они автоматически вставляются в последовательность табуляции в зависимости от своего положения в DOM . Эти интерактивные элементы также имеют встроенную обработку событий клавиатуры. Такие элементы, как абзацы и блоки div, неявно фокусируются, поскольку пользователям обычно не требуется взаимодействовать с ними.

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

1. Расположите элементы в DOM в логическом порядке
2. Правильно настройте видимость закадрового контента, который не должен получать фокус.

Расположите элементы в DOM в логическом порядке

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

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

Например:

<button style="float: right">Kiwi</button>
<button>Peach</button>
<button>Coconut</button>

<button>Peach</button>
<button>Coconut</button>
<button>Kiwi</button>

Будьте осторожны при изменении визуального положения элементов с помощью CSS, чтобы избежать нелогичного порядка табуляции. Чтобы исправить это, мы переместили плавающую кнопку «Kiwi» после кнопки «Coconut» и удалили встроенный стиль.

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

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

Чтобы предотвратить получение фокуса определенным интерактивным элементом, необходимо присвоить элементу одно из следующих свойств CSS:

• display: none
• visibility: hidden

Чтобы добавить элемент обратно в порядок вкладок, например, при открытой навигации, замените эти свойства CSS на:

• display: block
• visibility: visible

Следующие шаги

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