In recent weeks I have come across two articles, that have helped me massively along the way to create standards based and accessible websites. One of the things that was holding me back so to say was my inability to layout forms nicely without having to resort to tables. That was until I came across Mark Newhouse’s practical CSS article, which had the answers I was after. Having spent some time recently developing accessibility guidelines for my current employer’s sites I wanted to put together a brief outline of how to combine accessibility and standards, combined with Patrick Griffith’s recent article on Accessible Forms I was fully equipped to merge the two into one and add a liberal sprinkling of my own knowledge.

So let’s start off with the code:

<style>
#form {
	width: 230px;
	padding: 5px;
	margin: 0px auto;
	font-family: verdana;
	font-size: 0.8em;
}
div.row {
  clear : both;
  padding-top : 10px;
}
div.row span.label {
  float : left;
  width : 80px;
  text-align : right;
}

div.row span.formw {
  float : right;
  width : 130px;
  text-align : left;
}

legend {
}

fieldset {
	margin : 0;
	padding : 5px;
}
input {
	border: 1px solid #000;
	font-family: verdana;
	font-size: 0.8em;
}
textarea {
	border: 1px solid #000;
	font-family: verdana;
	font-size: 0.8em;
}
select {
	border: 1px solid #000;
	font-family: verdana;
	font-size: 0.8em;
}
</style>
<div id="form">
	<form action="index.cfm?fuseaction=loginUser" method="post" name="frm_test" id="frm_test"
enctype="application/x-www-form-urlencoded">
	<fieldset>
		<legend>Personal details</legend>
		<div class="row">
			<label for="firstName">
			  	<span class="label">First name:</span>
			  	<span class="formw"><input type="text" size="12" name="firstName" id="firstName" 
title="text input: first name" value="" tabindex="1" /></span>
		  	</label>
		</div>
		<div class="row">
		  	<label for="surname">
				<span class="label">Surname:</span>
				<span class="formw"><input type="text" size="12" name="surname" id="surname"
 title="text input: surname" value="" tabindex="2" /></span>
		  	</label>
		</div>
 	</fieldset>
	<fieldset>
		<legend>Address</legend>
		<div class="row">
			<label for="address">
				<span class="label">Your address:</span>
				<span class="formw"><textarea name="address" id="address"
 title="textarea input: address" rows="5" cols="16" tabindex="3"></textarea></span>
			</label>
		</div>
		<div class="row">
			<label for="country">
			<span class="label">Country:</span>
				<span class="formw"><select name="country" id="country" title="select: country"
 tabindex="4">
				<optgroup label="Europe">
					<option value="uk">UK</option>
					<option value="fr">France</option>
					<option value="ger">Germany</option>
				</optgroup>
				<optgroup label="Oceania">
					<option value="au">Australia</option>
					<option value="nz">New Zealand</option>
				</optgroup>
				</select></span>
			</label>
		</div>
	</fieldset>
	<div class="row" align="center">
	  <input type="submit" name="btn_submit" id="btn_submit" value="submit"/>
	</div>
	</form>
</div>

OK all clear? Nothing to explain then… Quite honestly most of it you’ll glean from the article I mentioned previously, but I’ll dwell on a few points.

1. The form layout: The controlling factor here is the initial style/width definition for the <div> with an id of form, which in this case is set to 230px. The columns that hold your form label and form field have also widths specified (in span.label and span.formw). Be careful that your combined totals for these two values do not exceed the overall width specified for form, if you don’t you’ll get an interesting wrap happening.
2. <fieldset> allows you to group form controls together in a logical or semantic way, e.g. personal details would be one such grouping
3. <legend> is another useful tag that allows you to specify a legend for a field set. Using the above example of a field set for personal details, you could assign this field set a legend of, you guessed it, personal details.
4. The <label> allows a form control to be explicitly associated with a label (no doubling up intended, i.e. username: <input id=”username” />) and you should always aim to associate these.
5. For all form controls such as <input> ones I like to include the attribute title. This attribute has the same effect as when used in <a> tag, i.e. when you hover the element a little call out box appears displaying the value captured in the attribute and is, as far as I know, usable by screen readers. I also use this chance to tell the user what type fo form controlled they are presented with, i.e. input, textarea, select, etc…
6. The attribute tabindex I like to use as well as it allows me to easily tab through the form. In most cases the sequence is straightforward, but sometimes you may wish to control the order. By numbering your form controls accordingly using tabindex you can control the order in which a user can navigate the form.
7. The <optgroup> tag allows us to group together the elements of <select> form control in a logical manner. This also results in a non-selectable pseudo header for the grouped items.

And this concludes my contribution to building an accessible form, you can view a sample here. Hope you found it useful.