E-mail List Archives
Re: Best solution for non-distinguishable links occuring in data table
From: Birkir R. Gunnarsson
Date: Jul 26, 2017 8:42PM
- Next message: Birkir R. Gunnarsson: "Re: preferred method for alerting user that results are displayed after search"
- Previous message: Angela French: "preferred method for alerting user that results are displayed after search"
- Next message in Thread: None
- Previous message in Thread: Angela French: "Re: Best solution for non-distinguishable links occuring in data table"
- View all messages in this Thread
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.
- Next message: Birkir R. Gunnarsson: "Re: preferred method for alerting user that results are displayed after search"
- Previous message: Angela French: "preferred method for alerting user that results are displayed after search"
- Next message in Thread: None
- Previous message in Thread: Angela French: "Re: Best solution for non-distinguishable links occuring in data table"
- View all messages in this Thread