50 lines
1.7 KiB
Plaintext
50 lines
1.7 KiB
Plaintext
== Why is this an issue?
|
|
|
|
Positive ``++tabIndex++`` values can disrupt the natural tab order of the webpage. This can be confusing for screen reader users who rely on a logical tab order to navigate through the content. If the tab order doesn't match the visual or logical order of elements, users may struggle to understand the page structure.
|
|
|
|
Therefore, it's recommended to avoid using positive ``++tabIndex++`` values.
|
|
|
|
== How to fix it
|
|
|
|
If you need to make an element focusable that isn't by default (like a ``++<div>++`` or ``++<span>++``), you can use ``++tabIndex="0"++``. This will add the element to the natural tab order based on its position in the HTML. Otherwise, either remove the ``++tabIndex++`` value or use ``++tabIndex="-1"++`` to remove the element from the tab order.
|
|
|
|
=== Code examples
|
|
|
|
==== Noncompliant code example
|
|
|
|
[source,javascript,diff-id=1,diff-type=noncompliant]
|
|
----
|
|
function MyDiv() {
|
|
return (
|
|
<div>
|
|
<span tabIndex="5">foo</span> // Noncompliant
|
|
<span tabIndex="3">bar</span> // Noncompliant
|
|
<span tabIndex="1">baz</span> // Noncompliant
|
|
<span tabIndex="2">qux</span> // Noncompliant
|
|
</div>
|
|
);
|
|
}
|
|
----
|
|
|
|
==== Compliant solution
|
|
|
|
[source,javascript,diff-id=1,diff-type=compliant]
|
|
----
|
|
function MyDiv() {
|
|
return (
|
|
<div>
|
|
<span tabIndex="0">foo</span>
|
|
<span tabIndex="-1">bar</span>
|
|
<span tabIndex={0}>baz</span>
|
|
<span>qux</span>
|
|
</div>
|
|
);
|
|
}
|
|
----
|
|
|
|
== Resources
|
|
=== Documentation
|
|
|
|
* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex[tabindex]
|
|
* WCAG - https://www.w3.org/WAI/WCAG21/Understanding/focus-order[Focus Order]
|