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!

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.

Subscribe

Looking for web hosting?

Try DreamHost!

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

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.

More articles

Favourites, here and elsewhere

Affiliation

  • NetRelations
  • Kaffesnobben
  • Dagens recept
  • 9rules network member

Support this site

Show your support by buying a book or two from SitePoint or getting me something from my Amazon Wish List.