W3C home > Mailing lists > Public > w3c-wai-ig@w3.org > April to June 2005

Re: Form / label examples to review

From: Matthew Smith <matt@kbc.net.au>
Date: Tue, 03 May 2005 16:03:19 +0930
Message-ID: <42771B2F.7090608@kbc.net.au>
To: WAI Interest Group <w3c-wai-ig@w3.org>

Rebecca Cox wrote:
> 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">
<legend>Period Covered By Application</legend>
<table class="formtable" summary="form for period covered by application">
<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 
* 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.



Matthew Smith
Kadina Business Consultancy
South Australia
Received on Tuesday, 3 May 2005 06:33:31 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 20:36:25 UTC