October 2005
Making accessible forms part 2
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.
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:
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?
Advert: Training courses
Want to learn more about usability, accessibility or CSS? Why not come on one of our excellent training courses:
- Usability testing training
- Writing for the web training
- Web usability training
- Web accessibility training
- Intermediate CSS training
- Advanced CSS training
Courses are held every month in London and are taught by usability and accessibility professionals.
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. Trenton's crazy about web usability and accessibility - so crazy that he founded Webcredible, an industry-leading user experience consultancy, helping to make the Internet a better place for everyone. He's very good at running CSS training and spends much of his time working on the world's most accessible CMS.
What next?
- Read more web accessibility articles on this website
- Optimise the accessibility of your website with our accessibility consulting services
- Get a highly accessible CSS website through our accessible web design expertise
- Get our accessible and usable CMS so your site offers outstanding accessibility
- Attend our interactive web accessibility training, intermediate CSS training and advanced CSS training courses
Republish our web accessibility articles
All our accessibility articles are available for republishing, provided the author bio and links in the bio remain intact. You can also use our RSS news feed to republish all of our accessibility articles.
Bookmark or recommend this article
Add this article to:
You can also tell a friend about this article right now!