Использование табиндекса

Dave Gash

Meggin Kearney

Rob Dodson

Alexandra Klepper

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

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

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

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

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

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

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

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

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

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

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

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

Например, элемент select может получить базовый фокус, но после этого вы можете использовать клавиши со стрелками для отображения дополнительных вариантов выбора. При создании собственного элемента select важно воспроизвести это поведение, чтобы пользователи клавиатуры могли взаимодействовать с вашим элементом управления.

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

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

<radio-group>
    <radio-button>Water</radio-button>
    <radio-button>Coffee</radio-button>
    <radio-button>Tea</radio-button>
    <radio-button>Cola</radio-button>
    <radio-button>Ginger Ale</radio-button>
</radio-group>

Чтобы определить, какая поддержка клавиатуры им нужна, обратитесь к руководству ARIA Authoring Practices . Раздел 2 содержит список шаблонов проектирования, включая таблицу характеристик для групп радиокнопок — существующего компонента, который наиболее точно соответствует вашему новому элементу.

Одно из распространённых поведений клавиатуры, которое должно поддерживаться, — это клавиши со стрелками вверх/вниз/влево/вправо. Чтобы добавить это поведение в новый компонент, мы используем технику, называемую roving tabindex .

Перемещающийся tabindex работает путем установки tabindex в значение -1 для всех дочерних элементов, за исключением активного в данный момент.

<radio-group>
  <radio-button tabindex="0">Water</radio-button>
  <radio-button tabindex="-1">Coffee</radio-button>
  <radio-button tabindex="-1">Tea</radio-button>
  <radio-button tabindex="-1">Cola</radio-button>
  <radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>

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

<radio-group>
    <!-- Assuming the user pressed the down arrow, we'll focus the next available child -->
    <radio-button tabindex="-1">Water</radio-button>
    <radio-button tabindex="0">Coffee</radio-button> // call .focus() on this element
    <radio-button tabindex="-1">Tea</radio-button>
    <radio-button tabindex="-1">Cola</radio-button>
    <radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>

Когда пользователь достигает последнего (или первого, в зависимости от направления перемещения фокуса) дочернего элемента, фокус возвращается к первому (или последнему) дочернему элементу.

Попробуйте следующий пример. Проверьте элемент в DevTools, чтобы увидеть, как индекс табуляции перемещается с одного радиоэлемента на другой.

Модальные и клавиатурные ловушки

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

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

Исключением из этого правила являются модальные окна. Тем не менее, при создании модальных окон всё равно следует избегать использования tabindex . С помощью inert можно предотвратить случайное взаимодействие пользователей с элементом (преднамеренную клавиатурную ловушку). Используйте элемент <dialog> , который по умолчанию инертен, чтобы создать модальное окно для пользователей, блокируя щелчки и нажатия клавиш за его пределами. Это позволяет пользователю сосредоточиться на необходимом выборе.