Home arrow HTML arrow 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: 3 stars3 stars3 stars3 stars3 stars / 17
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

TOOLS YOU CAN USE

advertisement
Building Accessible Web Forms
(Page 1 of 5 )

In the process of building websites, one of the page elements often associated with accessibility problems are forms, closely followed by another relevant design component: our friendly tables. When we're designing Web pages while keeping in mind basic accessibility principles, these topics seem to be the most difficult. However, this doesn't have to happen that way; making online forms more accessible is not as difficult as it seems. Many websites present users with professionally styled forms, powerful server-side validation capabilities, and good overall form layout quality. But, very often, they're littered with accessibility howlers.

Often it's just a matter of turning off the computer monitor and using a screen reader to realize that those forms are actually far from being accessible for disabled people. Indeed, most form accessibility problems should be fairly easy to address, and involve little more than adding some useful tags in the markup and being more careful about form layout.

In this article, we'll cover the implementation of these accessibility tags for quick insertion into our code, as well as the basics of form layout for different elements. Hopefully, these techniques will make our forms a little more usable for a wide audience of visitors.


blog comments powered by Disqus
HTML ARTICLES

- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5
- BBC Adopts HTML 5, Mozilla Addresses Issues
- Advanced Sticky Footers in HTML and CSS
- HTML and CSS Sticky Footers
- Strategy Analytics Predicts HTML5 Phones to ...
- HTML5 Guidelines for Web Developers
- Learning HTML5 Game Programming
- More Engaging CSS3 and HTML Background Effec...
- Engaging HTML and CSS3 Background Effects
- More Web Columns with CSS3 and HTML
- Columns with CSS3 and HTML
- Creating Inline-Block HTML Elements with CSS
- Drag and Drop in HTML5: Parsing Local Files

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



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