Creating accessible hyperlinks
Making sure hyperlinks are accessible is essential to ensure everybody understands where links go to when they are followed. Poorly written hyperlink text is confusing, particularly for users of assistive technology like screen readers, who may choose to tab through the links on a page or list them in alphabetic order.
When writing hyperlink text, consider if it makes sense when read on its own, without the surrounding text that gives context. If it doesn't, you need to rewrite it.
Guidelines to follow when creating accessible hyperlinks
Give hyperlinks meaningful names
- Don't use 'Click here', 'Here', 'Read more' or other link text that doesn't describe where the link goes to.
- Don't use 'Link to...'. Screen readers already say 'Link' before a hyperlink.
- Don't use the address that is linked to as the hyperlink text. For instance: www.kirklees.gov.uk
- Ideally, give your links the same link text as the page title or page section that they link to. For instance: If you link to a page called 'Apprenticeships' then write your hyperlink as 'Apprenticeships'.
- If this would make the link text lengthy, consider:
- Shortening the title of the page or section that is linked to.
- Or, changing the link text to something shorter that describes what is being linked to.
Don't link to the same location using different link terms
For instance, don't link to the Apprenticeships page once using the link text 'Apprenticeships' and elsewhere on the same page use the link text 'Find apprenticeships'.
Don't link to different locations using the same link text
For instance, don't link to one page using link text 'Apprenticeships' and elsewhere on the same page use the same link text 'Apprenticeships' to point to a completely different page.
Make sure links are indicated by more than just colour
- Hyperlinks in the main content of a page should be easy to tell from other text by using a distinctive colour, and by using a secondary indicator like underlining links.
- Users are used to seeing hyperlink text on top navigation bars and buttons without underlining. In these cases, the links should be designed so it is obvious that the user can click on them to perform an action.
- The colour contrast of hyperlink text should make the link easy to read.
Colour contrast guidance tells you more about accessible use of colour.
Make sure hyperlinks can be used by keyboard users
Some hyperlinks are written so they can only be accessed by using a mouse. This is often done by using JavaScript.
Make sure the [Tab] key can be used to tab between all hyperlinks on a page, so you aren’t excluding those who don’t use a mouse from accessing some links.
Tell people when links are going to open in a new window
Links that open in a new window can cause confusion for some users.
- Add '(opens in a new window)'' to the link text, or a recognisable icon that indicates a link that opens in a new window.
- If you don’t add '(opens in a new window)'' to the link text, you can use technology like an aria-label to give that information to screen reader users. For instance: aria-label="My Kirklees Account (opens in new window)".
Hyperlinks in printed documents
- In print media, you should use the address that is linked to as the hyperlink text. For instance: www.kirklees.gov.uk
- If the address is lengthy, consider using a short address generator to create a more friendly address.
- If you publish a QR code, always accompany it with written hyperlink text.
