Управляйте фокусом с помощью 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 . В этом руководстве перечислены общие шаблоны пользовательского интерфейса и указано, какие ключи должны поддерживать ваши компоненты.