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!

Posted on October 10, 2005 in Accessibility, CSS, Quicklinks, 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

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.