Do you ever see links like click here or read more? This is a common, yet outdated, way to take website visitors to a different web location for additional information. Best practices dictate that descriptive hyperlinks should be used for links instead.
According to Nielson Norman Group, “One of the greatest problems on the web is that users don't know where they are going when they follow links. Web browsers can pop up a brief explanation of a link before the user selects it. Such explanations can give users a preview of where the link will lead and improve their navigation.”
What are descriptive hyperlinks?
Descriptive hyperlinks are linked phrases that give you an idea of the content to which you are being directed. These can benefit everyone, but they are especially useful for those who use screen readers due to low vision, blindness, and cognitive disabilities. Using descriptive hyperlinks keeps documents clean and easy to read.
Best practices for using descriptive hyperlinks
Use descriptive hyperlinks versus non-informative link phrases. Some examples follow.
In the first example, the hyperlink “Submit your assignment in Canvas” tells you much more about the link destination than the generic “click here" hyperlink.
The second example shows how “Knowledge Base articles” is much more descriptive than “More.”
Finally, screen readers read aloud every letter, dash, slash, and dot of a URL. You can see how that could be bothersome for screen reader users. Plus, this makes the page and its contents busy and unprofessional. When descriptive text is used, “Google” is read as a link. This descriptive hyperlink is useful for everyone, and reading it is easy and clear.
Additional notes:
- Click here and read more can be used as hyperlinks in digital newsletters if appropriate descriptive HTML code is used to describe the link.
- If you use an image to create a hyperlink, make sure the destination is included in the image’s alt text tag.
For additional information about hyperlinks and accessibility, see the WebAIM resource, Links and Hypertext. Developers can benefit from technical ways to meet WCAG (Web Content Accessibility Guidelines) 2.1, including Providing link text that describes the purpose of a link.