Skip to Content

Accesibility in Forms Guidelines

To be used in the Swinburne Website

By David Jimenez, Monday, 12 July 2004

 

From: Central Reference Document - Version 8 - Unified Web Site Accessibility Guidelines ( http://www.w3.org/WAI/GL/central.htm#FORM.form )

 

Issue :  Users who do not use a mouse (such as screen reader users) or that do not use a mouse well (such as users with mobility disabilities) are not always able to navigate into form elements. Often, once they are able to focus on the form element they are unable to manipulate it.

Elements affected:  INPUT, SELECT, TEXTAREA, and BUTTON .

 

  1. [Required]
      Do not use image maps to create graphical "submit" buttons.
  2. [Required]
      Explicitly associate labels with their control. [New]
    For example:
    <FORM action="http://somesite.com/adduser" method="post"
    <table summary="Table containing study level options">
    <tr>
    <td style="text-indent: 2px;">
    <label for="unit">Country of Citizenship</label>
    </td>
    </tr>
    <tr>
    <td><select name="unit" class="form_dropdown"
    id="unit">
    <option selected>Select</option>
    <option>Undergraduate</option>
    <option>Postgraduate</option>
    <option>TAFE<option>
    </select>
    </td>
    <td>
    <label for="keyword">Keyword or Course
    Code</label>
    </td>
    .
    .
    .
    </table>
    </FORM>

    Graphic:


  3. [Required]
      Provide alternative text for images used as "submit" buttons.
    For example, <INPUT type="image" name="Search" src="search_button.gif" alt="Search Coursefinder">

    Graphic:

  4. [Recommended]
      Group related controls with the < FIELDSET> element. [New]
    For example:
    <FORM action="http://somesite.com/adduser" method="post"
    <fieldset style="border: none;">
    <legend class="some_class">Study Level</legend>
    <table summary="Table containing study level options">
    <tr>
    <td style="text-indent: 2px;">
    <input type="radio" name="study_level" value="all"
    class="form_radiobutton" id="all" checked>
    </td>
    <td class="another_class">
    <label for="all">All</label>
    </td>
    <td>
    <img src="images/spacer.gif" width="10" height="1"
    alt="">
    </td> <td>
    <input type="radio" name="study_level"
    value="tafe" class="form_radiobutton" id="tafe"> </td> <td class="another_class">
    <label for="tafe">Tafe</label>
    </td> .
    .
    . </tr> </table> </fieldset>
    </FORM>

    Graphic:


  5. [Recommended]
      Label a group of controls with the <LEGEND > element. [New]
    see the example for #4 - " Group related controls with the < FIELDSET> element "
  6. [Recommended]
      Create keyboard shortcuts for link elements. [New]
    This example assigns "0" as the access key. Typing "0" gives focus to the link.
    <a href="#content" accesskey="5"></a>
    <table id="top" width="100%" border="0" cellpadding="0" cellspacing="0" class="nav_top_table" summary="Main site navigation bar. This appears on all Swinburne web pages.">
    <tr>
    <td>
    <a href="default.htm" accesskey="0"><img src="images/nav_top_home.gif" alt="Swinburne Home" name="home" width="110" height="24" border="0" id="home"></a>
    </td>
    <td>
    <img src="images/nav_div1.gif" alt="" width="1"
    height="24">
    </td>

    Graphic: