Page Content
TABINDEX="0"
Keyboard users and screen reader users often use the TAB key to navigate to links and form elements. However, there may be times when you wish the TAB key to stop at another location on a Web page.
Adding the attribute TABINDEX=0 to any element forces forces the TAB key to stop at a location. TABINDEX="0" essentially works as a stop sign without changing the default order of navigation. It does not otherwise change tab orer.
The TABINDEX=0 attribute can be used on non-form elements to simulate interaction in a non-form such such as in this self-check which uses CSS to hide and reveal the answer.
Self-Check Form
In the example below, we can see that the question can be tabbed into before directly moving onto the answer. The answer is hidden and it is revealed when it is tabbed into or the pointer hovers over it.
Sample Self Check
Question: What does WCAG stand for?
Answer (Click Tab or hover over next paragraph with mouse)
View the Code
HTML Code
The code shows that the P tags for the question, answer option and blue box all have the <tabindex="0"> attribute. The blue box is coded as an empty link with a style class of "answer" (i.e. <a href="#" class="answer">).
<p tabindex="0"> <b>Question: </b>What does WCAG stand for?</p>
<p tabindex="0"><b>Answer</b> (Click Tab or over over with mouse)</p>
<p><a href="#" class="answer">Web Content Accessibility Guidelines </a></p>
CSS Styles
Hide Answer
In the .answer class, the background and text colors are set to be the same. A border is also added in the same color. It won’t be seen as a separate element until the background color changes.
a.answer
{
display: block;
background-color: #369; color: #369;
text-decoration: none;
padding: 0 3px 0 3px;
border: 1px solid #369;
padding: 3px
}
Reveal (Mouse Hover and Keyboard Focus)
When the a is specified to be in the :hover or :focus (for keyboard/device focus), the background color changes to show the text.
a.answer:focus, a.answer:hover
{
background-color: #DDD; color: #000;
text-decoration: none;
padding; 3px; border: 1px solid #369;
}