Good link texts

Rule of thumb: a link text should describe the resource that it links to, even when the text is read out of context. The user must know what to expect.

Make the text stand on it’s own. Some assistive software scans a page for links and presents them to the user as a simple list. In these situations, all the links will be read out of context. So it is important the text used in a link is descriptive, meaningful.

Descriptive link texts

Descriptive, meaningful link text in the Apple VoiceOver link list

It also makes your text better scannable for sighted users when the search the information they want to read.

Avoid the use of meaningless link text like

  • click here:
  • download
  • info

If you use meaningless links text like this, sighted users have to read the whole sentence to understand what the click here means and screen reader users have to guess where the link to leading to. In both cases this will slow the user down, understanding your content.

Non descriptive link texts

Useless, non descriptive link text in the Apple VoiceOver link list

Also avoid fancy character combinations in your links such as:

  • ASCII art, example: \ō͡≡o˞̶
  • Emoticons, example: <3
  • Leetspeak, example: m8ts

Not every user or technology gets what that means.

Avoid writing links in all caps. It’s harder to read for people with dyslexia and some screen readers will think short words are abbreviations so spell the words out character by character. This also counts for text capitalised with CSS.

Avoid using complete URLs as link text. If you are explicitly referring to a web address, keep it short like for example: wordpress.org instead of https://www.wordpress.org

Examples Examples

Incorrect (non descriptive) link texts:
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.

Correct (descriptive)link texts:
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.

Top ↑

For the image, the alt attribute (the alternative text) will be the link text so:

  • No alt attribute: the link text will be the image file name
  • Empty alt attribute: the link will have no link text and will be announced as “link”
  • The alt attribute describes the image: the link text will be the description of the image, which makes no sense probably

So the proper way to use an image as link: give as alternative text the link destination. So, if the image links to a post about the handbook of the accessibility team, give the image as alternative text “Handbook of the accessibility team”.

How to enter alternative text for an image that is used as a link

Top ↑

Resources and good reads Resources and good reads