Meaningful Link Text

Link text should describe what it links to, even when the text is read out of context.

What

  • Avoid links that do not make sense when read alone (:

    • Download

    • Click Here

    • Info

    • Read More

  • Avoid writing links in *all caps*

    • Can be problematic for users who are dyslexic

  • Avoid using complete URLs as link text.

The Why:

  • Users who cannot see the screen may 'listen' to a list of links.

    • Scenario: Users who are blind and use a screen-reader to pull up a list of links.

(*) See below for acceptable technique / workaround to "Read More's"

Examples

Unclear Link Text

From https://make.wordpress.org/accessibility/handbook/content/good-link-texts/

Incorrect Usage

If you are interested in our work, click here to subscribe to our newsletter. You can download the manual of the espresso machine, or contact us for more info.

Better Usage

Subscribe to our newsletter if you are interested in our work. You can download the manual as PDF of the espresso machine, or contact us for more info.

Techniques

When repetitive blocks of content teasers are supplied, it is appropriate to have a Read More link.

  • <aria-label> or <aria-labelledby> are acceptable ways to add more descriptive link text specifically for screen-reader users.

    • Screen-readers will read the value of the <aria-label> attribute over the link text.