35 lines
1.3 KiB
Plaintext
35 lines
1.3 KiB
Plaintext
|
Navigation using the Tab key should be restricted to elements on the page that users can interact with.
|
||
|
|
|
||
|
|
== Why is this an issue?
|
||
|
|
|
||
|
|
The misuse of the `tabIndex` attribute can lead to several issues:
|
||
|
|
|
||
|
|
- Navigation Confusion: It can confuse users who rely on keyboard navigation, as they might expect to tab through interactive elements like links and buttons, not static content.
|
||
|
|
- Accessibility Issues: It can create accessibility problems, as assistive technologies provide their own page navigation mechanisms based on the HTML of the page. Adding unnecessary tabindexes can disrupt this.
|
||
|
|
- Increased Tab Ring Size: It unnecessarily increases the size of the page's tab ring, making navigation more cumbersome.
|
||
|
|
|
||
|
|
== How to fix it
|
||
|
|
|
||
|
|
Simply remove the `tabIndex` attribute or set it to `"-1"` to fix the issue.
|
||
|
|
|
||
|
|
=== Code examples
|
||
|
|
|
||
|
|
==== Noncompliant code example
|
||
|
|
|
||
|
|
[source,html,diff-id=1,diff-type=noncompliant]
|
||
|
|
----
|
||
|
|
<div tabIndex="0" />
|
||
|
|
----
|
||
|
|
|
||
|
|
==== Compliant solution
|
||
|
|
|
||
|
|
[source,html,diff-id=1,diff-type=compliant]
|
||
|
|
----
|
||
|
|
<div />
|
||
|
|
----
|
||
|
|
|
||
|
|
== Resources
|
||
|
|
=== Documentation
|
||
|
|
- MDN web docs - https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex[tabindex]
|
||
|
|
- The a11y project - https://www.a11yproject.com/posts/how-to-use-the-tabindex-attribute/[Use the tabindex attribute]
|