Контрольный порядок TAB с javascript (реагирует)

Question

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

• установить tabindex всего, что я хочу игнорировать, равным -1 (в то время как я хочу игнорировать его)
• Установить tabindex следующего элемента, который я хочу сфокусироваться на 1 (что не сработало)
• Сфокусировать следующий элемент, на котором я хочу сфокусироваться, с помощью метода .focus() (это будет означать множество краевых случаев для обработки)

Я добавил набросок того, чего я хочу достичь ниже, верхнее поле - это обычное меню, каждая из ссылок открывает свое собственное подменю (как, например, в zalando )

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

Answer 1

Меню Заландо - беспорядок, и то, чего вы пытаетесь добиться, не подражая им, я боюсь. Не ожидается поведение, чтобы перейти в подменю, а затем перемещаться с помощью стрелок вверх и вниз (добавление стрелок влево и вправо поможет немного). Любой, кто использует программу чтения с экрана, может потеряться / запутаться.

См. Этот пример W3 C , где у них есть ссылка верхнего уровня, а затем рядом со стрелкой вниз, которую можно активировать. нажмите Enter, чтобы открыть подменю.

Для мобильных устройств вы можете затем превратить их в один пункт меню на строку и сделать стрелку вниз намного больше (не менее 48 на 48 пикселей), и это тоже работает.

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

Answer 2

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

<nav>
  <Tab tabindex='0' >link 1</Tab>
  <Tab tabindex='-1'>link 2</Tab>
  <Tab tabindex='-1'>link 3</Tab>
  <Subnav>
   ...
  </Subnav>
  <Searchbar />
<nav>

tabindex равен -1 на других вкладках, поэтому они пропускаются при нажатии tab. Чтобы добраться до них, они должны быть сфокусированы программно (например, когда пользователь нажимает кнопку со стрелкой вправо go на правой вкладке)

Вот пример этого при реагировании с использованием компонента вкладок reach-ui https://codesandbox.io/s/reach-tabs-test-u05vq

Answer 3

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

Отрицательные табличные индексы следует использовать только в том случае, если вам нужно сфокусировать интерактивный элемент. (Гиперссылки интерактивны, так что нет).

Вообще говоря, если вы переходите между гиперссылками, вам вообще не следует связываться с tabindex. Гиперссылки уже ориентированы на клавиатуру . Пожалуйста, не помещайте атрибуты tabindex в элементы <a>, <button> или <input>. Они уже являются частью последовательности вкладок.

Если у вас есть веские основания для перехода в последовательности, есть атрибут aria-flowto, который предназначен для этой цели, но он плохо поддерживается и не полностью указан , Вы можете попробовать это, хотя. Если ссылка суб-навигации 1 имеет идентификатор subnavlink1, вы пометите ссылку 1 следующим образом:

<a href="whatever.html" aria-flowto="subnavlink1">Link 1</a>

Это может работать в некоторых браузерах, но я замечаю, что это не работает в Chrome, даже хотя вкладка «Доступность» в инструментах разработчика распознает ее наличие.

Для более надежного отклонения от последовательности вкладок порядка разметки прослушайте событие focusout или blur для элемента, который вы «покидаете», и используйте его. этот обработчик событий, чтобы сосредоточиться на каком-то другом элементе. Эти события очень похожи , оба позволяют перенаправить последовательность вкладок. Они стреляют до того, как сфокусируется на следующем элементе, так что вы можете сосредоточиться, где хотите. Вам может потребоваться предотвращать дефолт или возвращать ложный шаблон

Basi c, который может выглядеть примерно так:

var lnk = document.querySelector("nav > a:nth-child(1)");
var snl = document.querySelector("#subnav > a:nth-child(1)");

lnk.addEventListener("focusout", function () {
    snl.focus();
});

Вы должны (конечно) мягко кодировать навигационные индексы в строке селектора , так что вы можете использовать один и тот же трюк для всех ссылок, если это необходимо.