Re: Form / label examples to review

Rebecca Cox wrote:
<snip/>
> Any comments on these? Or any good examples I could look at of good
> screen reader friendly forms with this sort of content that I could look
> at?

Personally, I'd have done the layout with CSS rather than a table; 
however, first thoughts, based on your example:

<form id="page" action="#" method="post">
<fieldset>
<legend>Period Covered By Application</legend>
<table class="formtable" summary="form for period covered by application">
<tr>
<td id="from">From:</td>
<td headers="from,mm1lab"><input type="text" size="2" maxlength="2" 
id="mm1" title="from month as two digit number" /></td>
<td id="mm1lab"><label for="mm1"><abbr title="month">MM</abbr></td>
<td headers="from,yy1lab"><input type="text" size="2" maxlength="2" 
id="yy1" title="year from as two digit number" /></td>
<td id="yy1lab"><label for="yy1"><abbr title="year">YY</abbr></td>
...

What I've added is:
* Expansions for abbreviations ("From 10, mm, 02" sounds a bit Homer 
Simpson.)
* Associations between table cells, showing which cells are headers
for the ones containing the input fields
* Titles for input elements to say what they are for
* Fieldset to say what this part of the form is (replaces your <h3></h3>)
* Summary for table; I'm not quite sure if this is a layout table or a 
data table here, so have erred on the side of data and have provided a 
summary.  Note that I've taken the formatting out of the <table> element 
and have replaced it with a CSS class; you'd need to define "formtable" 
in your stylesheet.

Note, you probably won't want the / at the end of the input elements if 
you're going to be serving the page as HTML 4; I do everything in XHTML 
and tend to do it automatically.

Cheers

M

-- 
Matthew Smith
Kadina Business Consultancy
South Australia
http://www.kbc.net.au

Received on Tuesday, 3 May 2005 06:33:31 UTC