Web checklist

The purpose of this checkpoint is to ensure that users can use keyboard navigation to encounter information in an order that is consistent with the meaning of the content. When content relies on sequential navigation for the user to understand it, the focus order must make sense and not jump around illogically, which can confuse screen reader users or users who only use a keyboard.

Not all content is navigated sequentially or, perhaps, the navigation sequence does not affect the meaning of the content. In these cases, 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 when the user manipulates the tree.

To comply with this checkpoint, you must meet at least one of the following techniques.

These techniques are defined in WCAG 2.0 Level A Success Criterion 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.

Note: The examples presented in the techniques are not exhaustive. They are meant to illustrate the spirit of this checkpoint.

At this time WAI-ARIA examples are only fully supported in Firefox version 3.6 or later and version JAWS 12 or later. If your product needs to be accessible in both Internet Explorer and Firefox, one or more of the required HTML/CSS specific techniques must be implemented, as well as a WAI-ARIA technique. When WAI-ARIA becomes an approved W3C recommendation and Internet Explorer fully supports WAI-ARIA, then WAI-ARIA techniques alone will be sufficient to comply with this checkpoint in both Internet Explorer and Firefox. Refer to the WAI-ARIA overview for more information.

Applications that provide WAI-ARIA must add the following statement to the checkpoint comments column of the Web Accessibility Checklist:

Note: This product uses WAI-ARIA to comply with this checkpoint. WAI-ARIA is supported using Firefox version 3.6 or later and JAWS version 12 or later.

General examples

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

   To comply with this technique, you must implement the following example.

   General 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 navigate to Address Line 1, then to 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.

   Required unit tests for general development technique 1

   Manually perform the following unit test.

   • Navigate through all the interactive elements in the content using a keyboard and confirm that the order of the interactive elements follow sequence and relationship logically.

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 general examples for this technique.

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 general examples for this technique.

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

   There are no general examples for this technique.

Back to top

HTML examples

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 examples for implementing this technique in HTML. Use the general examples as a guide.

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, you must implement at least one of the following examples.

   HTML example 1

   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 that 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. Accomplish this 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 additional information, refer to the WCAG 2.0 examples of creating a logical tab order (link resides outside of ibm.com).

   HTML example 2

   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 WAI-ARIA Best Practices and Key-navigable custom JavaScript widgets (links reside outside of ibm.com).

   For additional information, refer to the WCAG 2.0 examples for placing the interactive elements in a logical order (link resides outside of ibm.com).

   Required unit tests for HTML development technique 2

   Manually perform the following unit test.

   • Navigate through all the focusable elements in the content and confirm that the order of the interactive elements follow sequence and relationship logically.

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 examples for implementing this technique in HTML. Use the CSS examples as a guide.

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

   There are no examples for implementing this technique in HTML. Use the Script examples as a guide.

Back to top

Script examples

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 examples for implementing this technique with scripts. Use the general examples as a guide.

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 examples for implementing this technique with scripts. Use the HTML examples as a guide.

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 examples for implementing this technique with scripts. Use the CSS examples as a guide.

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

   To comply with this technique, you must implement at least one of the following examples.

   Script example 1

   Insert dynamic content into the DOM immediately following its trigger element and maintain focus on the trigger element. A screen reader announces content based on the order of the HTML or XHTML elements in the DOM. Consider a link that causes new content to render below the link. When the link is activated, focus remains on the link and the DOM position of the new content immediately follows the DOM position of the link.

   For additional information, refer to the WCAG 2.0 examples for inserting dynamic content into the DOM (link resides outside of ibm.com).

   Script example 2

   Reorder page sections using the DOM. As mentioned in script example 1, 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 DOM. Therefore, by manipulating the order that the content appears in the DOM, a developer can control the tab order to ensure it is logical and follows the correct sequence.

   For additional information, refer to the WCAG 2.0 examples for reordering content using the DOM  (link resides outside ibm.com).

   Script example 3

   Create custom dialog boxes in a device-independent way. For additional information, refer to the WCAG 2.0 examples for creating device-independent custom dialogs (link resides outside ibm.com).

   Script example 4

   Use WAI-ARIA to create messages and dialogs in the DOM. Screen readers do not always announce content when the application renders messages and dialog boxes created in the DOM. To overcome this problem, assign 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 box is rendered, a screen reader announces "alert" and then reads the content in the dialog box.

   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 is not necessary, use alert and leave the focus unchanged.

   Required unit tests for Script development technique 4

   Manually verify the following:

   • Operate the object that causes new content to be inserted dynamically.
   • Verify the new content gets inserted immediately following its trigger element and the focus is maintained on the trigger element.
   • (Optional) You can use a screen reader to verify that the screen reader announces the new content in a meaningful order.

Back to top

CSS examples

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 examples for implementing this technique with CSS. Use the general examples as a guide.

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 examples for implementing this technique with CSS. Use the HTML examples as a guide.

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, you must implement the following example.

   CSS example 1

   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 reads the paragraph first and then the multiple choice question second, as expected.

   Required unit tests for CSS development technique 3

   Refer to the required unit tests for HTML development technique 2.

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

   There are no examples for implementing this technique with CSS. Use the Script examples as a guide.

Back to top

Although you do not have to implement the recommended techniques in order to comply with this checkpoint, you should review these techniques because they can improve the accessibility and usability of the application.

Refer to the WCAG 2.0 Additional Techniques (Advisory) for Success Criterion 2.4.3 (link resides outside of ibm.com). Use of these techniques goes beyond compliance to making the Web site usable, as well as accessible.