W3CWeb Accessibility Initiative Home

User Agent Bindings for Moving Focus to Enabled Elements

On this page: Test 1 | References | About these tests

Nearby: More HTML 4.01 Tests | UAAG 1.0 Test Suite

UAAG 1.0 Requirement

Checkpoint 11.5 Default input configuration (Priority 2 )
Provision 1 : Ensure that the user agent default input configuration includes bindings for the following functionalities required by other checkpoints in this document: move content focus to the next enabled element in document order, and move content focus to the previous enabled element in document order (checkpoints 9.3 and 9.7); activate the link designated by the content focus (checkpoints 1.1 and 9.1); search for text, search again for same text (checkpoint 9.8); increase the scale of rendered text, and decrease the scale of rendered text (checkpoint 4.1); increase global volume, and decrease global volume (checkpoint 4.7); and stop, pause, resume, and navigate efficiently selected audio and animations, including video and animated images (checkpoint 4.5).
Checkpoint 1.1 Full keyboard access (Priority 1 )
Provision 1 : Ensure that the user can operate, through keyboard input alone, any user agent functionality available through the user interface.

Test 1 :

Procedure

  1. Using the keyboard or an assistive technology that emulates the keyboard, move focus to the next enabled element in the test area.
  2. Using the keyboard or an assistive technology that emulates the keyboard, move focus to the previous enabled element in the test area.

Run test

Test Form Enabled Elements




Link Enabled Elements

Test Link 1

Test Link 2

Event Handler Enabled Elements

Onmouseover/onmouseout events: Lamp turned off

Onclick/ondblclick events: star

Image Map Enabled Elements
Test Map Area Green Map Area Red Map Area

Expected results

  1. Using the input configuration of the default user agent bindings, the user can move to any of the enabled elements in the test area.
  2. Using the input configuration of the default user agent bindings, the user can move to the next and previous enabled element in the test area.

Source code

<div>
  <form action="../action/return.html" method="post" title="Test Form 1" enctype="application/x-www-form-urlencoded">
    <table border="0" cellpadding="5" summary="Layout table for test form number 1">
      <tr>
        <th rowspan="1" colspan="1">Test Form Enabled Elements</th>
      </tr>
      <tr>
        <td rowspan="1" colspan="1">
          <label>
            <input type="text" name="testTextInput"></input>
          </label>
          <br clear="none"></br>
          <label>
            <input type="checkbox" name="testCheckInput"></input>
          </label>
          <br clear="none"></br>
          <label>
            <input type="radio" name="testRadioInput" checked="checked"></input>
          </label>
          <br clear="none"></br>
          <label>
            <input type="radio" name="testRadioInput"></input>
          </label>
          <br clear="none"></br>
        </td>
      </tr>
      <tr>
        <td rowspan="1" colspan="1">
          <input type="reset" value="reset"></input>
          <input type="submit" value="submit"></input>
        </td>
      </tr>
    </table>
  </form>
  <table border="0" cellpadding="5" summary="Layout table for test links">
    <tr>
      <th rowspan="1" colspan="1">Link Enabled Elements</th>
    </tr>
    <tr>
      <td rowspan="1" colspan="1">
        <p class="test">
          <a href="../action/return.html" shape="rect">Test Link 1</a>
        </p>
      </td>
    </tr>
    <tr>
      <td rowspan="1" colspan="1">
        <p class="test">
          <a href="../action/return.html" shape="rect">Test Link 2</a>
        </p>
      </td>
    </tr>
  </table>
  <table border="0" cellpadding="5" summary="Layout table for test event handlers">
    <tr>
      <th rowspan="1" colspan="1">Event Handler Enabled Elements</th>
    </tr>
    <tr>
      <td rowspan="1" colspan="1">
        <p>
          <img id="lamp1" onmouseover="imgChange1('../images/tn_desklamp1.gif')" onmouseout="imgChange1('../images/desklamp2.gif')" src="../images/desklamp2.gif" height="32" width="25" alt="Lamp turned off" border="0" name="lamp1"></img>
        </p>
      </td>
    </tr>
    <tr>
      <td rowspan="1" colspan="1">
        <p>
          <img id="star1" ondblclick="imgChange('../images/starPink.gif')" onclick="imgChange('../images/starRed.gif')" src="../images/starYel.gif" width="35" height="35" alt="star" border="0" name="star1"></img>
        </p>
      </td>
    </tr>
  </table>
  <table border="0" cellpadding="5" summary="Layout table for image maps">
    <tr>
      <th rowspan="1" colspan="1">Image Map Enabled Elements</th>
    </tr>
    <tr>
      <td rowspan="1" colspan="1">
        <img src="../images/map-area2.gif" alt="Test Map Area" width="140" height="40" usemap="#testMap" border="0"></img>
        <map name="testMap" id="testMap" title="Test Map Area">
          <area href="../action/return.html" alt="Green Map Area" shape="rect" coords="0,0,70,40"></area>
          <area href="../action/return.html" alt="Red Map Area" shape="rect" coords="71,0,140,40"></area>
        </map>
      </td>
    </tr>
  </table>
</div>

Test Script Code

function imgChange1( img ) { document.lamp1.src = img; } function imgChange( img ) { document.star1.src = img }

References

  1. W3C/WAI/UAAG specification for Enabled Elements

About this test suite

This test is part of a test suite for the User Agent Accessibility Guidelines (UAAG) 1.0 . This work is conducted by the User Agent Accessibility Guidelines Working Group , which is part of W3C's Web Accessibility Initiative (WAI) . Please send comments on this test to w3c-wai-ua@w3.org ( public archive ).

Test created by:

Last modified: $Date: 2003/04/02 23:46:57 $ by $Author: jongund $

Copyright © 1999 - 2003 W3C® ( MIT , INRIA , Keio ), All Rights Reserved. W3C liability , trademark , document use and software licensing rules apply.