Accessible HTML Forms using Definition Lists
Apr
22
Having adopted many different techniques for creating accessible html web forms I decided it was about time I standardised my approach to save time and effort.
The initial focus was on how to structure the form. Did I use DIVs or unordered lists or possibly definition lists? Well after much deliberating I came to the conclusion that definition lists were the way to go. They fit the bill and due their structure can be simply implemented to good effect.
Once that decision was made it was time to get stuck in.
code
The basic code structure is nice and simple. Below you can see the definition list (dl) containing a term (dt) and a description (dd). With in the term we store (on the most part – will explain later) the label for the form element with a relevant name. Within the description we addd the form input.
The structure created by this approach is very clean and almost table esc.
<dt><label for="textbox1">Textbox 1</label></dt>
<dd><input type="text" title="Textbox 1" name="textbox1" id="textbox1" /></dd>
</dl>
The above code shows the bare bones, however, as the code below shows we can make things slightly more complex.
Multiple textboxes
Textboxes can be added over multiple lines, or if required on the same line as shown below.
<!– Multiple textboxes Example Starts –>
<dt><label for="textbox4">Multiple textboxes</label></dt>
<dd>
<input type="text" title="textbox4" name="textbox4" id="textbox4" tabindex="5" class="extra-small" />
<label for="textbox5" class="hide">Month</label>
<input type="text" title="textbox5" name="textbox5" id="textbox5" tabindex="9" class="extra-small" />
<label for="textbox6" class="hide">Year</label>
<input type="text" title="textbox6" name="textbox6" id="textbox6" tabindex="10" class="extra-small" />
</dd>
<!– Multiple textboxes Example Finishes –>
</dl>
Radio Button Lists
Radio buttons can be applied over multiple lines or across the same line as shown below.
<!– Radio list Example (All on one line) Starts –>
<dt>Radio List 1</dt>
<dd>
<input type="radio" title="Radio 1" name="radio1" id="radio1" value="1" tabindex="16" />
<label for="radio1">Radio 1</label>
<input type="radio" title="Radio 1" name="radio1" id="radio2" value="2" tabindex="17" />
<label for="radio2">Radio 2</label>
<input type="radio" title="Radio 1" name="radio1" id="radio3" value="3" tabindex="18" />
<label for="radio3">Radio 3</label>
</dd>
<!– Radio list Example (All on one line) Finishes –>
<!– Radio list Example (On multiple lines) Starts –>
<dt>Radio List 2</dt>
<dd>
<input type="radio" title="Radio 2" name="radio2" id="radio4" value="1" tabindex="19" />
<label for="radio4">Radio 1</label>
<br />
<input type="radio" title="Radio 2" name="radio2" id="radio5" value="2" tabindex="20" />
<label for="radio5">Radio 2</label>
<br />
<input type="radio" title="Radio 2" name="radio2" id="radio6" value="3" tabindex="21" />
<label for="radio6">Radio 3</label>
</dd>
<!– Radio list Example (On multiple lines) Finishes –>
</dl>
Checkboxes
Checkboxes can also be added over multiple lines or on the same line as shown below.
<!– Checkbox Example (All on one line) Starts –>
<dt>Checkboxes 1</dt>
<dd>
<input type="checkbox" title="Check 1" name="check1" id="check1" tabindex="8" />
<label for="check1">Answer 1</label>
<input type="checkbox" title="Check 2" name="check2" id="check2" tabindex="9" />
<label for="check2">Answer 2</label>
<input type="checkbox" title="Check 3" name="check3" id="check3" tabindex="10" />
<label for="check3">Answer 3</label>
<input type="checkbox" title="Check 4" name="check4" id="check4" tabindex="11" />
<label for="check4">Answer 4</label>
</dd>
<!– Checkbox Example (All on one line) Finishes –>
<!– Checkbox Example (On multiple lines) Starts –>
<dt>Checkboxes 2</dt>
<dd>
<input type="checkbox" title="Check 5" name="check5" id="check5" tabindex="12" />
<label for="check5">Answer 1</label>
<br />
<input type="checkbox" title="Check 6" name="check6" id="check6" tabindex="13" />
<label for="check6">Answer 2</label>
<br />
<input type="checkbox" title="Check 7" name="check7" id="check7" tabindex="14" />
<label for="check7">Answer 3</label>
<br />
<input type="checkbox" title="Check 8" name="check8" id="check8" tabindex="15" />
<label for="check8">Answer 4</label>
</dd>
<!– Checkbox Example (On multiple lines) Finishes –>
</dl>
CSS
The CSS is very simple and simply lays out the form but does not apply any sexy formating – I’m a developer not a designer 
Firstly we have the basic form element styles:
form{
margin:0px;
padding:0px;
font-family:arial;
font-size:70%;
}
form input,
form select,
form textarea{
font-size:110%;
font-family:arial;
}
form textarea{
height:100px;
}
form fieldset{
border:1px solid #CCCCCC;
margin:0px;
padding:10px;
display:block;
}
form legend{
color:#666666;
margin:0px;
padding:0px;
font-family:arial;
font-size:130%;
padding:0px 0px 0px 0px;
*margin:0px 0px 0px -6px;
}
/**************** Forms Styles Finish ****************/
These styles provide very basic formating for form elements and can be changed as required.
Next we have the list styles. These are used to provide the form with its structure and positioning.
form dl{
margin:15px 0px 0px 0px;
padding:0px;
width:auto;
clear:both;
}
form dt{
float:left;
width:200px;
margin:0px 0px 5px 0px;
color:#000000;
font-size:110%;
}
form dd{
margin:0px 0px 10px 200px;
color:#666666;
_text-indent:-3px !important;
}
form dd label{
vertical-align:top;
*vertical-align:baseline;
margin:0px 8px 0px 0px;
line-height:1.6em;
}
/**************** List Styles Finish *****************/
Finally we have some generic styles to apply width formating to form elements.
.extra-small{
width:50px;
}
select.extra-small{
width:55px;
}
.small{
width:150px;
}
select.small{
width:155px;
}
.medium{
width:250px;
}
select.medium{
width:255px;
}
.large{
width:350px;
}
select.large{
width:355px;
}
.hide{
display:none;
}
/*************** General Styles Finish ***************/
These classes areapplied to individual form elements to give consistent widths and structure cross browser. Again these can be changed as required to meet the individual needs.
Thats about it. Check out the demo below and download the files to include the code in your site. The code does validate to XHTML 1.0 transitional, however, I have included a couple of workarounds (*cough* hacks) to the css to keep consistancy across browser.
The code also meets the WAI priority two checkpoint and only fails on priority three as there is no placeholder text within the form elements themselves.
demo
Accessible HTML Forms using Definition Lists demo.
Thanks for sharing this idea about setting forms up. I actually have been doing this method for several years and it is the best one from an accessibility standpoint. I just wish more people would use this method as a standard.
[...] I had also spent time implementing some accessibility into the forms the site uses by following a tutorial by Andrew Sellick, and another by The CSS Guy (although the latter doesn’t work correctly at this point due to [...]
I’m a developer and have researched the heck out of the best markup to use as an alternative to tables. I think I have finally decided on definition lists as they are clear when css is disabled, semantic, provide good “hooks” for css for multiple styles so you don’t have to inject a bunch of divs and spans to get what you want. good stuff!
[...] [...]
hey,this is Leila Shoyer,just found your web-site on google and i must say this blog is great.may I quote some of the information found in the post to my local students?i’m not sure and what you think?anyhow,Thank you!
Hello, good writing. Want to get cash for blogging? Check out: http://bit.ly/PaidWriting
excellant blog post, you deserve a free iPad: http://bit.ly/freeipad6