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: 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
(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

- 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