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

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

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

Legend example

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

Label

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

Mandatory fields and error messages

Optgroup

HasLayout

disappearing check box

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 and accessible beer