Accessible Forms #2: Pre-populate your fields
Pre-populatiing your fields gives a further hint to the user
Following on from my post Accessible Forms: Using the label control, I'll just add another useful guideline in improving form design.
The Contact Us page on the ARMS site has a good example of how to develop an accessible form.
This form uses the labels discussed in the previous article, but adds a number of additional elements.
Pre-population of fields
The fields are pre-populated with comments such as "(Your name)" to provide additional guidance on what should be inserted into the field. This also provides an ideal way of differentiating nothing from nothing! ie. the difference between a field that should be deliberately left blank, and a field that has been missed. As every hint is wrapped in brackets, it makes summary validation a breeze.
It is perfectly acceptable, and a good idea, to add a bit of JavaScript if the need takes you that empties the field when a user gives it focus, in preparation for input. As this is complemtary to the function of the HTML, it is perfectly accessible and useful.
Fieldset
When developing a form, it should be enclosed in a fieldset tag. This wraps up a form and its contents, which in a platform like .NET is particularly important, as we can only use a single and rather large form which provides no feedback on its purpose or the hierarchy of the various controls on the page. By wrapping it in a fieldset, coupled with a legend tag, we can separate individual forms (eg. Search form, Contact form, etc.) from each other, and style each individually without resorting to weighing the browser rendering down further by using expensive DIV's.
Consider that the form consists of a simple fieldset, similar to that below:
<fieldset id="contactForm_formFieldset">
<legend>Contact Us</legend>
<p>Please complete all fields marked with an asterisk (*),
and any other fields you feel may be useful to your enquiry.</p>
<p>
<span id="contactForm_lblName"><label for="contactForm_txtName">Name: *</label></span><br />
<input name="contactForm:txtName" type="text" value="(Your name)" maxlength="64" id="contactForm_txtName" />
</p>
<p>
<span id="contactForm_lblEmailAddress"><label for="contactForm_txtEmailAddress">Email Address: *</label></span><br />
<input name="contactForm:txtEmailAddress" type="text" value="(Email address)" maxlength="64" id="contactForm_txtEmailAddress" />
</p>
....
<p>If you have any other feedback, please feel free to add it to your existing comment or enquiry.
We will be happy to respond and take your feedbacl into account.</p>
<p><span class="floatRight"><input type="submit" name="contactForm:btnSubmit" value="Submit form" id="contactForm_btnSubmit" /></span>
Click the <strong>Submit</strong> button to send your feedback to us.</p>
</fieldset>
Validation
A personal preference for validation is to highlight errors two-fold. Firstly, I create a UL tag, with items that are erroneous on the form. This provides a quick summary of errors and how they can be corrected. This is placed at the top of the form, in a visible location - for when the page is returned from postback.
Secondly, I have a Validation Class, which is a simple class with an Assert method that adds an assertion to a collection. This can then be used to render the aforementioned UL tag, and highlight each individual control in error by modifying, for example, their background colour to a soft salmon colour. This is not necassarily accessible, its just usable. Putting stars next to the labels does not, in my opinion, make an erroneous field stand out from its neighbours, nor does it form a strong relationship with the actual field element from an accessibility point of view.
If anyone would like this class, as a starting point for their own, please let me know and I shall make it available.