Accessible Forms

getting the best out of forms and making sure they are accessible

Nick Cowie

http://nickcowie.com

What we will cover

• Using tables for layout
• Fieldset
• Legend
• Label
• :focus
• required fields
• tab order and access keys
• Optgroup
• hasLayout

Using tables for layout

Don’t do it

The problems come when your linearise the form.

Item One	Item Two	Item Three

A screen reader will interpret this table as:

Item One. Item Two. Item Three. Edit (hypertext). Edit (hypertext). Edit (hypertext).

If you must use tables

Make sure they make sense when linearised

Item One

Item Two

Item Three

Connect Outloud (JAWS) reads the table form above like this: :

Item One Edit (hypertext). Item Two Edit (hypertext). Item Three Edit (hypertext).

The example

Personal Details
Name
Title
First Name
Last Name
Age
Under 30
Over 30
Don’t Know

Fieldset

• Introduced in HTML 4.0
• Designed to group related form controls
• Block level element
• Can be nested

Fieldset example

Personal Details

Name
Title
First Name
Last Name

Age
Under 30
Over 30
Don’t Know

Fieldset source code

<fieldset style="width: 26em; float:left;">
   <span style="display: block;">Personal Details</span>
  <fieldset style="width: 13em; float: left;">
    Name<br />
    Title <input name="title" type="text" style="width: 7em; " /><br />
    First Name <input name="firstname" type="text" style="width: 7em; " /><br />
    Last Name <input name="lastname" type="text" style="width: 7em;" /><br />
  </fieldset>
  <fieldset style="width: 9em; float: right;">
  Age<br />
<input name="Age" value="under30" checked="no" type="radio" /> Under 30<br />
     <input name="Age" value="over30" checked="no" type="radio" /> Over 30<br />
     <input name="Age" value="dontknow" checked="checked" type="radio" /> Don&#8217;t Know<br />
     </fieldset>
   </fieldset>
</form>

Legend

• Introduced in HTML 4.0
• Designed to name grouped form controls
• Inline element

Legend example

Personal Details

Name

Title
First Name
Last Name

Age

Under 30
Over 30
Don’t Know

Label

• Introduced in HTML 4.0
• Associate label with input field
• label for = id input
• makes it much easier for people with poor co-ordination
• example

Label source code

<div style="position: relative;">
<label for="lastname" style="display: block; width: 5em; text-align: right; float: left; margin: 0 0.25em 0 0;">Title</label>
<input name="title" id="lastname" type="text" style="width: 3em; " />
</div>
<div style="position: relative; float: left;">
<label for="firstname" style="display: block; width: 5em; text-align: right; float: left; margin: 0 0.25em 0 0;">First Name</label>
<span class="mandatory" style="font-size: 1.5em; position: absolute; left: 8.4em; top: -0.1em; font-weight: 600; color: #c00;">*</span>
<input name="firstname" id="firstname" type="text" style="width: 7em; "/>
</div>
<div style="position: relative; float: left;">
<label for="title" style="display: block; width: 5em; text-align: right; float: left; margin: 0 0.25em 0 0;">Last Name</label>
<span class="mandatory" style="font-size: 1.5em; position: absolute; left: 8.4em; top: -0.1em; font-weight: 600; color: #c00;">*</span>
<input name="lastname" id="title" type="text" style="width: 7em;" />
<div>

:focus

• CSS 2 pseudo class
• Visual clue to show active input field
• Supported by all major browsers except IE, expect it in IE8

Mandatory fields and error messages

• Have mandatory statement at beginning of form
• Group mandatory fields together
• Mandatory and error messages prior input field
• Use absolute positioning to visual position message

Optgroup

Cabbage Lettuce Beans Tomatoes Apples Pears Grapes

• Introduced in HTML 4
• To help organise select lists
• You can not nest them

HasLayout

Unique Internet Explorer feature

Caused problems with radio button in a recent project.

http://www.satzansatz.de/cssd/onhavinglayout.html
MSDN Library

Credits

• Derek Featherstone
  http://simplyaccessible.org/
• Roger Hudson
  http://www.usability.com.au