<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>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.