W3CWeb Accessibility Initiative Home

ACCESSKEY attribute for FORM 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.2 Current author input configuration (Priority 2 )
Provision 1 : Provide a centralized view of the current author-specified input configuration.

Test 1 : accesskey attribute for form elements

Procedure

  1. Configure the user agent to provide a centralized view of the keyboard bindings specified by the author through the accesskey attribute of the various form elements.

Run test

Test form 1

Form fieldset 1 (accesskey "1")

Form fieldset 2 (accesskey "2")

Form fieldset 3 (accesskey "3")

Test form 2

Form fieldset 4 (accesskey "4")
Form fieldset 5 (accesskey "5")
Form fieldset 6 (accesskey "6")

Expected results

  1. The user agent can provide a centralized view of the author assigned keyboard bindings through the use of the accesskey attribure. The user should be able to navigate easily back and forth between the viewport with the current focus and the list of bindings.

Source code

<h4 action="../action/return.html" method="post" title="Test Form 1" enctype="application/x-www-form-urlencoded" action="../action/return.html" method="post" title="Test Form 2" enctype="application/x-www-form-urlencoded">
  <fieldset>
    <legend accesskey="1" accesskey="4">Form fieldset 1 (accesskey "1")</legend>
    <label for="checkbox1">
      <input type="text" name="text1" accesskey="a"></input>
    </label>
    <br clear="none" id="checkbox1" accesskey="g" type="checkbox" checked="checked" value="1" name="check-input"></br>
    <label clear="none">
      <input type="text" name="text2" accesskey="b"></input>
    </label>
    <br clear="none" for="checkbox2"></br>
    <label id="checkbox2" accesskey="h" type="checkbox" value="2" name="check-input">
      <textarea rows="4" cols="20" name="textarea1" accesskey="c"></textarea>
    </label>
  </fieldset>
  <fieldset>
    <legend accesskey="2" accesskey="5">Form fieldset 2 (accesskey "2")</legend>
    <label for="button1">
      <input type="text" name="text3" accesskey="d"></input>
    </label>
    <br clear="none" id="button1" accesskey="i" type="radio" value="1" name="radio-input" checked="checked"></br>
    <label clear="none">
      <input type="text" name="text4" accesskey="e"></input>
    </label>
    <br clear="none" for="button2"></br>
    <label id="button2" accesskey="j" type="radio" value="2" name="radio-input">
      <textarea rows="4" cols="20" name="textarea2" accesskey="f"></textarea>
    </label>
  </fieldset>
  <fieldset>
    <legend accesskey="3" accesskey="3">Form fieldset 3 (accesskey "3")</legend>
    <label for="reset" for="reset2">Reset button (accesskey "r"): </label>
    <button id="reset" accesskey="r" name="reset" type="reset" value="reset" id="reset2" accesskey="t" name="reset2" type="reset" value="Reset">Reset</button>
    <label for="submit" for="submit2">Submit button (accesskey "s"): </label>
    <button id="submit" accesskey="s" name="submit" type="submit" value="submit" id="submit2" accesskey="y" name="submit2" type="submit" value="Submit">Submit</button>
  </fieldset>
</h4>
<form action="../action/return.html" method="post" title="Test Form 1" enctype="application/x-www-form-urlencoded" action="../action/return.html" method="post" title="Test Form 2" enctype="application/x-www-form-urlencoded">
  <fieldset>
    <legend accesskey="1" accesskey="4">Form fieldset 1 (accesskey "1")</legend>
    <label for="checkbox1">
      <input type="text" name="text1" accesskey="a"></input>
    </label>
    <br clear="none" id="checkbox1" accesskey="g" type="checkbox" checked="checked" value="1" name="check-input"></br>
    <label clear="none">
      <input type="text" name="text2" accesskey="b"></input>
    </label>
    <br clear="none" for="checkbox2"></br>
    <label id="checkbox2" accesskey="h" type="checkbox" value="2" name="check-input">
      <textarea rows="4" cols="20" name="textarea1" accesskey="c"></textarea>
    </label>
  </fieldset>
  <fieldset>
    <legend accesskey="2" accesskey="5">Form fieldset 2 (accesskey "2")</legend>
    <label for="button1">
      <input type="text" name="text3" accesskey="d"></input>
    </label>
    <br clear="none" id="button1" accesskey="i" type="radio" value="1" name="radio-input" checked="checked"></br>
    <label clear="none">
      <input type="text" name="text4" accesskey="e"></input>
    </label>
    <br clear="none" for="button2"></br>
    <label id="button2" accesskey="j" type="radio" value="2" name="radio-input">
      <textarea rows="4" cols="20" name="textarea2" accesskey="f"></textarea>
    </label>
  </fieldset>
  <fieldset>
    <legend accesskey="3" accesskey="3">Form fieldset 3 (accesskey "3")</legend>
    <label for="reset" for="reset2">Reset button (accesskey "r"): </label>
    <button id="reset" accesskey="r" name="reset" type="reset" value="reset" id="reset2" accesskey="t" name="reset2" type="reset" value="Reset">Reset</button>
    <label for="submit" for="submit2">Submit button (accesskey "s"): </label>
    <button id="submit" accesskey="s" name="submit" type="submit" value="submit" id="submit2" accesskey="y" name="submit2" type="submit" value="Submit">Submit</button>
  </fieldset>
</form>
<h4 action="../action/return.html" method="post" title="Test Form 2" enctype="application/x-www-form-urlencoded">
  <fieldset>
    <legend accesskey="4">Form fieldset 4 (accesskey "4")</legend>
    <label for="checkbox1">Checkbox 1 (accesskey "g")</label>
    <input id="checkbox1" accesskey="g" type="checkbox" checked="checked" value="1" name="check-input"></input>
    <br clear="none"></br>
    <label for="checkbox2">Checkbox 2 (accesskey "h")</label>
    <input id="checkbox2" accesskey="h" type="checkbox" value="2" name="check-input"></input>
  </fieldset>
  <fieldset>
    <legend accesskey="5">Form fieldset 5 (accesskey "5")</legend>
    <label for="button1">Button 1 (accesskey "i")</label>
    <input id="button1" accesskey="i" type="radio" value="1" name="radio-input" checked="checked"></input>
    <br clear="none"></br>
    <label for="button2">Button 2 (accesskey "j")</label>
    <input id="button2" accesskey="j" type="radio" value="2" name="radio-input"></input>
  </fieldset>
  <fieldset>
    <legend accesskey="3">Form fieldset 6 (accesskey "6")</legend>
    <label for="reset2">Input button (type="reset", accesskey "t"): </label>
    <input id="reset2" accesskey="t" name="reset2" type="reset" value="Reset"></input>
    <label for="submit2">Input button (type="submit", accesskey "y"): </label>
    <input id="submit2" accesskey="y" name="submit2" type="submit" value="Submit"></input>
  </fieldset>
</h4>
<form action="../action/return.html" method="post" title="Test Form 2" enctype="application/x-www-form-urlencoded">
  <fieldset>
    <legend accesskey="4">Form fieldset 4 (accesskey "4")</legend>
    <label for="checkbox1">Checkbox 1 (accesskey "g")</label>
    <input id="checkbox1" accesskey="g" type="checkbox" checked="checked" value="1" name="check-input"></input>
    <br clear="none"></br>
    <label for="checkbox2">Checkbox 2 (accesskey "h")</label>
    <input id="checkbox2" accesskey="h" type="checkbox" value="2" name="check-input"></input>
  </fieldset>
  <fieldset>
    <legend accesskey="5">Form fieldset 5 (accesskey "5")</legend>
    <label for="button1">Button 1 (accesskey "i")</label>
    <input id="button1" accesskey="i" type="radio" value="1" name="radio-input" checked="checked"></input>
    <br clear="none"></br>
    <label for="button2">Button 2 (accesskey "j")</label>
    <input id="button2" accesskey="j" type="radio" value="2" name="radio-input"></input>
  </fieldset>
  <fieldset>
    <legend accesskey="3">Form fieldset 6 (accesskey "6")</legend>
    <label for="reset2">Input button (type="reset", accesskey "t"): </label>
    <input id="reset2" accesskey="t" name="reset2" type="reset" value="Reset"></input>
    <label for="submit2">Input button (type="submit", accesskey "y"): </label>
    <input id="submit2" accesskey="y" name="submit2" type="submit" value="Submit"></input>
  </fieldset>
</form>

References

  1. HTML 4.01 specification for ACCESSKEY
  2. HTML 4.01 specification for BUTTON
  3. HTML 4.01 specification for CHECKBOX
  4. HTML 4.01 specification for INPUT
  5. HTML 4.01 specification for LABEL
  6. HTML 4.01 specification for LEGEND
  7. HTML 4.01 specification for RADIO buttons
  8. HTML 4.01 specification for TEXTAREA

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/08/02 00:18:12 $ by $Author: koteles $