Тактильное использование вкладок

Попробуйте свои силы в HOCUS :FOCUS или проведите сегодняшний день, используя табуляцию вместо обычной навигации с помощью мыши. Разочаровывает? Давайте поговорим о работе с вкладками в Интернете.

1. Как пользоваться вкладками
2. tabindex
3. Порядок DOM
4. Элементы управления клавиатурой
5. Слушатели событий и KeyboardEvent
6. Особое упоминание: Ярлыки и входы

Как пользоваться вкладкой

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

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

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

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

Здесь снова вступает в игру видимость, потому что если вы не можете определить, где вы находитесь на странице, вы начинаете чувствовать себя Гомером Симпсоном, пытающимся угадать нужную кнопку.

tabindex

Атрибут HTML tabindex (tabIndex в React) принимает числовые значения.

• tabindex="0" помещает элементы в порядок табуляции.

• tabindex="-1" убирает элементы из порядка вкладок.

• tabindex="1" или любое другое целое положительное число изменяет порядок вкладок. Это ТАБУ!!! Никогда не используйте его.

Если вам нужно изменить порядок вкладок, вам действительно нужно изменить порядок появления элементов в DOM.

Порядок DOM

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

При переходе по вкладкам элементы фокусируются в порядке их появления в DOM/дереве доступности, а не в порядке их расположения.

<div className="button-container">
  <button id=1>1</button>
  <button id=2>2</button>
  <button id=3>3</button>
</div>

.button-container {
  display: flex;
  flex-direction: row-reverse;
}

С помощью этого кода эти кнопки появятся на странице в ряд, начиная с кнопки 3 и заканчивая кнопкой 1, но использование клавиши табуляции приведет к фокусировке кнопки 1, затем 2, затем 3.

Это также означает, что верно и обратное действие.

<div className="button-container">
  <button id=close>Close</button>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <button>Click me!</button>
</div>

.button-container {
  display: flex;
  flex-direction: row-reverse;
}

Моя кнопка закрытия появится в правой части контейнера после списка и кнопки «Нажмите меня!», но она все равно будет первым элементом, на который будет сфокусирована вкладка вкладка. Таким образом, вы можете расположить кнопку закрытия в правом верхнем углу контейнера, и она будет выглядеть красиво и все равно будет сфокусирована первой.

Чтобы просмотреть дерево доступности, вы можете использовать полное дерево доступности Chrome DevTools или инспектор доступности Firefox DevTools, который имеет причудливое представление порядка вкладок.

Элементы управления клавиатурой

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

Слушатели событий и KeyboardEvent

Когда вы взаимодействуете с элементом с помощью клавиатуры, скринридера или мыши, это регистрирует событие HTML DOM Event. Этот объект события содержит информацию о вводе пользователя. При использовании клавиатуры создается объект KeyboardEvent, который содержит строку, представляющую клавишу, была ли нажата клавиша alt или option, а также другую информацию об использованной клавише. Посмотрите инструмент и список событий JavaScript KeyCode для демонстрации и информации, связанной с нажатием клавиши.

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

Встроенный HTML:

<button onclick="doThings()">Click me to do things!</button>

JavaScript:

<button id="doThings">Click me to do things!</button>

document.getElementById('doThings').addEventListener("click", doThingsFunction)

Поскольку JavaScript-фреймворки, такие как React, добавляют сложности, их синтаксис слушателей событий и объектов часто работает по-разному. В React такие события, как onclick, имеют верблюжий регистр, как onClick. В то время как HTML отказался от таких свойств, как keyCode и keyChar в пользу свойства key, которое возвращает строку, React 17 добавил поддержку свойства code для своих событий.

Чтобы получить доступ к свойствам объекта события, достаточно передать объект события обработчику события.

Встроенный HTML:

<button onclick="doThings(event)">Click me to do things!</button>

JavaScript:

<button id="doThings">Click me to do things!</button>

function doThingsFunction(event) {
  console.log(event.key)
}

document.getElementById('doThings').addEventListener("click", doThingsFunction)

React JSX:

<button onClick={(event) => doThings(event)}>Click me to do things!</button>

Специальное упоминание: Ярлыки и входы

Всегда связывайте метки с вводимыми данными.

<label for="name">Name:</label>
<input id="name" type="text">

Фокусировка <label> — это то же самое, что и фокусировка связанного с ним <input>. Это облегчает фокусировку, нажатие и взаимодействие с ними, и может быть использовано творчески. Это также может сделать поиск неисправностей фокусировки немного сложнее!

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