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

Rob Dodson

Alexandra Klepper

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

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

Что такое tabindex?

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

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

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

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

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

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

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

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

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

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

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

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

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

Выбор подходящего поведения клавиатуры может быть сложным. В руководстве « Accessible Rich Internet Applications (ARIA) Authoring Practices» перечислены типы компонентов и поддерживаемые ими действия с клавиатурой.

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

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

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