Support Centre

Style links to make them more accessible

Renée Meloche
Renée Meloche
  • Updated

Hyperlinked text functions to take readers of content to a specific address, either in the same document, to an external web address, or to create an email addressed to a specific an email address. Embedded links appear in context in text or in a structured context, like a navigation menu or a in a list of linked resources.

 

Style links with underline and background color

Underline your links and use a color that has at least 4.5:1 contrast with the background color, and at least 3:1 contrast with the paragraph text color.

Write clear and accessible link text

A reader should be able to understand the purpose of a link from the link text alone. The text should indicate the purpose or destination of the link, using language that is:

  • specific

  • succinct

  • clear

Avoid generic link text like “Click here” or “Read more” like this:

Instead, embed the link in the text that is related to the link you're providing, like this:

Clarify image links

Embedding a link in an image can make it confusing for someone using a screen reader or other accessibility tool that describes the image to them. If you embed a link in an image, include the purpose and address of the link in the alt text of the image.

 

The feature(s) discussed in this article is available on the following Venngage subscription plans: Free, Premium, Business and Enterprise.

Curious about upgrading? Compare our plan features side by side.

Start designing!

 

Was this article helpful?

0 out of 0 found this helpful

Have more questions? Submit a request