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

Rob Dodson

Alexandra Klepper

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

Добавляйте 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 . Это гарантирует, что контент не будет отображаться в естественном порядке табуляции. Этот метод, называемый управлением фокусом , синхронизирует воспринимаемый пользователем контекст с визуальным контентом сайта.

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

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

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