jshotz jshotz - 1 month ago 4x
HTML Question

Is it possible for screen readers to differentiate <a> link text?

I basically have the following series of links like the HTML below:

<a href="http://mylink0.com">Learn more</a>
<a href="http://mylink1.com">Learn more</a>
<a href="http://mylink2.com">Learn more</a>
<a href="http://mylink3.com">Learn more</a>

All the link text are the same. I read this is horrible for a screen reader user. I'd like to differentiate what the screen reader would read even though I have the same link for all the links. Is this possible?

<a href="http://mylink0.com">Learn more</a> Screen reader should read Red Store
<a href="http://mylink1.com">Learn more</a> Screen reader should read Blue Store
<a href="http://mylink2.com">Learn more</a> Screen reader should read Green Store
<a href="http://mylink3.com">Learn more</a> Screen reader should read Yellow Store


The W3C has a document about this sort of thing. You add aria-label attributes to your links to give replacement content text meant for assistive technologies.

<a href="http://mylink0.com" aria-label="Red Store">Learn more</a>

Though you may wish to reconsider how the links are labeled to begin with.