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

Rob Dodson

Alexandra Klepper

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

Добавляйте tabindex только к интерактивному контенту. Даже если контент важен, например ключевое изображение, пользователи программ чтения с экрана смогут понять его, не добавляя фокуса.

Что такое табиндекс?

Если вам необходимо изменить порядок табуляции по умолчанию, предоставляемый встроенными элементами, вы можете использовать HTML-атрибут tabindex , чтобы явно установить положение табуляции элемента.

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

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

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

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

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

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

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

Управляйте фокусом на уровне страницы

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

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

Управление фокусом в компонентах

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

Понять, какое поведение клавиатуры реализовать, может быть сложно. В руководстве «Практика разработки доступных полнофункциональных интернет-приложений (ARIA)» перечислены типы компонентов и типы действий с клавиатуры, которые они поддерживают.

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

Вставьте элемент в естественный порядок табуляции, используя 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>

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

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