Accessible tableless forms

There are tables, there are forms, and there is accessibility. How should you use, or not use, these on a web page?

Download Web Axe Episode 14

Sample XHTML:






Sample CSS:
form div {
clear: left;
padding .5em 0 0;
margin: 0.5em 0px 0px;
}
form div label {
font-weight: bold;
float: left;
width: 10em;
margin-right: 1em;
}

6 comments

  1. mijlee

    It is also good practice to use fieldset tags to group parts of the form. You can also use them instead of DIVs, which makes it even more semantic.

  2. Dennis Lembree

    Yes, fieldset tags are a great idea to group form elements, especially in longer forms. But a fieldset would not work in place of the DIV in this example–the DIV holds each label and form element pair, and you’ll want more than one pair for each fieldset…

  3. bart

    Nice job with the blog and podcasts.

    In your example for the radio buttons you have the label appear before the radio button…was this done intentionally? I’ve read somewhere that the convention for checkboxes and radio buttons is to place the label to the right of the widget(as you did with your comments form).

    Another way to code radio buttons and check boxes is to wrap the label around the widget and place the label text after the input

    By the way, in the example code you have a orphaned closing p tag.

  4. Dennis Lembree

    Bart, think about using a screen reader. As in the sample code, wouldn’t it be better to hear what the form element is, then have the online cursor at that element and ready to enter data? If it was the other way around, the user would go past a form element not knowing what it is, then hear the label, then have to go back to use the element. You could always use CSS to place the label to the right of the element in the layout.

    Thanks for the notice on the orphaned closing P tag. It was supposed to be a closed DIV tag, which I’ve updated.

Post a comment

You may use the following HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>