Блуждающий tabindex: разбираем HTML-атрибут на примерах
Хочешь проверить свои знания по JS?
Подпишись на наш канал с тестами по JS в Telegram!
Перевод статьи «HTML Roving tabindex Attribute Explained with Examples».
Вам когда-нибудь случалось использовать CSS-свойства order или direction? Возможно, вы пользовались ими десятки раз. Но осознавали ли вы, что эти свойства приводят к отключению того, что отображается на экране, от того, что у вас на самом деле в DOM?
«Использование свойства order отсоединяет визуальное представление контента от порядка, определенного в DOM», — документация MDN.
Элемент изменяет свое направление лишь виртуально, HTML остается тем же. В результате моя клавиатурная навигация стала начинаться с конца.
Поэтому мы воспользуемся приемом под названием «блуждающий tabindex» (англ. roving tabindex). Но сперва давайте освежим свои знания по части tabindex как такового.
HTML-атрибут tabindex
HTML-атрибут tabindex используется для указания tab-позиции элементов. Обычно с его помощью задается порядок перехода по элементам при помощи клавиши Tab.
В качестве значений tabindex принимает только целые числа от 0 до 32767. Если вы не определите значение, по умолчанию будет использоваться 0.
tabindex=»0″ задает любому элементу естественный порядок табуляции:
tabindex=»-1″ удаляет элемент из естественного порядка табуляции:
Что такое блуждающий tabindex?
Более подробное руководство можно почитать здесь.
Как использовать блуждающий tabindex
Атрибут dir=»rtl» мы применили для визуального разворота порядка (order) HTML-кода, приведенного ниже. (Это эквивалент использования CSS-свойства direction ).
После всего этого код выглядит следующим образом:
Рабочую версию можно посмотреть на Codepen (попробуйте перемещаться по элементам при помощи клавиши Tab).
Преимущества использования блуждающего tabindex:
Недостатки использования блуждающего tabindex:
Итоги
Использование блуждающего tabindex не связано с какими-то конкретными подходами и не имеет предпочтительных способов реализации. Поэтому, как бы вы ни написали свой код, он будет хорош, если вы будете придерживаться следующего процесса:
При работе с формами зачастую удобнее и быстрее переключаться между полями с помощью клавиши Tab, чем тыкать в нужное поле мышью. Однако, не всем известно, что можно управлять последовательностью, по которой происходит смена фокуса при нажатии Tab-а. Для этого в HTML4.01 существует атрибут tabindex.
С помощью клавиши TAB на странице можно ходить по элементам, которые способны принимать фокус. К ним относятся ссылки (A), элементы форм (BUTTON, INPUT, TEXTAREA, SELECT), области имедж-мапы (AREA) и OBJECT. Причем последовательность обхода такая же, в каком порядке элементы располагаются в потоке документа.
Browser-test
Однако, не все браузеры одинаково полезны ведут себя при tab-обходе. Убедимся в этом на примере простого кода:
На первый взгляд всё просто, элементы должны принимать фокус в том же порядке, в котором располагаются в коде. Но на практике видим следующее поведение.
Итак, есть серьезные отличия в поведении браузеров, а в случае Сафари и Оперы они довольно критичны.
О tabindex
Атрибут tabindex принимает целочисленные неотрицательные значения (не более 32767), которые показывают порядок, в котором будет совершаться tab-обход. Для предыдущего примера расставим табиндексы так, чтобы фокус сначала получили ссылки, потом текстарии, а остальные элементы оставим без атрибута:
И, о чудо, даже неисправимые Опера и Сафари отрабатывают именно так, как задумывалось.
Tabindex & HTML5
указано, что tabindex будет глобальным атрибутом для всех HTML-элементов. Удобно, однако 🙂
pepelsbey
Не очень понятно какой это язык:
…не то HTML (капс в тегах), не то XHTML (закрытый одиночный тег). Странно, в общем.
Ответить
| 26.06.2008, 23:01 Ответить |
1234ruAlexNZ1234ruAlexNZТ.е. вы спросили у пользователя его согласие, как это принято в параноидальной MS Windows (R). М-да. Но тут есть подводный камень. Дело в том, что такой полезный код работает только при кнопке (как в первом примере), а вот во втором примере случится следующее: FireFox и Opera покажут вопрос юзеру, но данные отправят при любом ответе, а IE так и вовсе не покажет вопроса. 🙂 Возрадуйтесь! — это только для JavaScript’а? Нет. Ну вот, хотел отделаться только первым предложением. 🙂 | 06.08.2008, 07:08 Ответить |
| Значение | Описание |
|---|---|
| отрицательное | элемент можно выделить, но он не участвует в последовательной навигаций с помощью клавиатуры |
| 0 | элемент можно выделить и он доступен через последовательную навигацию клавиатуры, но относительный порядок определяется соглашением платформы |
| положительное | элемент можно выделить и он доступен через последовательную навигацию клавиатуры; относительный порядок будет определяться значением атрибута: переход происходит от меньшего значения к большему |
Добавить элемент в список табуляции
Попробуйте использовать для HTML-элемента button или там, где это необходимо.
Удалить элемент из списка табуляции
Элемент будет удален из списка табуляции, но все равно его можно будет выделить.
Пользовательский порядок табуляции (не рекомендуется)
Положительные значения вставляют элемент в список табуляции в соответствии со значением. Элементы без предпочтений (т. e. tabindex = «0» или собственные элементы, такие как button или a ) будут добавляться после остальных.
Использовать положительные значения не рекомендуются, так как они нарушают ожидаемое поведение табуляции и могут сбивать с толку людей, которые применяют на устройства чтения с экрана. Попробуйте создать естественный порядок, изменив структуру DOM.
bitsofcode
Save Article for Offline Nov 29, 2018 html
tabindex is a global attribute that can be applied to most HTML elements with content. It controls two things:
Focus order
To understand how the tabindex attribute works, we first need to understand how focus is controlled on a page.
There are six 1 HTML elements which, by default, are focusable:
By default, only these elements can be brought into focus either with a user tabbing around the page with a keyboard or via the focus() method in Javascript.
Without any intervention, calling focus() on any other element simply will not work.
The order in which these elements are placed in the source HTML document controls the order in which they become focusable when navigating with a keyboard.
Although this default behaviour covers most of the interaction we would need, there may be cases where we want to remove, add, or re-arrange items in the focus order. This is where the tabindex attribute becomes handy.
How to use tabindex
The tabindex attribute can be applied to almost any element, whether it is by default focusable or not. The value of the attribute must be a valid integer and can either be negative, positive, or exactly zero.
Negative tabindex values
Click me to start, then press the «tab» key
I’ll be in focus first
I won’t be in focus 🙁
I’ll be in focus last
A tabindex value of zero
A tabindex equals to exactly zero will place the element in the default focus order, determined by its position in the source HTML. It can be applied to elements that are not typically focusable, and will add them to the natural focus order as if they were.
Click me to start, then press the «tab» key
I’ll be in focus first
Positive tabindex values
Finally, a positive tabindex will place the element in the focus order, but it’s position will be determined by the specific number, starting from 1 and going up. Elements with a positive tabindex will also be placed in front of elements that don’t have a tabindex attribute.
To test this out, click on the URL bar of your browser, then hit tab. You’ll see that the first two focusable items on this page are the buttons below, even though they are in the middle of the source HTML.
I’m the first focusable item on the page
I’m the second
Programmatic focus and tabindex
Besides controlling which elements can be focusable via the keyboard and focus order, the tabindex attribute also controls which elements can be focusable via Javascript.
Adding the tabindex attribute to an element, regardless of the value, makes it focusable via Javascript. This means that we can make elements that are previously unfocusable to be focusable via Javascript, without also making them able to be focused via the user tabbing around using their keyboard.
If we were to navigate using the keyboard, we will see that it is not able to grab focus.
Click me to start, then press the «tab» key
However, we can bring focus to it using the focus() method.
Click me to focus the DIV
Next, we’ll see how this difference between tab and programmatic focus makes the tabindex attribute useful.
When to use tabindex
The tabindex attribute can be very useful, but has potentially destructive consequences if not used correctly. Each category of tabindex value should be used in different circumstances.
When to use a negative tabindex value
As we have covered, a negative tabindex value will remove the element from tab focus, but can add elements to programmatic focus.
A great example of when this is useful is modals. Modal containers are typically unfocusable elements like
When to use a tabindex value of zero
A tabindex of zero is typically used either to add focus back to elements that it was programatically removed from.
When to use a positive tabindex value
tabindex in CSS
Is it possible to control tabindex with CSS and if yes, which browsers support it and on which elements?
EDIT
I should say, my goal is to catch keydown events on a div. I saw this page http://www.quirksmode.org/js/events/keys.html# that tests keyboard events and it shows that the only way keydown fires on anything other than document and body or some kind of form element or link is to have tabindex declared on it. But I read on W3C site:
The following elements support the tabindex attribute: A, AREA, BUTTON, INPUT, OBJECT, SELECT, and TEXTAREA.
So I am a little confused, what to do in order to be standarts compliant and make my use case work?
EDIT2
My whole use case is a div with a lot of content with an artificial scroll bar. I am able to scroll it with mouse events but no luck with the keyboard so far.
2 Answers 2
Update 2017
As pointed out by @Wallop in the comments, the nav-index property was dropped from the spec in 2015 due to «lack of implementation interest».
Take a look at the nav-index property introduced by W3C in CSS3-UI.
This property has exactly the same behavior as a tabindex and is applicable to any element.
The ‘nav-index’ property is an input-method-neutral way of specifying the sequential navigation order (also known as «tabbing order»). This property is a replacement for the HTML4/XHTML1 attribute ‘tabindex’
Being probably the best standards-compliant solution for the use case, nav-index is interpreted only by Opera so far (as of June 2012) and is also marked as «Feature at risk» by W3C, therefore may be dropped any time.
Alternative cross-browser solutions are:
standards-compliant: replace DIV by an anchor element ( A ) without a href attribute set, style it with display: block and add the tabindex attribute.