для чего используется атрибут tabindex
Блуждающий 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 не связано с какими-то конкретными подходами и не имеет предпочтительных способов реализации. Поэтому, как бы вы ни написали свой код, он будет хорош, если вы будете придерживаться следующего процесса:
Атрибут tabindex
| Значение | Описание |
|---|---|
| отрицательное | элемент можно выделить, но он не участвует в последовательной навигаций с помощью клавиатуры |
| 0 | элемент можно выделить и он доступен через последовательную навигацию клавиатуры, но относительный порядок определяется соглашением платформы |
| положительное | элемент можно выделить и он доступен через последовательную навигацию клавиатуры; относительный порядок будет определяться значением атрибута: переход происходит от меньшего значения к большему |
Добавить элемент в список табуляции
Попробуйте использовать для HTML-элемента button или там, где это необходимо.
Удалить элемент из списка табуляции
Элемент будет удален из списка табуляции, но все равно его можно будет выделить.
Пользовательский порядок табуляции (не рекомендуется)
Положительные значения вставляют элемент в список табуляции в соответствии со значением. Элементы без предпочтений (т. e. tabindex = «0» или собственные элементы, такие как button или a ) будут добавляться после остальных.
Использовать положительные значения не рекомендуются, так как они нарушают ожидаемое поведение табуляции и могут сбивать с толку людей, которые применяют на устройства чтения с экрана. Попробуйте создать естественный порядок, изменив структуру DOM.
При работе с формами зачастую удобнее и быстрее переключаться между полями с помощью клавиши 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 Ответить |