Building Accessible Web Forms - Adding usability to forms
(Page 5 of 5 )
As we know, most people really hate filling in long forms, for reasons similar to those that cause them to feel annoyed by reading long sections of text in Web pages. That's why paragraph elements were created. In order to break up long blocks of text and make then more appealing to visitors, we just insert <p> elements at specific text block points. Forms should be treated in a similar way. Here are a few usability rules highly recommended for implementation in Web forms:
Data collected in forms should be grouped into smaller logical chunks.
Chunks of data should be distributed in clearly defined areas on the form.
Or, when we're dealing with long forms, chunks of data should be distributed in separate forms. Often, it's useful to specify which form section the user is filling in, informing him of the required steps for the process. For instance, one form might indicate: Step 1 of three: your personal information, or something equally explanatory.
All of these rules fall under the heading of common sense. However, there are two HTML tags that deserve some special attention for usability: the <fieldset> and <legend> elements. Let's look at them in turn.
The <fieldset> element is a structural container for form elements, useful for supplying context to logical groupings of different elements. We can use multiple <fieldset> tags to bind form elements that belong to a specific section (for instance, personal information). Browsers that support this element will draw a rule around the form elements contained within the tag, displaying them in a very attractive way. Let's show an example, using this element with the previous markup:
<form action="processform.php" method="post">
<fieldset><legend>Personal Information</legend>
First Name<input name="firstname" type="text" /><br/>
Last Name<input name="lastname" type="text" />
</fieldset>
</form>
In the above sample, we've used the <fieldset> tag to wrap form controls, grouping them in a logical context. Also, the <legend> element is embedded into the code in order to provide an appealing heading for the group of form inputs. In theory, screen readers should be able to properly recognize this association. Unfortunately, at this time, browser support for either <fieldset> or <legend> elements is very limited.
The visual output for this code is the following:
The outer line drawn around the form inputs will expand to the width of the parent element. If we want to set a specific width for the line, a proper style should be applied to it.
We're most likely to use the <fieldset> element with checkboxes or radio buttons, but it's perfectly valid to utilize it for grouping any chunks of data collection. It would be nice to see more browser manufacturers adding complete support for these elements, since they're a great enhancement for general form usability. In the meantime, we'll have to do our best to implement accessible online forms using the available set of resources.
Conclusion
Certainly, online forms are key elements that provide an efficient way to collect user data. Due to their importance, there are some basic guidelines that must be followed to make our forms more accessible to most people. Over the course of this article, we've taken a look at some useful rules and elements that will help us to address accessibility and usability issues when we build Web forms. So, next time you're setting up your registration page, don't forget to put these suggestions into action. There is a lot to be gained.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
