Управляйте фокусом с помощью tabindex

Стандартные элементы HTML, такие как <button> или <input> имеют бесплатную встроенную поддержку клавиатуры. Однако если вы создаете собственные интерактивные компоненты, используйте атрибут tabindex , чтобы гарантировать, что они доступны с клавиатуры.

Проверьте, доступны ли ваши элементы управления с клавиатуры

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

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

Вставка элемента в порядок табуляции

Вставьте элемент в естественный порядок табуляции, используя tabindex="0" . Например:

<div tabindex="0">Focus me with the TAB key</div>

Чтобы сфокусировать элемент, нажмите клавишу Tab или вызовите метод focus() элемента.

Удаление элемента из порядка табуляции

Удалите элемент, используя tabindex="-1" . Например:

<button tabindex="-1">Can't reach me with the TAB key!</button>

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

Обратите внимание, что применение tabindex="-1" к элементу не влияет на его дочерние элементы; если они находятся в порядке табуляции естественным образом или из-за значения tabindex , они останутся в порядке табуляции. Чтобы удалить элемент и все его дочерние элементы из порядка табуляции, рассмотрите возможность использования inert полифила WICG . Полифилл имитирует поведение предлагаемого inert атрибута, который предотвращает выбор или чтение элементов с помощью вспомогательных технологий.

Избегайте tabindex > 0

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

Использование tabindex больше 0 считается антишаблоном , поскольку программы чтения с экрана перемещаются по странице в порядке DOM, а не в порядке табуляции. Если вам нужно, чтобы элемент появился раньше в порядке табуляции, его следует переместить в более раннее место в DOM.

Lighthouse позволяет легко идентифицировать элементы с tabindex > 0. Запустите аудит доступности (Lighthouse > Параметры > Доступность) и найдите результаты аудита «Ни один элемент не имеет значения [tabindex] больше 0».

Создавайте доступные компоненты с помощью «Roving tabindex ».

Если вы создаете сложный компонент, вам может потребоваться добавить дополнительную поддержку клавиатуры помимо фокуса. Рассмотрим встроенный элемент select . Он доступен для фокусировки, и вы можете использовать клавиши со стрелками, чтобы открыть дополнительные функции (выбираемые параметры).

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

Когда это происходит, компонент устанавливает tabindex на -1, устанавливает tabindex дочернего элемента, который должен быть сфокусирован, на 0 и вызывает для него метод focus() .

До

<div role="toolbar">
  <button tabindex="-1">Undo</button>
  <button tabindex="0">Redo</button>
  <button tabindex="-1">Cut</button>
</div>

После

<div role="toolbar">
  <button tabindex="-1">Undo</button>
  <button tabindex="-1">Redo</button>
  <button tabindex="0">Cut</button>
</div>

TODO: DevSite — подумайте и проверьте оценку

Рецепты доступа с клавиатуры

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