This page is in progress -
Why This is Important
Descriptive link text helps screen reader users and people with cognitive disabilities differentiate between links.
Blind and visually impaired people use screen readers to interact with websites and apps. A screen reader is a type of assistive tech that converts text, buttons, and other screen elements to audio and/or braille. If you are new to screen readers, I recommend watching a video to learn how it works.
Screen reader users may experience the links out of context, and if the entire webpage is a wall of "learn more" links, then it becomes tedious to find which link relates to what. Generic link text such as "learn more" or "read more" is also ambiguous and doesn't explain what will happen if you click on it. This can potentially create uncertainty and cognitive strain on everyone, especially those who are cognitively disabled or neurodivergent.
How to Implement This
- Use keywords that describe the link’s destination.
- Retain the Learn More format and add descriptive keywords.
- Convert the preceding-paragraph heading into the only link.
1. Use keywords that describe the link's destination
Instead of “Learn more,” your button can say something actionable with keywords such as “Rent a tool” or “Share your photos with us.”
This is a very effective method, though it requires some skillful copywriting. NN Group recommends front-loading the text by putting the most relevant keywords in the beginning. This makes the links more easily scannable, available in case they are cut off, and more optimized for search engine results pages (SERP).
2. Retain the Learn More format and add descriptive keywords
Instead of just saying “Learn more,” your button can say “Learn more about birds” or “Learn more about pasta.”
This is a very easy and straight-forward way to make links more accessible. The downside is that the links are now longer and take up more space. They also may potentially be truncated before the keywords are visible.
3. Convert the preceding-paragraph heading into the only link
This is my personal favorite. Using a heading as the link text instead of adding another link is very efficient for both copywriting and visual design. It also works well for elements that fit in cards or tiles. A news article is a great example because news sites often have a list of several articles, all of which already have unique titles for documentation and readability purposes.
Ensure the programmatic label matches the visual label
Keep in mind that as another access measure, the programmatic label (what the screen reader reads) should match the visual label (what the person sees). This is because some people use both the screen reader and their visual sight, and if the labels are different that is potentially confusing.
An exception to this rule is for a long list of buttons that make sense to have a same visual label (e.g. "Favorite This") and a different programmatic label so that it's clear what the button is referring to (e.g. "Favorite Item 1" and "Favorite Item 2").
Apply this to emails, events, and social media
The need for descriptive link text is not limited solely to websites. This rule also applies to other situations where you may be adding links, such as with emails, event descriptions, and other social media.
Here is an email with good link accessibility: Hello! I hope this email finds you well. Check out these cool youtube links. This is a cool video about pandas here and this the song Panda by Desiigner here.
Interesting further reading
How to Test This
To test to make sure the link text is descriptive, I'd recommend performing a manual check of all buttons and links, documenting all instances of redundant and/or vague links, and improving on the copywriting per instance.
Contribute and Give Feedback
If you would like to provide feedback or contribute content on this resource, please fill out the form below.