Home arrow HTML arrow Page 4 - 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 - Styling "label" tags for greater accessibility
(Page 4 of 5 )

Since <label> elements are common HTML tags, we are able to apply styles to them, as we usually do with other HTML elements. A nice approach is to style <label> elements, applying some bold fonts to make the label text stand out from the other text in the form, such as:

label {

    font: bold 12px "Arial", Helvetica, sans-serif;

    color: #000;

}

With this set of rules, all of the label text will be displayed using a bolded font. As we've seen above, a <label> tag not only makes it easier for screen readers to identify the input, it's also gives the user a larger area to click on. This is particularly useful when used with radio buttons and checkboxes.

If we have defined the text associated with the label element, the clickable area will be extended not only to the form control, but it will enclose the text as well. Most software applications have been implementing this as the standard for many years, if we think it that way:

For years, software applications have applied the concept of making the text associated with checkboxes completely clickable, as shown in the above image.

The same functionality can be achieved using the <label> tag in online forms, as we clearly see in the example below:

The whole area, including the form control and the related text, is clickable when we're utilizing the <label> element. What's more, we can boost this technique, visually indicating to visitors that the entire section can be clicked, taking advantage of this extra functionality. With some CSS rules, we might suggest to visitors this condition:

label {

    font: bold 12px "Arial", Helvetica, sans-serif;

    color: #000;

    cursor: hand;

}

When the user passes the mouse over the whole <label> area, the cursor will change its pointer, indicating that the entire section is clickable, and the text will set the focus to the form control. However, there is a drawback to this approach, since the "cursor" property is not fully supported by most browsers. With the pros and cons inherent in this approach, it's up to you to decide what is more important for your website.

At this point, we have demonstrated how useful <label> elements can be when they're used in online forms. Now, let's move away slightly from general accessibility and go deeper into the field of usability. Let's present some general guidelines for making forms more usable.


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