Home arrow HTML arrow Page 5 - Building Accessible Web Forms

Building Accessible Web Forms

Your website might look absolutely beautiful, but what if your visitor is "seeing" it through a screen reader? Surprisingly, some simple, common design elements can confuse screen readers. Fortunately, the corrections are also very simple. Read on to find out how to make your website more friendly to all of your visitors.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 27
February 07, 2005
  1. · Building Accessible Web Forms
  2. · The basics of form layout
  3. · Improving accessibility with the "label" tag
  4. · Styling "label" tags for greater accessibility
  5. · Adding usability to forms

print this article

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" />



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.


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.

blog comments powered by Disqus

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials