WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Stella Mudd
Date: Mar 20, 2012 3:33PM

It is a bit redundant, but I like the idea. I'll give it a try and see how
this works out. I'll make this the first column and add classes to the
"extra" TDs to hide them off-screen, effectively hiding the column.
Thanks.

- Stella

On Tue, Mar 20, 2012 at 6:42 AM, Bourne, Sarah (ITD) <
<EMAIL REMOVED> > wrote:

> 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>
>