WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: How to announce information outside table related to row?

for

From: Bourne, Sarah (ITD)
Date: Mar 20, 2012 7:39AM

Stella,

Another solution would be to add a column and put the actual text there. It may seem redundant, but it would be much clearer for everybody. You could also color code for those who would benefit from it.

sb

Sarah E. Bourne
Director of Assistive Technology &
Mass.Gov Chief Technology Strategist
Information Technology Division
Commonwealth of Massachusetts
1 Ashburton Pl. rm 1601 Boston MA 02108
617-626-4502
<EMAIL REMOVED>
http://www.mass.gov/itd


-----Original Message-----
From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of Harry Mudd
Sent: Friday, March 16, 2012 6:47 PM
To: <EMAIL REMOVED>
Subject: [WebAIM] How to announce information outside table related to row?

Hi all,

I have a fairly long table and one row is color coated. There is a legend at the bottom of the page where a visual user can see what the coloring represents for the row. How would I convey this information to a screen reader user? I see nothing in ARIA about associated a legend. The only thing I can think of is to add aria-describedby on the TD which includes the ID of the table header and legend information. I've provided an example below. Does anyone have any ideas?

Thanks so much for any help.

- Stella

Example:

<table>
<tr>
<th id="date" scope="col">Date</th>
<th id="event" scope="col">Company</th>
<th id="address" scope="col">Address</th> <th id="cost" scope="col">Cost</th> </tr> ...
<tr>
...
</tr>
...
<tr style="background:#00ff00;">
<td aria-labelledby="legend date">3/5/2009</td> <td aria-labelledby="legend event">Roofing Inc.</td> <td aria-labelledby="legend address">123 Fake St.</td> <td aria-labelledby="legend cost">$1245</td> </tr> ...
<tr>
...
</tr>
...
</table>

<div id="legend">
<span style="background:#00ff00;"></
span><p>Expired Transaction</p>
</div>