Form accessibility and usability

Derek Featherstone has posted some examples from Designing for Accessibility: Beyond the Basics, the presentation he held at Web Essentials 05. Among the examples posted at Simply Accessible are techniques to improve usability and accessibility of web forms. While Derek notes that these examples haven’t been fully tested, they look really useful to me. Clever stuff!

October 10, 2005
Comments closed
Posted in Accessibility CSS Usability

Comments

1. October 11, 2005 by Rowan Lewis

This article of mine, Semantic Forms, might also be of interest.

It explains an issue that occurs when setting the width of a forms child element and styling it, and also serves as a good example for formatting a basic form.

2. October 11, 2005 by Jens Meiert

You are right, Roger, interesting approaches there. Tests should succeed, as far as I see.

3. October 11, 2005 by Gary Turner

Just quibbling perhaps, but I find it easier if the asterisk is to the right of the label, not the input box. Derek's formatting creates too much separation from the label and adds nothing to readability. Were the asterisk to follow the label, there would be no need to move it via AP placement.

I wonder, too, about the css markup. Label is a non-replaced inline element. Width does not apply unless label is made block or is floated which automagically makes it a block element. I would code it slightly differently:

label span {
    width: 15em;
    float: left;
    clear: left;
    text-align: right;
    margin-right: 1em;
    }

input {
    width: 15em; /*a replaced inline  
                   element*/
    }


  First Name <em>*</em>

cheers

4. October 11, 2005 by Gary Turner

Hmmm, MT seems to eat html markup too.

The html in my post should be;

<label for="fname">
  <span>First Name <em title="required  
    field"> *</em> :</span>
  <input type="text" id="fname" />
</label>

cheers,

gary

Sorry, comments are closed for this post.

Information, sponsorship, and externals

About the author

Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.

Looking for web hosting?

Use the promo code 456BEREASTREET3 to save USD 20 when you sign up!

Recommended books

456 Berea Street Bookstore

Recommended music

456 Berea Street Music Store

Latest articles

Validation statistics from Nikita the Spider Comments off: An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
Authentic Jobs API and Affiliates program Comments off: The Authentic Jobs job listing service now has a public API and an affiliate program.
What does Acid3 mean to you and me? Comments off: Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
Designing Web Navigation (Book review) Comments off: Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
DOMAssistant bundle for TextMate Comments off: To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
First impressions of Internet Explorer 8 Beta 1 Comments off: My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.

Form accessibility and usability

Comments