WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Patrick H. Lauke
Date: Jul 26, 2017 2:20PM

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