- From: Jim Allan <jimallan@tsbvi.edu>
- Date: Tue, 23 Apr 2002 14:34:28 -0500
- To: w3c-wai-ig@w3.org
By adding "id" to <th> and "headers" to <td>, in Table reading mode, HPR
will read the header cell and read the contents of the data cell containing
the form control. The form controls are voiced as "links" so a use can hit
enter to activate the control to enter data or change the state.
If there were multiple row, the headers would still be read along with the
cell contents and controls.
<html>
<Head>
</head>
<body>
<form>
<table>
<thead>
<tr>
<th valign="bottom" id="1">
First Name
</th>
<th valign="bottom" id="2">
Last Name
</th>
<th valign="bottom" id="3">
Favorite Color
</th>
<th valign="bottom" id="4">
Favorite Animal
</th>
<th valign="bottom" id="5">
Reviewed?
</th>
</tr>
</thead>
<tbody>
<tr>
<td valign="top" headers="1">
<input type="text" name="firstName" size="20"
maxlength="30" tabindex="24" title="First Name" />
</td>
<td valign="top" headers="2">
<input type="text" name="lastName" size="20"
maxlength="30" tabindex="25" title="Last Name" />
</td>
<td valign="top" headers="3">
<select name="favColor" tabindex="26"
title="Favorite Color">
<option value="None" selected="selected">
Select a Color
</option>
<optgroup label="Blue Hues">
<option value="Periwinkle">
Periwinkle
</option>
<option value="Aqua">
Aqua
</option>
</optgroup>
<optgroup label="Red Hues">
<option value="Crimson">
Crimson
</option>
<option value="Blood">
Blood
</option>
</optgroup>
</select>
</td>
<td valign="top" headers="4">
<input type="radio" name="FavAnimal"
value="Sloth" tabindex="27" title="Favorite Animal" /> Sloth
<br />
<input type="radio" name="FavAnimal"
value="Elephant" tabindex="27" title="Favorite Animal" /> Elephant
<br />
<input type="radio" name="FavAnimal"
value="Hyena" tabindex="27" title="Favorite Animal" /> Hyena
</td>
<td valign="top" class="tableCellNoLine"
headers="5">
<input type="checkbox" name="Reviewed"
value="reviewed" tabindex="28" title="Reviewed" />
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
Jim Allan, Webmaster & Statewide Technical Support Specialist
Texas School for the Blind and Visually Impaired
1100 W. 45th St., Austin, Texas 78756
voice 512.206.9315 fax: 512.206.9264 http://www.tsbvi.edu/
"I see the Earth. It is so beautiful."--first words spoken by human in
space.
[Yuri Alekseevich Gagarin, from the Vostok 1, April 12, 1961.]
-----Original Message-----
From: w3c-wai-ig-request@w3.org [mailto:w3c-wai-ig-request@w3.org]On
Behalf Of Andy J. W. Affleck
Sent: Monday, April 22, 2002 3:31 PM
To: w3c-wai-ig@w3.org
Subject: Re: A new one: label vs. Scope
Phill Jenkins at pjenkins@us.ibm.com wrote:
> Does someone want to code up the sample complex table/form?
Already have :)
Form tags are outside the table and assumed in this example. Also, I am only
including the first data row as subsequent rows are the same with different
tabindexes. We aren't using accesskey because there is too much. It is
assumed the user will tab from cell to cell.
Note, I also declined to use scope="col" because I worried that a screen
reader might catch the heading and read it AND the title and didn't want the
user to have to hear every label twice. Once is enough.
Thoughts on this markup?
-A
<table>
<thead>
<tr>
<th valign="bottom">
First Name
</th>
<th valign="bottom">
Last Name
</th>
<th valign="bottom">
Favorite Color
</th>
<th valign="bottom">
Favorite Animal
</th>
<th valign="bottom">
Reviewed?
</th>
</tr>
</thead>
<tbody>
<tr>
<td valign="top">
<input type="text" name="firstName" size="20"
maxlength="30" tabindex="24" title="First Name" />
</td>
<td valign="top">
<input type="text" name="lastName" size="20"
maxlength="30" tabindex="25" title="Last Name" />
</td>
<td valign="top">
<select name="favColor" tabindex="26"
title="Favorite Color">
<option value="None" selected="selected">
Select a Color
</option>
<optgroup label="Blue Hues">
<option value="Periwinkle">
Periwinkle
</option>
<option value="Aqua">
Aqua
</option>
</optgroup>
<optgroup label="Red Hues">
<option value="Crimson">
Crimson
</option>
<option value="Blood">
Blood
</option>
</optgroup>
</select>
</td>
<td valign="top">
<input type="radio" name="FavAnimal"
value="Sloth" tabindex="27" title="Favorite Animal" /> Sloth
<br />
<input type="radio" name="FavAnimal"
value="Elephant" tabindex="27" title="Favorite Animal" /> Elephant
<br />
<input type="radio" name="FavAnimal"
value="Hyena" tabindex="27" title="Favorite Animal" /> Hyena
</td>
<td valign="top" class="tableCellNoLine">
<input type="checkbox" name="Reviewed"
value="reviewed" tabindex="28" title="Reviewed" />
</td>
</tr>
</tbody>
</table>
---
Incoming mail is certified Virus Free.
Checked by AVG anti-virus system (http://www.grisoft.com).
Version: 6.0.351 / Virus Database: 197 - Release Date: 4/19/2002
---
Outgoing mail is certified Virus Free.
Checked by AVG anti-virus system (http://www.grisoft.com).
Version: 6.0.351 / Virus Database: 197 - Release Date: 4/19/2002
Received on Tuesday, 23 April 2002 15:34:44 UTC