E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 6 (In chronological order)

From: Harry Mudd
Date: Fri, Mar 16 2012 4:45PM
Subject: How to announce information outside table related to row?
No previous message | Next message →

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>

From: Angela French
Date: Mon, Mar 19 2012 9:27AM
Subject: Re: How to announce information outside table related to row?
← Previous message | Next message →

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

Stella - there are some sighted people with a type of color blindness who may also no see your red. They will see it as gray. You might try some sort of type symbol you could use that is defined in the legend.

From: Birkir R. Gunnarsson
Date: Mon, Mar 19 2012 9:39AM
Subject: Re: How to announce information outside table related to row?
← Previous message | Next message →

For screen reader users, you might want to announce the row and values
using an ARIA live region (state = polite).
The drawback is that it may not work well with older browsers and
screen readers, of course, and user may find it disruptive.
Is there anyother way this information could be conveyed to the user.
It seems a little difficult to announce the color state of one row
(and indicating information solely by color is a WCAG violation).
Of course one often has to work within limits and make the best of the
current situation, but I am just curious what kind of information is
going on here, and if there might be a more accessible and equally
efficient way to convey it to the user.
Cheers
-B

On 3/19/12, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
>>
>>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?
>
> Stella - there are some sighted people with a type of color blindness who
> may also no see your red. They will see it as gray. You might try some sort
> of type symbol you could use that is defined in the legend.
>

From: Stella Mudd
Date: Mon, Mar 19 2012 12:06PM
Subject: Re: How to announce information outside table related to row?
← Previous message | Next message →

@Angela - Good point. Will fight for this, but an unlikely win :(

@Birkir - I'm unsure of how a live region would work to associate content
in this particular situation. If I am down arrowing through a table, when
I get to this "special" row, how would I identify that HEY this row is this
"type" of row. Can you please explain further? Thanks so much.

On Mon, Mar 19, 2012 at 8:37 AM, Birkir R. Gunnarsson <
= EMAIL ADDRESS REMOVED = > wrote:

> For screen reader users, you might want to announce the row and values
> using an ARIA live region (state = polite).
> The drawback is that it may not work well with older browsers and
> screen readers, of course, and user may find it disruptive.
> Is there anyother way this information could be conveyed to the user.
> It seems a little difficult to announce the color state of one row
> (and indicating information solely by color is a WCAG violation).
> Of course one often has to work within limits and make the best of the
> current situation, but I am just curious what kind of information is
> going on here, and if there might be a more accessible and equally
> efficient way to convey it to the user.
> Cheers
> -B
>
> On 3/19/12, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
> >>
> >>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?
> >
> > Stella - there are some sighted people with a type of color blindness who
> > may also no see your red. They will see it as gray. You might try some
> sort
> > of type symbol you could use that is defined in the legend.
> >

From: Bourne, Sarah (ITD)
Date: Tue, Mar 20 2012 7:39AM
Subject: Re: How to announce information outside table related to row?
← Previous message | Next message →

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 ADDRESS REMOVED =
http://www.mass.gov/itd


-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Harry Mudd
Sent: Friday, March 16, 2012 6:47 PM
To: = EMAIL ADDRESS 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>

From: Stella Mudd
Date: Tue, Mar 20 2012 3:33PM
Subject: Re: How to announce information outside table related to row?
← Previous message | No next message

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 ADDRESS 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 ADDRESS REMOVED =
> http://www.mass.gov/itd
>
>
> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED = [mailto:
> = EMAIL ADDRESS REMOVED = ] On Behalf Of Harry Mudd
> Sent: Friday, March 16, 2012 6:47 PM
> To: = EMAIL ADDRESS 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>
>