Accessible forms

Wednesday 26th March, 2008

Accessibility Tips has an article about using titles on form fields. I couldn’t agree more. Like a lot of sites Justgiving has been somewhat weak in the past when it comes to accessibility, but this is something that is now an integral part of our development process.

One situation in which I found INPUT.TITLE particularly useful is when one label visually describes two fields. An example of this is “Address Lines” next to two input fields.

Picture of a form containing a two-part address field

Often a designer or usability expert wants to minimise copy and label both fields with a single “Address” or “Address Lines” label.

Using a LABEL tag you could only label one field. You could use a hidden LABEL tag for the second field, or possibly wrap a second LABEL tag around the first one, but it seems more elegant to use the TITLE attribute to say “Address Line 1” and “Address Line 2”.

To finish this off I’d also want to make sure that the required or optional status of the field was included in the TITLE tag. Validation is handled either by server or client-side code, rather than by browser behaviour specified by markup. This means that screen-readers have little or no chance of communicating the optional/required status of fields, which for fully sighted people are often marked using asterisks or similar. Producing something like <input title=”Address Line 1 – required field”/>, <input title=”Address Line 2 – optional field”/> solves the problem.