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

As outlined in part 1 of this article, forms are one of the most crucial parts of your website. They're used to complete important tasks such as buying products and contacting you so their accessibility is crucial. This second part of our two-part article outlines some more ways to optimise the accessibility of your forms.

Overview

Group form items

By breaking information into manageable chunks, visually impaired web users utilising screen readers can more easily work with the information, thereby improving the form's accessibility. If the following form were to get much longer it would become rather unmanageable for screen reader users (and rather unusable for sighted users):

To improve this form's accessibility, it can be simply and easily broken down using the <fieldset> and <legend> tags. The former defines the group and the latter the heading for the group. Using these commands the form can be manipulated to look like this:

The first group includes four form items in total and has the heading ‘Personal details’. The HTML to achieve this is:

<fieldset> <legend>Personal details</legend> --- Form items go here --- </fieldset>

By breaking down long forms in this way, they're easier to manage both for visually impaired web users and non-disabled web users alike. Use the <fieldset> and <legend> tags for any long forms you have and both non-sighted and sighted users will thank you!

Group dropdown menu information

Not only should form items be grouped into manageable chunks to improve their accessibility, but so should items in dropdown boxes. Have a look at these two dropdown boxes and see which you think is easier to use:

(Please note, if you don't see any headings in the first box it could be because you're using a slightly older browser, such as Internet Explorer 5.x)

The first dropdown box is divided into topics, each with its own heading; the second simply lists the hobbies in alphabetical order. Visually impaired users utilising screen readers can listen to these sub-headings to close in on the answer they're looking for, greatly increasing their accessibility.

Imagine trying to use this second dropdown menu if there was a list of 100 hobbies. Trying to find your favourite hobby from this would be a nightmare, especially if you were looking for something like ‘Computer games’, which is actually listed under ‘p’ at ‘Playing computer games’.

Dropdowns menus don't rely on JavaScript

Dropdown menus which activate as soon as the user selects the item rely on JavaScript and are totally inaccessible to screen reader users. The following dropdown menu is accessible as it requires the user to click on the button in order to activate the form:

Quick links

By having the ‘Go’ button it allows the form to be activated on the server side (e.g. with PHP or ASP) and not be reliant on JavaScript. Without the ‘Go’ button it would be totally inaccessible.

Placeholding text?

Priority 3 guideline number 10.4 from the W3C accessibility checkpoints says that placeholding text must be placed in edit boxes like so:

It's only really older screen readers for which this is a requirement for accessibility - without the placeholding text these readers won't let their users access the edit boxes. The number of these screen readers still in use is likely to be very small however, so it's arguable whether it's still necessary to adhere to this checkpoint.

Furthermore, inserting placeholding text into edit boxes can be a nuisance to modern screen reader users where this practice isn't necessary. As such, whether to use placeholding text or not is a subjective decision.

Conclusion

Making forms accessible isn't particularly difficult. However, some practices can be slightly time-intensive to implement. However, the benefit to both disabled and non-disabled users, in terms of both accessibility and usability is certainly present and makes these practices highly worthwhile.

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.