forms podcast table web

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 replies on “Accessible tableless forms”

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…

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.

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.

Leave a Reply

Your email address will not be published. Required fields are marked *