Multiple of the same buttons - accessibility issue

[bjorvack]

Some pages like https://thecodingtrain.com/CodingChallenges/ have multiple buttons with the same text. "Watch on YT" for example. While this works fine it's problematic for accessibility.

One off the most used features of a screen reader is getting a list with all the links on a page.
When users are presented with a bunch of the same text, they are forced to go through the whole page to get a clearer picture.

What I suggest is to add a more detailed description of the link in a span that puts it offscreen.

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

<a href="#"> Watch on YT <span class="sr-only">: Coding challenge #121 - Logo Interpreter</span> </a>

[vimkat]

Thanks for pointing this out!

Maybe instead of integrating it into the button title, we could maybe make use of the title attribute on the anchor tag?

[bjorvack]

While that should work, not all screen readers use the alt or title tag if there is a link text. If we use a span in a link text this issue is avoided