<h2>`tabIndex` ordering issue</h2>
<p><strong>Issue:</strong> Using tabIndex with multiple numbers seems it works fine, but when the first ordered element is not at the first focusing place, it causes disorder in tab indexing.</p>
<p><strong>Solution:</strong> Use only 0 and -1 for most cases to prevent unexpected disordering in tab indexing. Or, you can set the right order by assinging the first target to an item placed in the first place, but it increases a chance to get disordered becauses there may be some clients or devices that ignores the custom order and causes an disorder.
</p>
<ul>
<li tabIndex="4">
Focus 4
</li>
<li tabIndex="3">
Focus 3
</li>
<li tabIndex="2">
Focus 2
</li>
<li tabIndex="1">
Focus 1
</li>
</ul>
<ul>
<li tabIndex="8">
Focus 8
</li>
<li tabIndex="7">
Focus 7
</li>
<li tabIndex="6">
Focus 6
</li>
<li tabIndex="5">
Focus 5
</li>
</ul>
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.