Ensure all form and scripted controls can be reached and their tab order matches their logical sequence in the content.
Ensure there is a logical tab order. [WCAG 2.4.3 - A]
The keyboard tab button provides a shortcut to move through interactive elements like hyperlinks, scripted controls, and forms. The sequence in which these elements take focus as a user presses the tab key is called the tab order.
By default, native HTML controls (e.g.,
receive tab focus according to the order in which they are included in the markup. While this is
often sufficient to provide a meaningful tab order, complex layouts and the scripting of custom
controls can cause ordering problems.
For example, table layouts are sometimes used to lay out forms so that they appear to be two side-by-side columns (see Example 1). In this case, tabbing from one field to the next will jump the user between the two columns (i.e., from one cell to the next within each row) instead of allowing them to move down one column before starting the next.
Similarly, when scripted controls are created, they need to be explicitly added to the tab order otherwise browsers and assistive technologies will not provide access to the element through the tab key.
In these cases, the
tabindex attribute is used to change the default tab order of
elements, or to add an element to the tab order. The value of the attribute must be one of the
-1— The value
-1is used to exclude an element from the tab order. This value is most often used if an element will be made focusable by script. Although any negative number can be used, the effect is the same (i.e., no precedence or sequence imparted).
0— The value
0is used to place an element into the tab order according to its position in the markup. This value is most often used to add scripted controls to the tab order as it avoids having to create a numbered sequence for all the focusable elements.
- any positive number — If a positive number is used, the number indicates the
sequence in which to move to the control. The number
1indicates the first control in the tab order,
2the second, and so on. Gaps in the sequence are ignored (i.e., focus moves from
10if there are no values between). After moving through all sequenced controls, all controls without an explicit
tabindexvalue are iterated.
In general, it is best to ensure that focusable elements are in the correct order in the markup so
tabindex values do not have to be used. Although it may seem like
creating a sequence is a simple task, doing so often has unexpected consequences. For example, if a
tab sequence needs to be created for form fields at the end of the file, unless
every focusable element before the form gets a
(e.g., all hyperlinks), users will be taken to the form the first time they press the tab key.
Maintaining long sequences of reordered focusable elements is also cumbersome.
- HTML —