Example of specific and descriptive button text (accessible) vs. generic text (inaccessible)
Image description: Accessible and inaccessible comparison of link text. The accessible example has buttons that say, "Browse campsites" and "Read our full mission." The underlined text at the bottom says, "Use the title of the article itself as the link." The inaccessible example has buttons that say, "Read more" and "Learn more."

This page is in progress -

If you would like to contribute or make a case to prioritize this page, please fill out the form below.

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.

This references WCAG criteria 2.4.4 Link Purpose (In Context) (Level A) and 2.4.9 Link Purpose (Link Only) (Level AAA).


How to Implement This

Nielsen Norman Group (aka NN Group, a great reference for usability) recommends 3 solutions to this in "Learn More" Links: You Can Do Better

  1. Use keywords that describe the link’s destination.
  2. Retain the Learn More format and add descriptive keywords.
  3. 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 poor link accessibility: Hello! I hope this email finds you well. See here for a cool video about pandas and here for the song Panda by Desiigner.

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.

Credits

No credits yet. But this could be you!
No items found.

Contribute and Give Feedback

If you would like to provide feedback or contribute content on this resource, please fill out the form below.

Thank you, your submission has been received!
Oops! Something went wrong while submitting the form. Please check your internet connection and try again.

If you continue to encounter issues, please reach out to alexyingchen(at)gmail.com.