E-mail List Archives

Search E-mail List Archives 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

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