Overview
Link text should be unique within a page, should be meaningful when read out of context, and should help users to know something about their destination if they click on it. Link text such as “Click here” and “More” fail to meet these criteria. Consider the various ways users interact with links:
- Screen reader users can generate a list of links and navigate them alphabetically. Redundant or ambiguous link text such as “More” is meaningless in this context.
- You don't click on mobile devices... and if you are on a computer without a mouse (like a screen reader) you tab to the links and then press the enter key... so using "click" text in the link description - it suggests that is the only way you execute that link (which is a bad thing).
- Users of speech recognition technology can select a link with a voice command like “click” followed by the link text. Therefore it is also helpful to use unique link text that is short and easy to say.
Techniques
Try to always use link text that meets the criteria explained earlier on this page. For example, consider the following code, where the link text “click here” does not meet the criteria:
<p>For more information about District News, <a href="https://district.ode.state.or.us/news">click here</a>.</p>
A better approach would be to rephrase the sentence so that “District News” is the link text:
<p>For more information, see <a href="https://district.ode.state.or.us/news">District News</a>.</p>
"Read more..." Example
If link text is added at the end of repeated blocks of text, for example “Read more” links at the end of short teasers for blog posts, there are a variety of acceptable techniques for making those links more accessible, without adding clutter or sacrificing readability. For example, the aria-label or aria-labelledby attributes could be added to the link, providing more descriptive link text specifically for screen reader users.
-
ARIA-LABEL Method
In the following example, most screen readers will read the value of the aria-label attribute rather than the link text:
Neighborhood News
Seminole tax hike: Seminole city managers are proposing a 75% increase in
property taxes for the coming fiscal year.
<a href="/taxhike.html" aria-label="Read more about Seminole tax hike">Read more...</a>
Baby Mayor: Seminole voters elect the city's youngest mayor ever by voting in 3 year
old Willy "Dusty" Williams in yesterday's mayoral election.
<a href="/babymayor.html" aria-label="Read more about Seminole's new baby mayor">Read more...</a>
-
ARIA-LABELLEDBY Method
If you try aria-label and an accessibility checker flags it as a violation it could be because there was a valid description visible that should be used for the descriptive link via aria-labelledby.
In the following example, most screen readers will read the value of the reference aria-labelledby attribute rather than the link text:
Neighborhood News
<p>Seminole tax hike: Seminole city managers are proposing a 75% increase in
property taxes for the coming fiscal year.
<a href="/taxhike.html" aria-labelledby="myAriaDetails1">Read more...</a></p>
<p id="myAriaDetails1">PDF file includes info on the tax hike and manager contact info.</p>
What NOT to Do
See the following list of things to avoid...
-
Avoid using URLs as link text
When we see "www.londontoylibrary.co.uk", we see the words 'london', 'toy' and 'library', but a screen reader is going to read the URL letter-by-letter. "Double-U, Double-U, Double-U, Dot, El-Oh-En-Dee.."
As you can imagine, this becomes unintelligible after the first 4-5 letters.
-
Don’t use ALL CAPS in links
There are two problems with capitalized text in links...
- Firstly, some screen readers read capitalized text letter-by-letter. And this occasionally even occurs when the HTML is in sentence-case and the CSS forces the capitalization.
- The second problem is that capital letters are harder to read (for everyone, but especially people with reading disabilities).
-
Don't use the word "link" in your links
This is an easy one. Screen readers tell the user when they encounter a link, so you don't need to use the words "link" or "links to" or "goes to" in your link text.
Additional Resources
Named Links in Documents in our About Word and Accessibility training series
External WCAG References
Most Details from this page were gleaned from the University of Washington's Accessible Technology section.
Screen Reader Differences
Different screen readers (like JAWS and NVDA) and different versions of screen readers, interpret things differently... which make it difficult to know what the screen reader will say for each option.
Example
<a href="alink.htm" ARIA-LABEL="ARIA Link" TITLE="Title Link">Link Name</a>
They each read or ignore the attributes in a different order and way. The common attribute that is read first or only is ARIA. The least respected and most unpredictable attribute is TITLE.