Делаем нефокусируемые элементы фокусируемыми для ссылок перехода, но не используйте tabindex=0

Иногда необходимо сделать нефокусируемые элементы доступными для чтения с экрана.

Пример: при создании ссылок перехода, таких как <a href="#target">Skip to content</a>, которые переходят на ID, важно, чтобы конкретный элемент также получал фокус, поэтому не только область просмотра прокручивается до элемента, но и фокус устанавливается там. В противном случае пользователь, использующий только клавиатуру, «перепрыгнет» обратно к началу документа, как только он попытается перейти к следующему элементу (ожидая, что табуляция начнется с объекта #target).

Здесь нужен tabindex="0", который работает как положено. Не очень приятно то, что в других случаях использования (например, при переходе по всей странице) это раздражает (обычно вы не хотите фокусироваться на элементах, не доступных для фокусировки).

Обходной путь может быть таким: создать javascript, который при загрузке страницы...

  • сканирует весь документ на наличие ссылок, которые нацелены на идентификатор
  • adds a call to a function addVolatileTabindex to each of those links on activation
    • when the link is activated, addVolatileTabindex adds a tabindex="0" to the targeted element, then focuses it
    • он также добавляет вызов removeVolatileTabindex, когда фокус теряется с целевого элемента
    • когда вызывается removeVolatileTabindex, tabindex="0" снова удаляется

Таким образом, tabindex="0" есть только тогда, когда он действительно нужен, а в противном случае его нет.

Возможно, для этого уже существует решение? Или есть другие способы добиться этого?


javascript accessibility tabindex
person Joshua Muheim    schedule 07.10.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Используйте также tabindex="-1", вы можете удалить tabindex после того, как пользователь отключит вкладку (при размытии), таким образом, фокус никогда не перейдет к элементу, даже если пользователь щелкнет по нему.

person unobf    schedule 07.10.2015
comment
Ах, ты прав, так намного лучше. Но все же я должен установить фокус с помощью JavaScript, верно? - person Joshua Muheim; 07.10.2015
comment
Это то, что делает webaim.org. Первая TAB покажет ссылку перехода к основному контенту. Когда вы выбираете его, фокус перемещается в соответствующую область, вызывается focus() и tabindex удаляется. У них также есть красивое желтое затухание, чтобы было очевидно, где вы находитесь. Когда вы нажимаете TAB после того, как перешли в основную область, вкладка перемещается к следующему фокусируемому элементу в этой основной области, то же самое поведение, которого вы пытаетесь достичь. Я подумал, что вы, возможно, захотите посмотреть на пример. - person slugolicious; 07.10.2015
comment
Хороший ответ. Я не понимаю (или не помню), в каком случае Javascript необходим для установки фокуса при использовании tabindex=-1. Есть ли ошибка в каком-то браузере? Я не могу это воспроизвести. - person Adam; 07.10.2015
comment
@adam, было бы проще, если бы вы разместили отдельный вопрос о tabindex, поскольку в этой области комментариев ограничено количество символов для ответа, и технически она предназначена только для комментирования опубликованного ответа, а не для ответов на другие вопросы. При этом похоже, что вы, возможно, не знакомы с tabindex. Это свойство позволяет элементу получать фокус. На самом деле он не перемещает фокус на элемент. Если вы установите tabindex равным 0, вы сможете перейти к элементу с помощью клавиши TAB. Если вы установите для него значение -1, вы должны использовать javascript, чтобы поместить фокус на элемент. - person slugolicious; 08.10.2015
comment
(продолжение) Вы можете попробовать простой пример. Сделайте ‹div› и ‹button›. Когда вы нажимаете на кнопку, она отправляет фокус на ‹div›. Это не сработает, потому что ‹div› изначально не принимает фокус. Но если вы измените его на ‹div tabindex='-1'›, то он будет работать. -1 просто позволяет элементу получить фокус. Вы можете попробовать еще раз с tabindex='0', и теперь вы можете использовать клавишу TAB, чтобы перейти к ‹div›. (примечание: вы можете не заметить, что ‹div› получает фокус, если у вас нет индикатора фокуса. Добавьте ‹style›div:focus {outline:#00FF00 solid 4px}‹/style›, чтобы сделать индикатор фокуса более очевидный). - person slugolicious; 08.10.2015
comment
@slugolicious: Мой вопрос заключался именно в том, чтобы спросить автора о точности о необходимости использования javascript для установки фокуса, когда элемент уже имеет атрибут tabindex=-1 (см. собственный комментарий unobf над вашим первым) . Я думаю, что это было из-за ошибки в каком-то браузере, но я не могу вспомнить, в каком именно. - person Adam; 09.10.2015