Links - Optimal Content Examples

Introduction

A link is a type of user control (text and/or image) in a web page that performs one or more of the following behaviours:

• Takes the user to another web page; or
• Jumps to another location within the same web page; or
• Performs user control functionality determined by client side scripting (JavaScript).

Coding Requirements

The following summarizes selected techniques from the Web Content Accessibility Guidelines (WCAG) 2.0 for satisfying the most common applicable success criterion related to this topic. Additional WCAG 2.0 success criterions, techniques, and failures not listed here may also be applicable depending on the content.

1. Descriptive and Consistent Link Text

Descriptive Link Text

The link text is the text that appears inside an <a> element. The text may be plain text or appear as part of the alt attribute of an image.

The link text requires independently sufficient context to clearly indicate the purpose of the link. Link context can only be established using one or more of the following:

• The link text itself, including the alt attribute of any image within the link; or

• Additional text provided via the title attribute; or

• The paragraph, sentence, list item, parent list item, table cell, or table heading enclosing the link; or

• The preceding heading element.

Source: WCAG 2.0, Technique G53, WCAG 2.0, Technique H30, WCAG 2.0, Technique H33, WCAG 2.0, Technique H77, WCAG 2.0, Technique H78, WCAG 2.0, Technique H79, WCAG 2.0, Technique H80, and WCAG 2.0, Technique H81

Consistent Link Text

Link text must be labeled consistently. Links which provide the same function on one or more pages should have consistent link text.

For example, a link labeled Go To Chapter 4 on one page, and Go To Chapter 5 on another is consistent. However, a link labeled Go To Chapter 4 on one page and Open Chapter 5 on another is not.

Source: WCAG 2.0, Technique G197

2. Repeated Navigation

Web pages often contain groups of links which are repeated on multiple web pages for the purposes of navigation within a section of web pages.

Repeated groups of links must:

• Appear in the same relative order on each page; and

• Provide a mechanism to skip them.

Source: WCAG 2.0, Technique G61 and WCAG 2.0, Technique G1

3. Finding Web Pages

One of the following is required on a web site:

• A site map, providing links to different sections of the site; or

• A list of links to all web pages within the web site; or

• A search engine for the site.

Source: WCAG 2.0, Technique G63, WCAG 2.0, Technique G126, and WCAG 2.0, Technique G161

4. Ensure Links Are Keyboard Accessible

See general web accessibility requirements for the keyboard.

5. Use Of Colour

See general web accessibility requirements for colour.

Content Examples

<p><a href="#">Current routes at Boulders Climbing Gym</a></p>

<p><a href="#"><img src="images/sport.gif" alt="Current routes at Boulders Climbing Gym" /></a></p>

<p><a href="#"><img src="images/sport.gif" alt="" /> Current routes at Boulders Climbing Gym</a></p>

<p><a href="#">Feedback <img src="yes-oui.gif" alt="Response received icon" /></a></p>

<p><a href="#">Woodend Music Festival Program <img src="pdf.gif" 
alt="PDF format" /></a></p>

<p>For more information about this topic, <a href="#">click here</a></p>

<p>The Smallville Times <a href="#">reports that</a> the School Board chose a 2007 school calendar
that starts on August 27."</p>

<p><a href="#" title="Read more about failed elephant evacuation">Evacuation Crumbles Under
Jumbo load</a></p>

<ul>
	<li>Check out the video report for last year's <a href="#">National Folk Festival</a>.</li>
</ul>

<h4>The final 15</h4>
<p>Coming soon to a town near you...the final 15 in the National Folk Festival lineup.
<a href="#">[Read more...]</a></p>

<h4>Annual Report 2006-2007</h4>
<p><a href="#">(HTML)</a>&nbsp;<a href="#">(PDF)</a>&nbsp;<a href="#">(RTF)</a></p>

<ul>
	<li>Annual Report 2005-2006
		<ul> 
			<li><a href="#">(HTML)</a></li>
			<li><a href="#">(PDF)</a></li>
			<li><a href="#">(RTF)</a></li>
		</ul>
	</li>
</ul>

<table class="indent-medium">
	<tr>
		<td></td>
		<th>National</th>
	</tr>
	<tr>
		<th>Economy cars</th>
		<td><a href="#">$67/day</a></td>
	</tr>
</table>

Web Accessibility Considerations

Mobility, Dexterity and Coordination Impairments

• Ensure the hyperlinked area is large enough to accommodate users with dexterity issues.

• Ensure keyboard users who are tabbing between links get a visual queue when they are on a link target.

Visual Impairments

• Screen readers can extract all of the links on a web page. It is important that links are descriptive, clear, and unique so that they can stand apart from any other context and they are descriptive enough when compared to all the other links on the page.

Related Links

• Web Content Accessibility Guidelines (WCAG) 2.0 Success Criterions

  • 2.4.1 Bypass Blocks
  • 2.4.4 Link Purpose (In Context)
  • 3.2.3 Consistent Navigation
  • 3.2.4 Consistent Identification

• Web Content Accessibility Guidelines (WCAG) 2.0 Sufficient Techniques

  • G1: Adding a link at the top of each page that goes directly to the main content area
  • G61: Presenting repeated components in the same relative order each time they appear
  • H30: Providing link text that describes the purpose of a link for anchor elements
  • G53: Identifying the purpose of a link using link text combined with the text of the enclosing sentence
  • H33: Supplementing link text with the title attribute
  • H77: Identifying the purpose of a link using link text combined with its enclosing list item
  • H78: Identifying the purpose of a link using link text combined with its enclosing paragraph
  • H79: Identifying the purpose of a link using link text combined with its enclosing table cell and associated table headings
  • H80: Identifying the purpose of a link using link text combined with the preceding heading element
  • H81: Identifying the purpose of a link in a nested list using link text combined with the parent list item under which the list is nested
  • G197: Using labels, names, and text alternatives consistently for content that has the same functionality