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 8:42PM


All solutions work, just pick the one that can be most easily implemented.
If the chance of identical link texts are low in the table, I wouldn´t
put this too high on the priority list, but if all rows in the table
have links with identical text, you need to implement additional
context.



On 7/26/17, Angela French < <EMAIL REMOVED> > wrote:
> 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.
> > > > > > > > >


--
Work hard. Have fun. Make history.