Accessible forms: Guidelines, examples and accessible JavaScript tricks.

Author: mike foskett last updated: 24th May 2012

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.

This page is a continual work in progress. Any comments, queries or corrections please e-mail me: mike.foskett@webSemantics.co.uk and put "accessible forms" in the subject line so I know your not trying to enlarge my bits.

This document has a Belorussian translation by Paul Bukhovko and a German translation by Anastasiya Romanova.

The reasoning for a particular form guideline is simplified down to:

Abbreviation Meaning
UUsability
AAccessibility
SSemantics
LLegal (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.

  1. The fieldset tag should encompass complete sections of a complex form [A U], and may encompass the whole of a simple form.
  2. 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
  3. Input fields require explicit descriptions [A]. The "for" attribute in the label element must be associated to the input id.   Example input type text
  4. Text type fields should not have a default value [A]. This guideline was changed, 11/02/05, from "should" and changed again in 2011 from "may" on recommendation by the RNIB.   Example input type text. Default placeholder text, if required, should be added to the html post page load via JavaScript.
  5. Text type fields should have the text selected upon focus [U].   JavaScript methods
  6. Input field width (size or cols) should be kept relevant to the expected user input [U].   Example input type text
  7. 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
  8. Text descriptions must follow radio and checkbox inputs [A].   Example of radio elements
  9. Radio buttons must have a default selected value [U].   Example of radio elements
  10. Radio buttons should not be used for boolean (yes / no) options. If at all possible use a checkbox [U].   Example of checkbox elements
  11. Selects with less than 5 options should be coded as radio buttons [U].   Example of checkbox elements.   Example of simple select elements
  12. Complex selects, with more than 11 options, should be coded with option groups and labels [A]. Example of complex select elements
  13. Graphic buttons must have meaningful alt texts [U A].
  14. 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].
  15. 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.
  16. 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.
  17. Note that HTML and XHTML v1 allow both name and id attributes on a form element. XHTML v1.1 only allows id [S].

Top of page

2.0 Accessible form examples

2.1 Simple search:

Search forms should have an accesskey="4" associated to the first label. Except when it's defined to access a search page.

Note: In the coding accesskey=4 has been removed to prevent any conflicts with this pages search form.

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

Click to expand / close simple search XHTML example:


<form id="simplesearch" method="get" action="#">
  <fieldset>
   <label accesskey="4" 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" -->

Click to expand / close simple search CSS example:


#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-size:100%; font-weight:bold; border:2px inset  #ccc; padding-left:3px; width:160px}
#simplesearch input#searchbutton  {font-size:100%; font-weight:bold; border:2px outset #ccc; margin-left:1em}

Top of page

2.2 Simple login:

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

It is advisable to associate an accesskey to the label of the username. There is no standard so L seems as good as any. Usability suggests displaying input fields that are sized appropriately for the input. So avoid having a 300px wide field for an eight digit password.

Click to expand / close simple login XHTML example:


<form id="simplelogin" method="get" action="#">
 <fieldset>
  <label accesskey="L" 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" -->

Click to expand / close simple login CSS example:


#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}

Top of page

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 JavaScript form help, a show & hide technique added 15th June 2k6

Contact form

E-mail help

Please note this method has been superceded by a new resource accessible JavaScript form help, a show & hide technique added 15th June 2k6

It is important that:

  1. this help div appears before the label and input field
  2. this help div has a heading
  3. this help div has a slightly different background & text colour
  4. the help link shares the same background & text colours

[help]

Phone help

Please note this method has been superceded by a new resource accessible JavaScript form help, a show & hide technique added 15th June 2k6

[help]

Newsletter

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.

Top of page

3.0 General form elements

3.1 Text type inputs

An example of inputs of type text

  1. 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>
    
  2. 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" />
    
  3. Updated 2012 Text fields should not have a default value [A, U].
    • 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 removed upon focus. See 4.0 Accessible JavaScript for methods
    
    <label for="description">Description:
      <input type="text" id="description" />
    </label>
    
  4. 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>
    
  5. 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:

  1. radio inputs should have one option checked as default [U]
  2. 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]
  3. it may be judicious to add a title element duplicating the descriptive text [A]
  4. radio input must precede it's descriptive text [S A]
  5. horizontal radio input lists should not be used [U]
  6. horizontal radio input lists must have enough surrounding space to clearly distinguish between choices [U]
  7. radio inputs for simple boolean (yes / no) responses should not be used. Use a checkbox [S]
  8. radio inputs should replace select inputs wherever possible. Five or less options should always be coded as radio inputs [U A]
  9. a fieldset must be used to group related inputs [U S A]

Expand / close the radio button example XHTML snippet:


<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>

Expand / close the relevant CSS for the radio button example:


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

Top of page

3.3 Checkboxes

An example of checkbox inputs:

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

Expand / close the checkbox example:


<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>

Top of page

3.4 Simple select box

An example of a simple select input:

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

Expand / close the simple select example:


<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>

Top of page

3.5 Long select box

An example of a long select input:

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

Expand / close the long select example:


<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>

Top of page

3.6 File-upload box and button

An example of a file-upload input and button:

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.

Expand / close the file upload example:


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

Top of page

3.7 Required fields

An example of required fields:

Fields marked * are required for submission

:

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.

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

Expand / close the required field example:


<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="" />

Top of page

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:

  1. on focus hi-light the border (stated in CSS too)
  2. select the text
  3. 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 JavaScript form help, a show & hide technique added 15th June 2k6

Have fun.

Top of page