WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

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

From: Angela French
Date: Wed, Jul 26 2017 2:10PM
Subject: Best solution for non-distinguishable links occuring in data table
No previous message | Next message →

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?

Thank you,




Angela French
Internet/Intranet Specialist
Washington State Board for Community and Technical Colleges
360-704-4316
= EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
www.sbctc.edu<;http://www.sbctc.edu/>;

From: Patrick H. Lauke
Date: Wed, Jul 26 2017 2:20PM
Subject: Re: Best solution for non-distinguishable links occuring in data table
← Previous message | Next message →

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

From: Birkir R. Gunnarsson
Date: Wed, Jul 26 2017 2:27PM
Subject: Re: Best solution for non-distinguishable links occuring in data table
← Previous message | Next message →

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 ADDRESS 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.

From: Angela French
Date: Wed, Jul 26 2017 4:24PM
Subject: Re: Best solution for non-distinguishable links occuring in data table
← Previous message | Next message →

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 ADDRESS 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 ADDRESS 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.

From: Birkir R. Gunnarsson
Date: Wed, Jul 26 2017 8:42PM
Subject: Re: Best solution for non-distinguishable links occuring in data table
← Previous message | No next message

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 ADDRESS 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 ADDRESS 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 ADDRESS 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.