RE: Redundant links in link list

I forgot to mention that Heydon Pickering's design pattern that I recommended doesn't use JavaScript and it uses very straightforward CSS that works with every browser and assistive technology I have tested. The only exception is Internet Explorer 11 and that's because he has specified sizes in rems. I think that Internet Explorer will work fine too if you change them to ems.

Steve


-----Original Message-----
From: Patrick H. Lauke <redux@splintered.co.uk> 
Sent: 01 March 2022 11:46
To: w3c-wai-ig@w3.org
Subject: Re: Redundant links in link list

On 01/03/2022 10:51, Tobias Bengfort wrote:
> I understand it is helpful to use tabindex="-1" on the image link to 
> remove the redundant link from the tab order. Will this also remove 
> the redundant links from link navigation in assistive technology, e.g. NVDA?
> Or should I use role="none" in addition to the tabindex?
> 
> Demo: https://files.ce9e.org/redundant-links.html


It's not the cleanest approach, but in some cases where you're limited and can't use "fancier" approaches (using clever CSS, and/or JS) don't just make it non-focusable with tabindex="-1", but also completely hide it from assistive technologies (unless the image itself also conveys extra meaning/content that is not already conveyed by the text)

<a href="..." tabindex="-1" aria-hidden="true"> ... </a>

P
--
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke https://flickr.com/photos/redux/ | https://www.deviantart.com/redux

twitter: @patrick_h_lauke | skype: patrick_h_lauke

Received on Tuesday, 1 March 2022 11:52:24 UTC