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

Question

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 1

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>

Answer 2

The easiest way to accomplish this is to use <li tabindex="0"> with a JavaScript function to add keyboard behaviors for in-focus elements.

tabindex="0" will make sure that the tabs are accessed in the natural flow order. A solid JavaScript solution accounting for both enter and space keys is available here: https://karlgroves.com/2014/11/24/ridiculously-easy-trick-for-keyboard-accessibility