Tabindex and Keyboard Focus

HTM4 tabindex requirements
HTM5 focus and tabindex requirements
Actively define visual focus style, since the default browser visual focus styling of focus is typically hard to discern.

Tabindex Values

Value	Description
-1	Support keyboard focus/blur events. Not included in the tab order of the page.
0	Support keyboard focus/blur events. Included in the tab order of the page.
> 0	Support keyboard focus/blur events. Defines the tab order of the page. Note: This technique is not recommended due to browser incompatibilities and unpredicatable focus behaviors.

Audio Transcript

Tabindex is an important feature for identifying which element on the page can receive keyboiard focus and keyboard events. For example if I am building a web application and using DIV element to build a interactive menu with Javascript and CSS, I need to use tabindex to make the menu part of the tab sequence of the page and to allow keyboard events to change the menu selection. Tabindex values of 0 are used to make elements part of the tab sequence of the page. Tabindex values of -1 allow an element to receive keyboard focus and to process keyboard events, but the element is not included in the tabindex of a page. Sometimes an element, like an Anchor or link element, which Is normally part of the tab sequence of the page will be used in a more complex tree or menu widget. In this case we want to make sure the the link is not part of the tabindex of the web page by we setting its tabindex value to -1. The only think I have to say about tabindex values besides 0 and -1 is one is don’t’ do it! There are many bad things that can happen and not very much potential benefit to using tabindex values greater than 0. I have never used a tabindex value greater than 0 in my 20 years of web development and we don’t have time in this presentation to do a deeper dive.