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.
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
<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:
--- Form items go here ---
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
<legend> tags for any long forms you have and both non-sighted and sighted users will thank you!
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’.
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.
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.