WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Birkir R. Gunnarsson
Date: Jul 26, 2017 2:27PM

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.