Home arrow HTML arrow Page 2 - 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 - The basics of form layout
(Page 2 of 5 )

Many Web designers have already built correct form layouts across several projects. Thanks to their vast experience, they're well seasoned as to the right visual presentation for them. Sometimes, however, designers use the wrong way to lay out some form elements. Let's see some general guidelines to properly set out our form controls.

For most text inputs, the text (or label) tied to the form control should precede the control itself, either directly above or to the left. Probably, this is a common sense issue, generally well implemented on most forms. The inputs should be presented to the user in the following manner:

Or, with the element labels positioned to the left:

However, when we're using radio buttons and checkboxes, the form control should appear first, as depicted below:

Or using radio buttons:

Certainly, the examples should seem a little obvious for experienced designers all around, but people still make the mistake of inserting the radio button or check box element after the related text. Even worse, there are situations where the text is displayed in the middle of a sentence, making it extremely confusing for screen readers to properly interpret the content, since such readers expect the checkbox or radio button control to come before the text. In order to illustrate this practice, the image below shows a badly implemented radio button layout:

As we can see, the screen reader will probably identify erroneously the radio button tied to "Yes" with the text "No", since this is the generic order usually presented for radio buttons. With form elements laid out this way, screen readers will nearly always choose "Yes" when, in fact, they want to say "No."

With a little bit of common sense we should be able to build forms that are much more accessible for most people. Just by following some basic form layout rules, we're improving the overall site's accessibility.

Laying out our form elements and sticking to the examples and guides  described above is a large step forward. But we can add more techniques for significantly increasing form accessibility, with minor effort. Just by adding the <label> tag to each text input element, we'd be noticeably enhancing accessibility levels. So, let's take a deeper look at this tag to discover further improvements applicable to our forms.

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-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials