WebAIM - Web Accessibility In Mind

E-mail List Archives

How to announce information outside table related to row?

for

From: Harry Mudd
Date: Mar 16, 2012 4:45PM

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>