Web checklist

This checkpoint is to ensure that content which can be navigated sequentially must allow keyboard users to encounter information in an order that is consistent with the meaning of the content. In other words, for the content that relies on sequential navigation in order to be understood, the focus order must make sense and not jump around illogically, thus confusing the keyboard only or screen reader user.

Keep in mind that not all content is navigated sequentially, or perhaps the navigation sequence doesn't affect the meaning of the content. In that case, this checkpoint does not apply. However, the navigation should still be logical. An example of logical navigation is the use of the arrow keys to traverse a dojo tree, which logically expands or hides additional items as the tree is manipulated.

Compliance with this checkpoint requires at least one of the following techniques to be met.

These techniques are defined in the WCAG 2.0 Level A Success Criterion for Guideline 2.4.3 (link resides outside of ibm.com).

1. Place elements in order: Place interactive elements in an order that follows sequences and relationships within the content.

2. Create a logical tab order: Give focus to elements in an order that follows sequences and relationships within the content by creating a logical tab order through links, form controls, and objects.

3. Make the DOM order match the visual order: Give focus to elements in an order that follows sequences and relationships within the content by making the DOM order match the visual order.

4. Dynamically change focus order: Change a Web page dynamically to provide focus order.

Examples for General developers

1. Place elements in order: Place interactive elements in an order that follows sequences and relationships within the content.

To comply with this technique, all of the following examples must be implemented.

Example 1

Place interactive elements in an order that follows sequences and relationships within the content. Interactive elements such as links and form controls should be placed in the content so that the default tab order follows the sequences and relationships in the content.

A form that collects a user's address should be coded in such a way that the focus order for the input elements is logical. Tab should first go to Address Line 1, then onto Address Line 2, then to the City, State, and finally to the Zip Code. Any other tab order or placement on the page would confuse the user.

Back to top

Examples for HTML developers

For techniques that have no technology-specific examples, refer to the General example section for guidance.

1. Place elements in order: Place interactive elements in an order that follows sequences and relationships within the content.

There are no specific examples for HTML.

2. Create a logical tab order: Give focus to elements in an order that follows sequences and relationships within the content by creating a logical tab order through links, form controls, and objects.

To comply with this technique, at least one of the following examples must be implemented.

Example 2

Create a logical tab order through links, form controls, and objects. HTML links, form controls, and objects all receive focus (tab order) in the order which they appear in the source code. If the tab order is already logical, no additional coding is required. However, if you are using CSS or an alternate technology to place elements visually in different locations on the page, and the default focus (tab) order no longer appears logical, you will need to use the HTML attribute tabindex to modify the tab order. This is done by setting tabindex="n".

<INPUT tabindex="1" type="text" name="field1">

<INPUT tabindex="2" type="text" name="field2">

<INPUT tabindex="3" type="submit" name="submit">



For more information, refer to WCAG 2.0 examples of Creating a logical tab order through links, forms controls and objects (link resides outside of ibm.com).

Example 3

Note that WAI-ARIA examples are not supported by all browsers. If your product needs to be accessible in multiple browsers one or more of the required HTML/CSS specific techniques must be implemented as well as a WAI-ARIA technique.

Use WAI-ARIA to create a logical arrow key order through complex widgets. Rich Internet application keyboard navigation should behave like desktop application keyboard navigation. For example, keyboard users tab to Windows Explorer and then use the arrow keys to navigate to elements in the tree. WAI-ARIA provides support for arrow key navigation of complex widgets such as menus, trees and grids via the tabindex attribute or activedescendant property. For more information on how to implement arrow key navigation, see Key-navigable custom JavaScript widgets (link resides outside of ibm.com).

For more information, refer to WCAG 2.0 examples for placing the interactive elements in an order that follows sequences and relationships within the content (link resides outside of ibm.com).

3. Make the DOM order match the visual order: Give focus to elements in an order that follows sequences and relationships within the content by making the DOM order match the visual order.

There are no specific examples for HTML.

4. Dynamically change focus order: Change a Web page dynamically to provide focus order.

There are no specific examples for HTML.

Back to top

Examples for Script developers

For techniques that have no technology-specific examples, refer to the General and HTML example sections for guidance.

1. Place elements in order: Place interactive elements in an order that follows sequences and relationships within the content.

There are no specific examples for scripts.

2. Create a logical tab order: Give focus to elements in an order that follows sequences and relationships within the content by creating a logical tab order through links, form controls, and objects.

There are no specific examples for scripts.

3. Make the DOM order match the visual order: Give focus to elements in an order that follows sequences and relationships within the content by making the DOM order match the visual order.

There are no specific examples for scripts.

4. Dynamically change focus order: Change a Web page dynamically to provide focus order.

To comply with this technique, at least one of the following examples must be implemented.

Example 4

Insert dynamic content into the Document Object Model immediately following its trigger element. The reading order in a screen-reader is based on the order of the HTML or XHTML elements in the Document Object Model, as is the default tab order. A web page that uses AJAX to show new content can use this example to ensure that content is still part of the focus order. Consider an example where a link, when pressed, causes new content to appear visually underneath the link. A developer can manipulate the placement of that new <div> in the DOM using scripting. For a detailed example of how this can be done, please refer to the WCAG 2.0 examples for inserting dynamic content into the Document Object Model.

Example 5

Reorder page sections using the Document Object Model. The reading order in a screen-reader and the default tab order are based on the order of the HTML or XHTML elements in the Document Object Model. Therefore, by manipulating the order that the content appears in the Document Object Model, a developer can control the tab order to ensure it is logical and follows the correct sequence. For a detailed example of how this can be done, please refer to the WCAG 2.0 examples for reordering page sections using the document object model.

Example 6

Create custom dialogs in a device independent way. For examples refer to WCAG 2.0 Creating Custom Dialogs in a Device Independent Way.

Example 7

Note that WAI-ARIA examples are not supported by all browsers. If your product needs to be accessible in multiple browsers one or more of the required HTML/CSS specific techniques must be implemented as well as a WAI-ARIA technique.

Use WAI-ARIA to create messages and dialogs in the DOM. Messages and dialogs created in the DOM are not always announced by screen readers when rendered. This problem may be overcome by assigning a WAI-ARIA alert or alertdialog role to a container element via JavaScript. The following JavaScript function assigns an alertdialog role to the div with id "myAlert".

function showAlertDialog(){
var alertDialog = document.getElementById('myAlert');
alertDialog.setAttribute('role', 'alertdialog');
alertDialog.setAttribute('tabindex', '0');
alertDialog.focus();
var txt = document.createTextNode('This message appears in an alert dialog.');
alertDialog.appendChild(txt);
alertDialog.style.display = 'block';
alertDialog.style.border = '1px solid black';
}

<div id="myAlert"> </div>

When the dialog is rendered, a screen reader says "alert" and then reads the content in the dialog.

Note that if an explicit action or acknowledgement is required, use alertdialog and return focus to the element that previously had focus when the dialog is dismissed. If for example, a simple message is rendered, and an explicit action isn't necessary, use alert and leave the focus unchanged.

Back to top

Examples for CSS developers

For techniques that have no technology-specific examples, refer to the General and HTML example sections for guidance.

1. Place elements in order: Place interactive elements in an order that follows sequences and relationships within the content.

There are no specific examples for CSS.

2. Create a logical tab order: Give focus to elements in an order that follows sequences and relationships within the content by creating a logical tab order through links, form controls, and objects.

There are no specific examples for CSS.

3. Make the DOM order match the visual order: Give focus to elements in an order that follows sequences and relationships within the content by making the DOM order match the visual order.

To comply with this technique, at least one of the following examples must be implemented.

Example 8

Give focus to elements in an order that follows sequences and relationships. An online learning course requires the user to read a paragraph of text, and then answer a multiple choice question about the text. The paragraph should be placed before the multiple choice question set in the source code. When reading the page from top to bottom, the screen reader will then read the paragraph first, and then the multiple choice question second, as expected.

4. Dynamically change focus order: Change a Web page dynamically to provide focus order.

There are no specific examples for CSS.

Implementation of recommended techniques is not required to comply with this checkpoint, but these techniques should be reviewed since they can improve the accessibility and usability of the application.

Please refer to the Additional Techniques (Advisory) for 2.4.3 from WCAG 2.0 (link resides outside of ibm.com) Use of these techniques goes beyond compliance to making the website usable as well as accessible.

The following test tools and techniques are required to test this checkpoint.

1. Test tools
2. Required accessibility verification test techniques

Back to top