W3CWeb Accessibility Initiative Home

Move Content 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 9.3 Move content focus (Priority 1 )
Provision 1 : Allow the user to move the content focus to any enabled element in the viewport.
Provision 2 : Allow configuration so that the content focus of a viewport only changes on explicit user request.
Provision 3 : If the author has not specified a navigation order, allow at least forward sequential navigation, in document order, to each element in the set established by provision one of this checkpoint.

Test 1 :

Procedure

  1. Using the keyboard or an assistive technology that emulates the keyboard, sequentially move content focus to every enabled element in the test area.

Run test

Test Form Enabled Elements




Link Enabled Elements

Test Link 1

Test Link 2

Test Link 3

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. The user can move content focus to any of the enabled elements in the test area.
  2. The user agent allows the user to navigate forward sequentially through each enabled element. The user agent should also allow reverse sequential navigation through each enabled element.
  3. Content focus only changes on explicit user request.

Source code

<div>
  <form action="../action/return.html" method="post" title="Test Form 1" enctype="application/x-www-form-urlencoded">
    <table border="1" 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>
  <p> </p>
  <table border="1" 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>
    <tr>
      <td rowspan="1" colspan="1">
        <p class="test">
          <a href="../action/return.html" shape="rect">Test Link 3</a>
        </p>
      </td>
    </tr>
  </table>
  <p> </p>
  <table border="1" 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>
  <p> </p>
  <table border="1" 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:46 $ by $Author: jongund $