Links

Use text for links that accurately describes the destination. Never use “click here”, “more”, “full report”, as link text (P)

Who does this assist?

This will assist users who access links with devices other than a mouse. These include:

  • users with motor disabilities that may use a keyboard to navigate through a web page or site.
  • users with visual disabilities that may use a screen reader and a keyboard.

In addition, following this rule provides clearer link text and this will benefit all users.

Good Practice Example

Live example 1:

This is a good example of an accurate description of a destination of a link:

view the website statistics

Live example 2:

This is a good example of informative link text for a report download:

2011 Annual Report (PDF 78kb)

Common Error Examples

Live example 1:

This link text only communicates that the action that is required rather than the destination of the link. Without context this could be meaningless when it is read using a screen reader.

click here for website statistics

Live example 2:

This link only communicates a link for a report - not the format, size, name or content of the document

Full report

Link text should include the file type and size if it links to a downloadable file (e.g. PDF 426kB) (U)

Who does this assist?

All users will benefit from additional information in the link text. This additional information will inform users that the content is not a HTML resource and will open in the respective software, if the software exists on the user's computer system.

Good Practice Example

The link text used in this example provides information about the format and size of the downloadable file, and also provides useful information about the content of the document..

Live example:

2011 Annual Report (PDF 78kb)

Common Error Example

The link text used in this example provides no information about the size and format of the downloadable file.

Live example:

Full report

The colour of link text should contrast with surrounding text, and be underlined so that they stand out. This is a de facto standard for links and is what users have come to expect (U)

Who does this assist?

This contrast and underlining will allows users to visually and instantly identify the links on a web page.

Good Practice Example

The following example highlights the text that is a link.

Live example:

view the website statistics

Common Error Example

In the following example 'website statistics' is a link but visually looks no different to plain text.

Live example:

view the website statistics

As a rule of thumb, don’t underline non-linked text as users will expect this text to be a link (U)

Who does this assist?

Emphasis added to text presents visual clues to the user. To indicate emphasis use elements such as em (default italicised styling) or strong (default bold styling). Text underlining should be reserved for links only.

Good Practice Example

Demonstration of the use of the strong element

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc congue laoreet orci ac aliquet. Etiam congue enim vel nisl rhoncus pretium. Proin et risus ed justo tempor facilisis.

Demonstration of the XHTML for the strong element
<p><strong>Lorem ipsum dolor sit amet </strong>, consectetur adipiscing elit. Nunc congue laoreet orci ac aliquet. Etiam congue enim vel nisl rhoncus pretium. Proin et risus ed justo tempor facilisis.</p>
Demonstration of the use of the em element

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc congue laoreet orci ac aliquet.
Etiam congue enim vel nisl rhoncus pretium. Proin et risus ed justo tempor facilisis

Demonstration of the use of the XHTML for the em element
<p><em>Lorem ipsum dolor sit amet</em>, consectetur adipiscing elit. Nunc congue laoreet orci ac aliquet. Etiam congue enim vel nisl rhoncus pretium. Proin et risus ed justo tempor facilisis.</p>

Common Error Example

The following text demonstrates a common error in underlining text for emphasis.

Live example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc congue laoreet orci ac aliquet. Etiam congue enim vel nisl rhoncus pretium. Proin et risus ed justo tempor facilisis.