[HTML5] Using the tabindex attribute for keyboard accessibility

You can make any element keyboard interactive with the HTML tabindex attribute. But you might need a little extra JavaScript and ARIA to support keyboards and screen readers. For more on using tabindex in practice, check out focus management lesson.

 

tabindex="0":

Make it accessable by click "tab" on keyboard. 

 

tabindex="-1":

Make it uaccessable by clicking "tab" on keyboard, but still can send fouse by Javascript. Why -1 can be useful. It has pulled it out of the tab order, which is handy if, say, that button is in an inactive screen in a web application or behind a modal window. You might have some reason to pull it out of the tab order, so that a screen reader or keyboard user isn't landing on something that they can't use, for whatever reason.

 

  <div tabindex="100" id="fakeBtn" class="btn" role="button">Button</div>

  <button id="realBtn" class="btn">Button</button>