HTML and CSS Reference
In-Depth Information
If your site does not currently use
tabindex
attributes, you can simply search for all input fields to find the
fields you need to augment. If
tabindex
attributes are already in use on your site, you can use this regular
expression pattern to find nonhidden input fields that don't yet have a
tabindex
:
<input/s+((id|class|title|style|dir|lang|value|type|src|size
|name|maxlength|checked|alt|align|accept|accesskey|onfocus
|onblur|onselect|onchange|onclick|ondblclick|onmousedown
|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress
|onkeydown|onkeyup)\s*=\s*("[^"]+"|'[^']+')\s*)*>
You will need to consider each page individually to determine an appropriate tab order. There are no automated
tools to help.
Several other elements also support the
tabindex
attribute, most notably
object
and
a
. I don't usually place
tabindex
attributes on
a
elements because the default beginning-to-end order is normally sufficient for links,
especially on simple, linear pages. However, if you're faced with a page where less important links precede
more important ones—for instance, links in a left sidebar precede links in the main content—you can add
tabindex
attributes to
a
elements as well.
It is especially important to assign explicit tabindexes on pages that mix links with form fields. Often, links are
used to provide help or explanatory text about the form or its fields, and that's good. However, the tab order
should always jump from one field to the next and should never hit any link in between them. If you use the
default tab order, the user can easily tab into what they expect the next field to be, but will end up on a link
instead. At best, this will be annoying when they begin to type and realize their text isn't showing up. At worst,
a user will fail to submit crucial data because they typed it into a link instead of a field.
For example, consider the Brooklyn Public Library login form in
Figure 6.4
. A user will typically click the mouse
in the Name field, press Tab, fill out the barcode from a library card, press Tab, and then type in the PIN. Only
the last tab doesn't actually place the cursor in the PIN field. Instead, the focus is on the "What is a PIN?" link,
so the text is lost. The tab order should be explicitly specified so that the user advances directly from the
Barcode field to the PIN field.
Figure 6.4. A form that mixes input fields and links
Search WWH ::
Custom Search