Home arrow HTML arrow Page 3 - Building Accessible Web Forms
HTML

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
TABLE OF CONTENTS:
  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
SEARCH DEVARTICLES

Building Accessible Web Forms - Improving accessibility with the "label" tag
(Page 3 of 5 )

So far, we have consciously implemented the layout for any form present in our website. According to the concepts previously defined, screen readers are potentially capable of reading the description of each form input reasonably well. Although they've been enhanced with newer software programs and better sound hardware, we should always consider those people who use older devices or outdated software. Even so, in many cases, it's pretty difficult for a screen reader to read out the purpose of form inputs, since the final result depends on how we have laid out each form element. Here's where the <label> tag becomes extremely handy for our Web forms.

If we code online forms, making sure that each form input has a <label> tag wrapping the associated text, then we're giving screen readers a lot more of a chance to correctly read the text associated with the form control. We'll be expanding accessibility by 200 percent or more. With the use of the <label> tag, most of modern screen readers will be able to correctly interpret the text related to a form element.

Let's see the proper implementation of this tag in the source code. For instance, we've set up the following lines in the markup:

<form action="processform.php" method="post">

First Name<input name="firstname" type="text" />

<br /><br />

Last Name<input name="lastname" type="text" />

- - -

</form>

In order to apply the <label> tag to each form input, our initial code would be rewritten as follows:

<form action="processform.php" method="post">

<label>First Name<input name="firstname" type="text" /></label>

<br /><br />

<label>Last Name<input name="lastname" type="text" /></label>

- - -

</form>

As you can see, we've wrapped every form input element using a <label> tag to associate the text element with the corresponding <input> element. Another possible way to implement this tag would be assigning an id to the form control and then applying that id value to the "for" attribute of the <label> element. Here is an example to demonstrate this, using the previous markup:

<form action="processform.php" method="post">

<label for="firstname">First Name</label>

<input name="firstname" type="text" id="firstname" /></label>

<label for="lastname">Last Name</label>

<input name="lastname" type="text" id="lastname" />

- - -

</form>

In the last example, we've defined the "for" attribute for each <label> element and assigned the id value corresponding to each <input> element. In thi way we provide the proper association between the text and the form control. This last approach is necessary when we have physically separated the <label> element from the form control tag itself in the source code.

If we have laid out the form using a table structure, we might place the <label> element wrapping the text for the form control in one table cell, and the input element in another, using the "for" attribute to maintain the correct association. Here is an example to illustrate this approach:

<form action="processform.php" method="post">

<table>

<tr>

<td><label for="firstname">First Name</label></td>

<td><input name="firstname" type="text" id="firstname"/></td>

</tr>

- - -

</table>

</form>

In this situation, both the <label> element and the form control reside in different table cells. However the association between them is always maintained with the "for" <label> attribute and the "id" assigned to each <input> element.

This schema is extremely useful when we're creating forms using tables as a container element, which is probably the most usual situation for many websites. Without the proper implementation of the <label> tag, a table-based form layout, where the text for an input element might be placed in a separated cell, and the form control in another, will cause serious problems to screen readers interpreting the content associated to the input element. Otherwise, if we're using the <label> tag correctly, as we've done in the previous example, screen readers shouldn't have problems reading the content.

Also, an important issue to be considered when we're utilizing tables for the layout of forms is to check our tables in a linearized view. We should always check our tables in a linearized mode to make sure that they will render consistently across the page, and that the linkage between the text and a form control is properly maintained. Using the <label> tag ensures that this linkage is strongly kept. 

Whether we implement <label> elements to wrap input tags or employ the "for" attribute in conjunction with ids, we'll be making our forms a lot more accessible.

So far, we've applied <label> elements to each form control. However, there are still a few tricks to help us get the most out of these tags. In the next section, we'll see how it can be done.


blog comments powered by Disqus
HTML ARTICLES

- 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 
Support 

Developer Shed Affiliates

 




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