Accessible forms: Guidelines, examples & tricks

Accessible Form Guidelines, The do's & don'ts of accessible form design, Complete with example forms and accessible JavaScript form tricks.

Mike Foskett - 7th November 2006

Accessible forms: Guidelines, examples and tricks.

Last updated: 7th November 2k6

So what will you find here?

A list of form guidelines based on current and on-going research into accessibility, usability and web standards.
Simple examples of accessible forms including: a login form, a search form and a contact form.
Examples and help on each form element.
Styling forms with CSS.
Using accessible inline JavaScript to aide form functionality.
Using accessible JavaScript with the DOM to aide form functionality.
A comprehensive list of external form related articles and resources.

Any comments, queries or corrections please e-mail me but please put "accessible forms" in the subject line so I know your not trying to enlarge my bits.

The reasoning for a particular guideline is simplified to:

Accessible form guideline abbreviations
Abbreviation	Meaning
U	Usability
A	Accessibility
S	Semantics
L	Legal (UK law)

The strength of each form guideline is indicated by the terms:

must / must not: An absolute requirement.
should / should not: A desirable requirement, where there may be valid reasons not to treat it as absolute, however the full implications should be understood and the case carefully weighed before being disregarded.
may / may not: A desirable requirement if possible within time or budget constraints.

1.0 Accessible & usable form guidelines:

The Accessible form guidelines were developed originally for BECTA specifically for the 2005 BETT awards.

The fieldset tag should encompass complete sections of a complex form [A U], and may encompass the whole of a simple form.
Input fields require implicit descriptions wherever possible [A]. Text description must directly precede input (except radio and checkbox types) and the label should surround both description and input field, although they may appear on different lines. Example input type text. Updated 3rd September 2005
Input fields require explicit descriptions [A]. The "for" attribute in the label element must be associated to the input id. Example input type text
Text type fields may have a default value [A]. This guideline was changed, 11/02/05, from "should" on recommendation by the RNIB. Example input type text
Text type fields should have the text selected upon focus [U]. JavaScript methods
Input field width (size or cols) should be kept relevant to the expected user input [U]. Example input type text
Required fields
- Required fields must not be indicated by colour alone [A]
- The term "required" should be stated in the text description [U]
- If a mark such as * is used then its meaning must be announced prior to the first occurrence [A U]
Example of required fields
Text descriptions must follow radio and checkbox inputs [A]. Example of radio elements
Radio buttons must have a default selected value [U]. Example of radio elements
Radio buttons should not be used for boolean (yes / no) options. If at all possible use a checkbox [U]. Example of checkbox elements
Selects with less than 5 options should be coded as radio buttons [U]. Example of checkbox elements. Example of simple select elements
Complex selects, with more than 11 options, should be coded with option groups and labels [A]. Example of complex select elements
Graphic buttons must have meaningful alt texts [U A].
It should not normally be necessary to use tabindex. Avoid usage if possible. Only use them if the logical order of the form dictates [A].
Forms contain data and, if tabular, may be held in data tables. Data tables can be complex objects. Please ensure as a minimum:
1. A table summary is stated. Outlining the purpose of the tables contents [A].
2. Use a caption to state the purpose of the tables contents [S].
3. Define column and or row headers along with their scope [A]
4. Define, where required, colgroups and their scope [A]
5. Use <thead> and <tbody> to separate content from headers where applicable [A].
6. Consider table linearisation carefully before separating a label from its associated input.
Note, usually constructs of form, legend, fieldset and label are sufficient to layout a form. Use a table only if the data input is tabular by nature.
Labels may be hidden from the display by using display:none. This has the effect of not rendering the label on screen but, because it's in a form, screen readers will still read the label aloud. Note this technique only applies to form elements and that labels should be visible wherever possible.
Note that HTML and XHTML v1 allow both name and id attributes on a form element. XHTML v1.1 only allows id [S].

2.0 Accessible form examples

2.1 Simple search:

Search forms should have an role="search".

Note: accesskeys are depricated.

Note: The text input does have a label. It is hidden via CSS.

Input box should be of a size which reflects the length of the expected input


<form id="simplesearch" role="search" method="get" action="#">
  <fieldset>
   <label for="searchterm">
    Search site
   </label>
   <input id="searchterm" type="text" maxlength="255" value="Enter search term" />
   <input id="searchbutton" type="submit" value="Search site" />
  </fieldset>
</form> <!-- id="simplesearch" -->


#simplesearch                     {text-align:center; background:#fff; padding:0; margin:0}
#simplesearch fieldset            {margin:1em; padding:0; border:0 solid}
#simplesearch fieldset label      {display:none}
#simplesearch input#searchterm    {font-weight:bold; padding-left:3px; width:160px}
#simplesearch input#searchbutton  {font-weight:bold; margin-left:1em}

2.2 Simple login:

Note: both the text inputs have a label though they are hidden via CSS.

Usability suggests displaying input fields that are sized appropriately for the input. So avoid having a 300px wide field for an eight digit password.


<form id="simplelogin" method="get" action="#">
 <fieldset>
  <label for="loginname">Login</label>
  <input id="loginname" type="text" maxlength="255" value="Enter login name" />
  <label for="loginpassword">Password</label>
  <input id="loginpassword" type="password" maxlength="8" value="********" />
  <input id="loginbutton" class="button" type="submit" value="Login" />
 </fieldset>
</form> <!-- id="simplelogin" -->


#simplelogin                      {text-align:center; background:#fff; padding:0; margin:0; border:0}
#simplelogin fieldset             {padding:0; margin:1em; border:0px solid}
#simplelogin fieldset label       {display:none}
#simplelogin input#loginname      {font-size:100%; font-weight:bold; border:2px inset  #ccc; padding-left:3px; width:160px}
#simplelogin input#loginpassword  {font-size:100%; font-weight:bold; border:2px inset  #ccc; padding-left:3px; width:70px}
#simplelogin input#loginbutton    {font-size:100%; font-weight:bold; border:2px outset #ccc; margin-left:1em}

2.3 Simple contact form:

A stripped down example of this form is now available for download complete with CSS and JavaScript techniques. Simple accessible contact form example [.zip, 4KB] added 6th December 2k5. One or two minor improvements included.

Try tabbing through this form. Note that the required fields change the message if you don't enter a value.

Note the help links. Clicking on one expands the help in an accessible manner shifting focus to the help heading.

Please note the Show & Hide help techniques demonstrated here have been superceded by a new resource: Accessible form help added 15th June 2k6

~~Accesskey associated to the first label, the standard for this would be "9" under the UK Government eGIF "standard". (address updated 9th August 2k6)~~

Note: It is now a UK legal necessity for users to actively state that their details may be used. Even for such things as newsletters. This means, in the case of the "subscribe to newsletter" checkbox above, that the checkbox ~~cannot~~ should not be checked as default.

3.0 General form elements

3.1 Text type inputs

An example of inputs of type text

Description:

Input fields require implicit descriptions [A]. Text before input (vice-versa on radio or checkbox types) with a label:
```
<label>Description:
  <input type="text" id="description" />
</label>
    
```
Input fields also require explicit descriptions [A]. Use the "for" attribute in the label tag. Wherever possible use this method:
```
<label for="description">Description:
  <input type="text" id="description" />
</label>
    
```
Where necessary the "for" attribute also allows the separation of the label text from the input:
```
<label for="description">
  Description:
</label>
...
<input type="text" id="description" />
    
```
Text fields may have a default value [A].
- Recent studies indicate that users may skip pre-filled fields.
- This is no longer an access technology requirement.
Input elements without visible labels should continue to contain text (search, login) but ensure that the default text is either removed or selected upon focus. See 4.0 Accessible JavaScript for methods
```
<label for="description">Description:
  <input type="text" id="description"
    value="Enter description" />
</label>
    
```

Try to keep input field sizes relevant to the expected user input [U].


<label for="description">Description:
  <input type="text" id="description"
    value="Enter description"
    style="width:100px" />
</label>

Selecting the text upon focus is also recommended [U] see the JavaScript section for methods and examples.

3.2 Radio inputs

An example of a set of radio inputs

Colour

Please select a colour:

Associated guidelines:

radio inputs should have one option checked as default [U]
radio inputs must have a label. It makes the option text click-able thus presenting a larger area to aide those with shaky hands [S A]
it may be judicious to add a title element duplicating the descriptive text [A]
radio input must precede it's descriptive text [S A]
horizontal radio input lists should not be used [U]
horizontal radio input lists must have enough surrounding space to clearly distinguish between choices [U]
radio inputs for simple boolean (yes / no) responses should not be used. Use a checkbox [S]
radio inputs should replace select inputs wherever possible. Five or less options should always be coded as radio inputs [U A]
a fieldset must be used to group related inputs [U S A]


<label for="rad_0">
  <input type="radio" name="rad" id="rad_0" title="Red" checked="checked" />
    Red
</label>
<label for="rad_1">
  <input type="radio" name="rad" id="rad_1" title="Blue" />
    Blue
</label>


label {display:block}
input.radio  {margin-right:1em}
input.radio:focus {border:2px solid red}

3.3 Checkboxes

An example of checkbox inputs:

Further information

I am aged over forty-two I wish to request further information

Using a label makes the checkbox descriptive text click-able presenting a larger area to aide those with motor neuron deficiencies [S A]
use a title element duplicating the descriptive text [A]
ensure the checkbox input precedes the descriptive text [A S]
use a checkbox for simple boolean (yes / no) responses not radio inputs [S]
use a fieldset to group related inputs [S U A]
do not check a checkbox by default if it has implications beyond the forms main purpose [L]


<label for="chk_0">
  <input type="checkbox" name="chk_0" id="chk_0" title="Request information" />
    Request further information
</label>
<label for="chk_1">
  <input type="checkbox" name="chk_1" id="chk_1" title="Aged over 42" checked="checked" />
    I am aged over forty-two
</label>

3.4 Simple select box

An example of a simple select input:

Which is your favourite colour?

Less than 5 options should be coded as radio buttons [U A]
try to limit options to 11 that will display all the options without scroll bars in Internet Explorer [U]
do not use select inputs for navigation without a "Go" button. [A]


<label for="favcity">Which is your favourite colour?
  <select id="favcity" name="favcity">
    <option value="1">Sky Blue</option>
    <option value="3">Postbox Red</option>
    <option value="4">Mauve</option>
    <option value="5">Purple</option>
    <option value="2">Racing Green</option>
    <option value="6">Sunshine Yellow</option>
    <option value="7">Orange</option>
    <option value="8">Magenta</option>
    <option value="9">Off White</option>
    <option value="10">White</option>
    <option value="11">Black</option>
  </select>
</label>

3.5 Long select box

An example of a long select input:

Which is your favourite city?

If there are more than 11 options try to split them into groups and label them accordingly with optgroups .


<label for="favcity2">Which is your favourite city?
 <select id="favcity2" name="favcity2">
  <optgroup label="Europe">
   <option value="1">Amsterdam</option>
   <option value="3">Interlaken</option>
   <option value="4">Moscow</option>
   <option value="5">Dresden</option>
  </optgroup>
  <optgroup label="North America">
   <option value="2">New York</option>
   <option value="6">Salt Lake City</option>
   <option value="7">Montreal</option>
  </optgroup>
  <optgroup label="South America">
   <option value="8">Buenos Aires</option>
   <option value="9">Asuncion</option>
  </optgroup>
  <optgroup label="Asia">
   <option value="10">Hong Kong</option>
   <option value="11">Tokyo</option>
   <option value="12">New Dehli</option>
  </optgroup>
 </select>
</label>

3.6 File-upload box and button

An example of a file-upload input and button:

Upload file:

Please note that file-upload inputs are rendered completely differently in Safari on a Mac.

Remember when uploading files:

Do not allow spaces in the filename. Some browsers do not resolve spaces well. Use an underscore or a hyphen instead.
Use only lowercase. Apache servers are case sensitive but NT servers are not. Simply using lowercase every time prevents this becoming an issue.
Use server-side scripting to ensure lowercase, and no spaces, in the filename.


<label for="upload">Upload file: <input type="file" id="upload" name="uploaded_file" /></label>

3.7 Required fields

An example of required fields:

Fields marked * are required for submission

Name * :

Notes: Updated 15th July 2k6: Only the asterisk now has a title of "Required" instead of the whole label. This is to allow the label to act as a link to provide further information.

colour is used as a visual clue [U]
~~cursor changes to help if hovered over the label [U]~~
on hover the asterisk title states "Required" and cursor changes to help [U A]
~~required is also stated in the input value [U A]~~
an explanation that * denotes a required field must precede the form / element, never after it [U A]
The asterisk must be inside the label [A]


<p>Fields marked <strong title="Required" class="required">*</strong> are required for submission</p>
<label for="namereq"">
 Name <strong title="Required" class="required">*</strong>
</label> :
<input type="text" id="namereq" name="namereq" value="" />

4.0 Accessible JavaScript in forms

4.1 Inline JavaScript examples

Okay you are not as anal as I and you just want simple inline JavaScript effects

Onfocus select input text (Updated 7th November 2k6):


<input id="name" type="text" value="default value"
  onfocus="if (this.value==this.defaultValue) this.value=''; else this.select()"
  onblur="if (!this.value) this.value=this.defaultValue"
/>

And for a textarea:


<textarea rows="5" cols="40" onfocus="this.select()">
   Enter comment
</textarea>

If you wish to add an onfocus effect, let's say change a black border to a red one:


<input id="name" type="text" value="Enter name"
  onfocus="this.select();
           this.style.border='2px solid red'"
  onblur="if (this.value==''){
            this.value='ENTER YOUR NAME!!!'
          };
          this.style.border='2px inset white'"
/>

4.2 DOM JavaScript

All the JavaScript used on this page is added via the DOM. Consequently none appears in the XHTML itself. Tricks such as:

on focus hi-light the border (stated in CSS too)
select the text
required field reminders

Sorry. At present you'll have to strip anything useful from the JavaScript file forms.js and have a look at the CSS file forms.css too.

It's all commented, well basically anyway.

I notice they now have a name for this type of JavaScript: Unobtrusive JavaScript.

New resource: An Accessible form help added 15th June 2k6

Have fun.