WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Best solution for non-distinguishable links occuring in data table

for

From: Angela French
Date: Jul 26, 2017 4:24PM

Ugh, can't believe I forgot the anchor tag. In a hurry before lunch. So is one of your suggestions preferred over the other?

Angela


-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Birkir R. Gunnarsson
Sent: Wednesday, July 26, 2017 1:27 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Best solution for non-distinguishable links occuring in data table

Angela

A few questions:

1. Where is the link, is the link inside the first <td> cell?
2. aria-labelledby
a. needs to reference an id attribute (you cannot use text) and b. the value of the target attribute overrides the text.
e.g.
<td> <a href="#" aria-labelledby="trown">Toby</a></td>
<td id="brown">Brown</td>
is assigned the accessible name "Brown" (Toby is overridden).

In this situation you can either use the aria-label attribute with text <td><a href="#" aria-label="Toby Brown">Toby</a></td> <td>Brown</td></tr> (this is announced as "Toby Borwn" by a screen reader) or aria-describedby pointing to an id <td><a href="#" aria-describedby="brown">Toby</a></td><td
id="brown">Brown</td></tr>
This would be announced as "Toby Brown" by a screen reader.
If you can make the distinguishing cells into row headers and put them on the left side of the links it automatically provides the desired context.
<th>Brown</th><td<a href="#">Toby</a></td>



On 7/26/17, Patrick H. Lauke < <EMAIL REMOVED> > wrote:
> On 26/07/2017 21:10, Angela French wrote:
>>
>> Hello,
>> I want to make sure that we are using the best solution to
>> distinguish links in a data table that have the same link text Here
>> is a made up
>> example:
>>
>> <table>
>> <tr>
>> <th>Dog Name</th><th>Dog Color</th><th>Town</th>
>> </tr> <tr>
>> <td>Toby></td><td>brown</td><td>Seattle</td>
>> </tr>
>> <tr>
>> <td>Toby></td><td>black</td><td>New York</td> </tr>
>> </table>
>>
>>
>> Our solution that I'd like your opinion on is to add aria-labelledby
>> using the distinguishable data field as the value. For example:
>>
>> <tr>
>> <td>Toby
>> aria-labelledby="brown"></td><td>brown</td><td>Seattle</td>
>> </tr>
>> <tr>
>> <td>Toby
>> aria-labelledby="black"></td><td>black</td><td>New York</td> </tr>
>>
>>
>> Any ideas for a better solution?
>
>
> Your markup examples seem to be missing the actual links? In any case,
> you can use aria-label, aria-labelledby, aria-describedby or even
> classic visually hidden yet accessible spans of text to make link text
> unique.
>
> P
> --
> Patrick H. Lauke
>
> www.splintered.co.uk | https://github.com/patrickhlauke
> http://flickr.com/photos/redux/ | http://redux.deviantart.com
> twitter: @patrick_h_lauke | skype: patrick_h_lauke
> > > > >


--
Work hard. Have fun. Make history.