CODEWITHSUNDEEP
htmlhyperlinkaccessibilityscreen-readers
jshotz
jshotz

Reputation: 49

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

Upvotes: 0

Views: 248

Answers (3)

aardrian
aardrian

Reputation: 9009

I know you have accepted an answer already, but it is better for all users to make descriptive links and not rely on ARIA. ARIA is a bridging technology, not a workaround for screen readers.

I have quoted the below article below the link. I will reformat it later when not on mobile.

https://www.nngroup.com/articles/learn-more-links/

So, if you use descriptive labels instead of standalone Learn More text, your copy will benefit in several ways:

  • Links will be more accessible.
  • Links will be more enticing to users and potentially more persuasive.
  • Users will feel more confident as they click from page to page.
  • More keywords on the page will help search-engine optimization.
  • Meaningful links will stand alone and help users who are scanning the page.

[…]

Option 1: Use keywords that describe the link’s destination.

[…]

Option 2. Retain the Learn More format and add descriptive keywords.

[…]

Option 3: Convert the preceding-paragraph heading into the only link.

Upvotes: 3

Marat Tanalin
Marat Tanalin

Reputation: 14123

Links like Learn more, Details, etc. are bad practice.

Consider getting rid of such links, and use meaningful text (typically the block title) as a link instead.

If you are absolutely not able to change current design, consider placing the meaningful text into the title attribute of the Learn more link.

Upvotes: 1

Ouroborus
Ouroborus

Reputation: 16865

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.

Upvotes: 3

Related Questions