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.


Rationale

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.

Required development and unit test techniques


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: Maintaining the user's point of regard is required to meet this checkpoint.
The point of regard is a position in rendered content that has focus.  Exiting a dialog  or dynamically refreshing a page (or part of a page) using AJax or equivalent are two examples where  the user's point of regard has to be maintained.

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 Internet Explorer and mobile Safari/VoiceOver, 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 and mobile Safari/VoiceOver fully support it, then WAI-ARIA techniques alone will be sufficient to comply with this checkpoint.

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 on Windows using Firefox version 3.6 or later and JAWS version 12 or later, and supported on iOS v5.0 and later using Safari and VoiceOver.

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.

  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.


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).

    Note for iOS platform: For keyboards connected to iOS devices, tab and arrow key navigation is not supported as described in the previous paragraph. Apple has its own set of proprietary keyboard navigation keys which are documented in the Apple Wireless Keyboard/VoiceOver help.

    Required unit tests for HTML development technique 2

    Manually perform the following unit test.

  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.


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 of 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 of 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.

    Note for iOS platform: Mobile Safari/VoiceOver does not currently support the WAI-ARIA dialog and alertdialog roles. Therefore, VoiceOver does not announce dialogs when they are rendered. Additionally, Dojo mobile dialogs are not accessible because they do not contain the required WAI-ARIA dialog markup to make them accessible.

    If teams choose to use the Dojo mobile dialogs without the required WAI-ARIA dialog markup, this checklist checkpoint must be answered “no” and a deviation must be filed.

    After the Dojo team implements the proper WAI-ARIA markup in the mobile dialogs, teams may answer this checkpoint with a “yes” and are not required to file a deviation. Teams may want to follow the status of the Dojo mobile defect that addresses this issue. You may have to register as a member of the IBM Dojo Toolkit community at csnext in order to see the defect.

    Note that when the proper WAI-ARIA markup is added to the Dojo mobile dialogs, VoiceOver will still not announce a dialog until Apple implements a fix for WAI-ARIA based dialogs. However, after the Dojo team implements WAI-ARIA in the Dojo dialogs, IBM will have fulfilled its responsibility to provide an accessible widget.

    Required unit tests for Script development technique 4

    Manually verify the following:


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.


Recommended development techniques

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.


©2013 IBM Corporation

Last updated January 1, 2013.

W3C Recommendation 11 December 2008: http://www.w3.org/TR/WCAG20/ (link resides outside of ibm.com)
Copyright 1994-2009 W3C (Massachusetts Institute of Technology, European Research Consortium for Informatics and Mathematics, Keio University), All Rights Reserved.