2.4.3 Focus Order

If a web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability. (Level A).

Description

A well structured web page follows a sequential order from top to bottom. It is always recommended to provide the code in the same order in which the web page is presented to the user. Screen reader’s focus order and the key board’s tab key focus order follow the source order. In other words the screen readers and keyboard follow the order in which the source code is presented.

In some scenarios the sequential focus order of the web page contents differs from the visual order. This difference effects the meaning and operability of the page components.

Eg: When a table contains Names of 3 persons in the first row, gender and age in second, third rows, the keyboard focus or the screen reader sequence follows all the three names first, their genders and ages in the continuation. Sample code provided below.

Use of Tabindex

To have a meaningful sequential order in such scenarios tabindex can be used. Provide tabindex in the order in which the keyboard has to focus. The tabindex value can be any number between 0 and 32,767. The elements receive increasing order of tabindex. Tabindex can be provided for any interactive elements of the page such as hyper links and form elements. If some elements of the web page is provided with tabindex and some are provided without tabindex then the elements with tabindex will be focused first and then the other elements in the source code order.

Focusing for layers and popup

While performing form validations, authors provide alert messages. If an element is provided with a wrong data the form will throw an error message in the form on alert. On clicking “ok” in the alert the focus should come back to the error field. In certain pages some layers will be opened to show the necessary information or instructions, at the end of the layer the author should provide a close button. On clicking the close (return, done) buttons the focus should be back to the place where it is opened.

In certain scenarios this focusing and refocusing may be executed to a different element than what we have discussed above. The content author and an accessibility consultant have to take a decision to ensure that the sequential and meaningful order is not disturbed and the user do not loss any important content or functionality of the page.

How to test

Do all of the following tests.

1. Use the keyboard tab key to navigate from the address bar of the page to the end of the page. Ensure that the meaningful and sequential order is maintained from one focusable element to another.

2. Switch on the screen reader and perform the same action, the result should be the same. Screen reader should follow the same sequential order as before.

3. When the screen reader is on, navigate from top to bottom using the down arrow key. Screen reader should follow the sequential order from left to right and top to bottom.

Note: Screen readers will not follow tabindex reading order while navigating with the down arrow key.

Sample code with tabindex

Start of Code
<table summary=”Name, gender and age”>
<tr>
<td>
<label for=”c6″>Customer 1</label>
<input type=”text” maxlength=”30″ tabindex=”21″ value=”Customer Name” id=”c6″>
</td>
<td>
<label for=”c7″>Customer 2</label>
<input type=”text” maxlength=”30″ tabindex=”24″ value=”Customer Name” id=”c7″>
</td>
<td>
<label for=”c8″>Customer 3</label>
<input type=”text” maxlength=”30″ tabindex=”27″ value=”Customer Name” id=”c8″>
</td>
</tr>
<tr>
<td>
<label for=”g6″>Gender</label>
<input type=”text” maxlength=”1″ tabindex=”22″ id=”g6″>
</td>
<td>
<label for=”g7″>Gender</label>
<input type=”text” maxlength=”1″ tabindex=”25″ id=”g7″>
</td>
<td>
<label for=”g8″>Gender</label>
<input type=”text” maxlength=”1″ tabindex=”28″ id=”g8″>
</td>
</tr>
<tr>
<td>
<label for=”ca6″>Age</label>
<input type=”text” maxlength=”2″ tabindex=”23″ id=”ca6″ />
</td>
<td>
<label for=”ca7″>Age</label>
<input type=”text” maxlength=”2″ tabindex=”26″ id=”ca7″ />
</td>
<td>
<label for=”ca8″>Age</label>
<input type=”text” maxlength=”2″ tabindex=”29″ id=”ca8″ />
</td>
</tr>
</table>
End of Code

Comments are closed.