Как игнорировать HTML-элемент из tabindex?

Question

Есть ли в HTML способ запретить браузеру индексирование вкладок для определенных элементов?

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

Answer 1

Вы можете использовать tabindex="-1".

Спецификация W3C HTML5 поддерживает отрицательные значения tabindex:

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

---

Обратите внимание, что это функция HTML5, которая может не работать со старыми браузерами.
Чтобы соответствовать стандарту W3C HTML 4.01 (с 1999 г.) , tabindex должен быть положительным.

---

Пример использования ниже в чистом HTML.

<input />
<input tabIndex="-1" placeholder="NoTabIndex" />
<input />

Answer 2

Не забывайте, что, хотя tabindex все строчные в спецификациях и в HTML, в Javascript / DOM это свойство называется tabIndex.

Не сходите с ума, пытаясь понять, почему ваши программно измененные индексы вкладок, вызывающие element.tabindex = -1, не работают. Используйте element.tabIndex = -1.

Answer 3

Если это элементы, естественно, в порядке вкладок, такие как кнопки и привязки, удаление их из порядка вкладок с tabindex = -1 является своего рода запахом доступности. Если они предоставляют дублирующуюся функциональность, удалите их из последовательности вкладок - все в порядке, и рассмотрите возможность добавления aria-hidden = true к этим элементам, чтобы вспомогательные технологии их игнорировали.

Answer 4

Если вы работаете в браузере, который не поддерживает tabindex="-1", вам, возможно, удастся обойтись, просто предоставив вещам, которые необходимо пропустить действительно высокий индекс табуляции . Например, tabindex="500" в основном перемещает порядок табуляции объекта в конец страницы.

Я сделал это для длинной формы ввода данных с брошенной посередине кнопкой. Это не кнопка, которую люди нажимают очень часто, поэтому я не хотел, чтобы они случайно нажимали на нее и нажимали ввод. disabled не будет работать, потому что это кнопка.

Answer 5

Такой взлом, как "tabIndex = -1", не работает для меня с Chrome v53.

Это работает для Chrome и большинства браузеров:

function removeTabIndex(element) {
    element.removeAttribute('tabindex');
}

<input tabIndex="1" />
<input tabIndex="2" id="notabindex" />
<input tabIndex="3" />
<button tabIndex="4" onclick="removeTabIndex(document.getElementById('notabindex'))">Remove tabindex</button>

Answer 6

Просто добавьте атрибут disabled к элементу (или используйте jQuery, чтобы сделать это за вас). Отключено предотвращает фокусировку или выделение входа.

Answer 7

Способ сделать это, добавив tabindex="-1".При добавлении этого к определенному элементу он становится недоступным с помощью навигации по клавиатуре.Здесь есть отличная статья , которая поможет вам лучше понять tabindex .