CP 1.7 – Provide meaningful links
Why is this important?
Most users scan content pages with a focus on the information they need and the actions they can take. Whether you are visually scanning the page or using a screen reader to announce the different links on a page, key to understanding where a link will take you is the link text you use.
Support this scanning behaviour – and avoid making your audience read the content surrounding your links – by ensuring you convey key information in the link text. Many screen reader users will look at a list of all the links when they first land on a page, and navigate to the most appropriate one.
Techniques
Support scanning by providing short and descriptive links
- Make sure your link text accurately represents its destination or function, without needing to read any text around it;
- Make links unique – if you were to read out just the links on your page, would each one make sense? If not, reword them.
- Avoid linking whole sentences;
- Do not link whole paragraphs;
- Avoid unnecessary prefixes, such as “link to…” or “click this to…” – links should be obvious by their appearance and the language you use in the link text;
- Avoid phrases such as “click here”, “more”, “for further information” – these do not give any indication of the nature of the content you are linking to – this is especially inconvenient when reading through a list of links on a page.
Provide useful supporting information in the link text
- Specifying links to other sites, that open in a new window, that link to a different format document (for example, a PDF), or include information about a download size, is very useful information to convey to users, before they make a decision to select it;
- Include this information in the link text, not just next to it, so it will be seen out of context.
Present lists of links as bullet-point or numbered lists
Rather than cram lots of links into your content, use a separate section at the end that lists those links.
- Using list functionality to present lists avoids any confusion caused by links wrapping over multiple lines, which otherwise might look like several different links;
- Using list functionality also tells screen reader users that this content is a list of links, without you having to specify that in text.
Examples of good and bad practice
Descriptive link text and presentation
Table 1 - how to and how not to compose descriptive link text
Do not write… | Do write… |
| |
To visit the location map, click here | Visit the location map for directions |
Flowers, plants, pots, spades, forks, fertiliser, seeds, watering cans. |
Including supporting information in link text
References
WCAG 2.1
- 1.3.1 Info and Relationships (A)
- 2.4.4 Link Purpose (In Context) (A)
- 2.4.9 Link Purpose (Link Only) (AAA)
EN 301 549 v 2.1.2
- 9.1.3.1 Info and Relationships
- 9.2.4.4 Link Purpose (In Context)