Free! - Making accessible forms part 1 - Premium Content - Articles

Forms are one of the most crucial parts of your website. Forms are used to:

Buy products
Sign up to newsletters
Contact you

These are the goals of your website! When a web user fills out a form they're doing something you want them to do. Unless you make sure they're accessible to one and all, some of your site visitors may not be able to perform some of these crucial tasks.

The group of users who can experience the most problems with forms is visually impaired users utilizing screen readers. Fear not though, help is at hand. Our two part article will show you how to optimize your forms for accessibility and allow absolutely everyone to use them.

Overview

Provide prompt text for each form item

Screen reader users need to hear what the purpose of each form field is so each form item needs to be appropriately labeled with prompt text next to it. Here's an example of a form item with the prompt text, ‘Name’:

Name

So, make sure you put wording next to each form item. Sounds obvious, right? You'll be amazed at how frequently this isn't done. Two common examples are with date of birth fields and search functions:

Date of birth (dd/mm/yyyy)

If you're clever about it, then it's still possible to use the two forms above in an accessible manner, by using invisible text. So, for the search function you would use:

<label for="search" class="noshow">Search</label> <input type="text" id="search" /> <input type="button" value="search" />

And within the CSS you'd put:

.noshow {position: absolute; left: -9000px}

One word of caution. Make sure that the prompt text next to each form item is descriptive - don't put something like, ‘Enter your words here’ for the text next to a search function. Also, buttons don't need prompt text next to them as the text is already embedded in them (such as with the search button above).

Position text correctly

Now that we've got our prompt text, we need to ensure that it's positioned correctly. For input boxes, textareas and dropdown boxes, text should be above or to the left; for checkboxes and radioboxes it needs to be to the right. An accessible form would therefore look like this:

Name

Age

Address

Hobbies Sport Music Computers

Birthday January - April May - August September - December

With regards to the checkboxes and radioboxes, ‘Hobbies’ and ‘Birthday’ aren't prompt text; the words directly adjacent to the boxes are (i.e. ‘Sport’, ‘Music’ etc.).

Be careful though, just because it looks like text is positioned correctly, it may not be within the HTML code. Check your HTML code (or get someone else to) to ensure that the appropriate text comes immediately before input boxes, textareas and dropdown boxes and immediately after checkboxes and radioboxes.

Label prompt text

Now we've got our prompt text set up and positioned correctly, we now need to assign it to its form item. This can be simply achieved using the <label> tag. For a regular input box this would look like:

<label for="name">Name</label> <input type="text" id="name" />

For a checkbox this would look like:

<input type="checkbox" id="sport" /> <label for="sport">Sport</label>

Essentially it's irrelevant what value you put into the <label for> tag, provided it's the same as the id in the input item and that it's unique across the page.

There's a very simple way to test for this on any website: If the prompt text has been assigned to the form item then when you click on the text the form item should become focused. With a text box, this means a flashing cursor will appear in the box; with a checkbox, the box itself will become selected - check this out with the form above!

Title form items with no prompt text

Occasionally, it is impossible to assign prompt text, even invisible prompt text, to a form item. In this case, you can use the title attribute, which now gets read out by most modern screen readers. Using the example of the search function again, you would use the following HTML code:

As the title attribute isn't well supported by older screen readers, this technique should only be used on those rare occasions where there's no other choice available.

Conclusion

Applying basic accessibility isn't particularly difficult. if you look at your website now, chances are that prompt text is already present, and more often than not it's positioned correctly. Add a few labels to the prompt text and you'll be good to go!

Read part 2 of this article, which will show you some more ways of making your forms accessible.

This article was written by Trenton Moss, founder of Webcredible, a web usability and accessibility consultancy. He's extremely good at usability testing and likes to offer CSS help whenever he can.