Accessible forms

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.

One Response to Accessible forms

  1. Nice post. It’s something I need to play with more as I build up the new templates… I think there’s plenty to think about.

    Clear styling, tidy markup, acceptable (if not almost perfect) crossbrowser rendering and of course as you’ve pointed out accessibility. So much stuff to think about! I often wonder where the line between being a designer and a developer start and end. Is the role something that one can perfect with all these different learning curves or is it something that has to reach an acceptable standard.

    Becuase one day… I’m going to want to reach the height of what I’m doing and be able to learn things at a calmer pace. One day!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: