CSS Apprentice CSS Apprentice - 5 months ago 11
HTML Question

How Can I Make List Items "Tabbable" (Use Tab Key To :focus On Them)

How can I make List Items tabbable? (meaning: using the

TAB
key to
:focus
on them). I need to know for Handicap Accessibility purposes.

I added 2 text fields to give a reference point to
TAB
from; if you tab from the
textarea
it goes to the next one, then skips over all the list items.

HTML:

<textarea></textarea>
<textarea></textarea>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>


CSS:

li {
display: block;
height: 100px;
margin: 0 auto;
width: 95%;
}
a:active, a:focus,
li:active, li:focus {border: 5px solid orange}

li:nth-of-type(1) {background-color: red}
li:nth-of-type(2) {background-color: yellow}
li:nth-of-type(3) {background-color: blue}
li:nth-of-type(4) {background-color: green}


jsFiddle: https://jsfiddle.net/h815zLnp/

Answer

Use the tabindex attribute - generally its used only for navigating around inputs in forms and so forth - but it can be used to determine the order of focus to any HTML element. I have used your existing text areas and li's and if you start in the first text area and use the tab key - you will be able to see the focus change to the funky order I have listed in the tabindex codes. Also shift-tab moves through the items in reverse tab index order:

li {
  display: block;
  height: 100px;
  margin: 0 auto;
  width: 95%;
}

a:active, a:focus,
li:active, li:focus {border: 5px solid orange}

li:nth-of-type(1) {background-color: red}
li:nth-of-type(2) {background-color: yellow}
li:nth-of-type(3) {background-color: blue}
li:nth-of-type(4) {background-color: green}
<textarea  tabindex="1"></textarea>
<textarea  tabindex="3"></textarea>
<ul>
  <li tabindex="2"></li>
  <li tabindex="5"></li>
  <li tabindex="4"></li>
  <li tabindex="6"></li>
</ul>