skip to content W3C SVG

15. Meaningful Link Text

Write link text that tells users where the link goes

Write links so that a user who is aware of the topic of the page will understand the purpose of the link when reading one of the following:

  • Link Text Alone: Link text out of context (preferred if possible without awkwardness or redundant text)
  • Nearest Heading, Nearest Parent List Item, or Table Headers: Link text and the nearest heading above the link, OR link text and the nearest parent list item in a nested list, OR link text in a data table cell and the cell’s table headers (These options are only available where semantic markup is possible as in HTML.)
  • Sentence: Link text and the sentence that contains the link.
  • Link Pattern: Link text within the context of other links preceding the link on the same page.

Rationale

All users need to understand where links go without following each link. Screen reader users and users who use high magnification levels can’t take in an overview of the whole page at once the way that a typical user might. This guideline is designed to limit the amount of the page that needs to be explored each time a user attempts to identify a link of interest. This is essential for efficient use of Web content.

When Link Text Alone is used, users will quickly know the purpose of the link regardless of how they arrived at the link. However, in some cases, providing the full purpose of the link within the link text itself can result in a wordy experience for all users.

Users typically arrive at a link:

  • When reading the text leading up to the link

    OR

  • When reading through a list of all the links on the page

As such, Nearest Heading, Sentence, and Link Pattern often provide the context needed without requiring any additional exploration of the page.

Also, if the information is not known when the user first arrives at the link, Nearest Heading, Sentence/Line and Link Pattern can each be easily discovered using keyboard navigation as shown in the following charts:

Screen reader commands

Say Sentence Go to Heading Above Go through Links Above Return to Link from Above
JAWS 7.0 Alt – Number Pad 5 Shift - H Shift – Tab Tab
JAWS 7.0 Laptop Caps Lock – H Shift - H Shift – Tab Tab

Browser commands (which can be used with zoom features)

Say Sentence Go to Heading Above Go through Links Above Return to Link from Above
Firefox 3.0 with Headings Navigation Extension Read text surrounding link Shift - H Shift – Tab Tab

Also, users with cognitive issues should not have to decode too much of the page to understand a link.

General Techniques

When images or portions of images are used as links, two versions of the link text need evaluation:

  • the alt-text, which will be the face of the link for screen readers users

    AND

  • the link as an image, which will be the face of the link for many users, including most screen magnification users

HTML & JavaScript

HTML | XHTML | CSS

  1. Link Text Alone: Write link text so that it describes the purpose of the link:

    <a href=“http://www.google.com">Google</a>

    OR

  2. Sentence: If the link is inside a sentence of text, screen reader users can hear the link text, and then request to hear the current sentence to get further information about the link.

    OR

  3. Nearest Heading, Nearest Parent List Item, or Table Headers: HTML headings are an easy way to provide context for links. Keyboard access users can navigate to the heading just above the link for context.

    <h1>Products</h1>
    


    <h2>JAWS 10.0</h2>
<ul>
<li><a href=“jaws_trial.html”>Download Trial</a></li>
<li><a href=“jaws_purchase”>Purchase</a></li>
<li<a href=“about_jaws.html”>Read More</a></li>
</ul>
    


    <h2>Zoom Text 10.0</h2>
<ul>
<li><a href=“zoom_trial.html”>Download Trial</a></li>
<li<a href=“zoom_purchase”>Purchase</a>/li>
<li<a href=“about_zoom.html”>Read More</a></li>
</ul>

    Similarly, table headers and parent list items can provide context for links in html.

    OR

  4. Link Patterns: Screen reader users and screen magnification users often navigate a page by skipping from link to link. When one link provides context for the links that follow, these users will not need additional information to understand the links. In the example below, the links “JAWS” and “ZoomText” provide context for the links that follow them.

    
<a href=“jaws_home.html”>JAWS</a>
    


    <ul>
<li>
<a href=“jaws_trial.html” title=“JAWS Trial”>Trial</a>
</li>
<li>
<a href=“jaws_purchase” title=“Purchase JAWS”>Purchase</a>
</li>
</ul>
    


    <br />
<a href=“zoom_home.html”>ZoomText</a>
    


    <ul>
<li>
<a href=“zoom_trial.html” title=“ZoomText Trial”>Trial</a>
</li>
<li>
<a href=“zoom_purchase” title=“Purchase ZoomText”>Purchase</a>
</li>
</ul>

    To achieve standards compliance, supplement link patterns with title attributes that fully describe the purpose of the link. title attributes aren’t well supported in assistive technologies today. But, combining link patterns and title attributes covers both practical accessibility and standards compliance.

    Link Patterns with Titles Sample Page: Link Patterns Demo

JavaScript

  1. If dynamic user options result in differing results for links, use JavaScript to update the link text as needed:

    function updateLinkText() {
document.getElementById(‘n’).childNodes[0].nodeValue=‘Skip to the advanced questions!’;
}
    … 
    <a href=“variable_URL.html” id=“n”>Read about the European Renaissance!</a>

  2. If an image is used as a link, and the meaning of the link changes (e.g. plus symbol changes to minus symbol, play button changes to a pause button) update the alt-text for the image:

    document.getElementById(‘c’).alt=‘Collapse menu’;
    … 
    <img src=“plus.gif” alt=“Expand menu” id=“c” />

Android Applications

The approaches for descriptive link text for Android mobile applications is similar to HTML webpages. One of the following can be used:

  1. Link Text Alone: write link text so it is unique and describes the purpose of the link
  2. Sentence: If the link is inside the sentence of text, the screen reader can read the sentence to the context of the link.
  3. Nearest Heading or Table Headers : Screen readers can jump to the heading or table headers to get the context for the link.
  4. Link Patterns: Screen reader and screen magnifier users often navigate a page by skipping from link to link. The previous link can provide context for the links that follow. To achieve standards compliance, use the android:contentDescription to provide descriptive link text. The contentDescription should include the full link text.

iOS Applications

The approaches for descriptive link text for iOS mobile applications is similar to HTML webpages. One of the following can be used:

  1. Link Text Alone: write link text so it is unique and describes the purpose of the link
  2. Sentence: If the link is inside the sentence of text, the screen reader can read the sentence to the context of the link.
  3. Nearest Heading or Table Headers : Screen readers can jump to the heading or table headers to get the context for the link.
  4. Link Patterns: Screen reader and screen magnifier users often navigate a page by skipping from link to link. The previous link can provide context for the links that follow. To achieve standards compliance, define descriptive link text by setting the label and hint to provide contextual information. The label and the hint together should be the full link text.

PDF in Acrobat

The link tag is used to define hyperlinks that are either internal or external to the PDF document. The link tag can be a child of other tags such as the paragraph tag.

To create a link in Acrobat 9 Pro, select the text that will be used for the link text. Access the context menu and select Create Link. Select the link appearance and choose the link action. To create an internal link, select “go to a page view”. An external link can be either a file or a web page.

The next screen will specify the location of the link. For internal links, select the target view using the scrollbars, mouse and zoom. Press Set Link to create the link destination.

Screen Reader Behavior Tips

  • The tooltip created using the link dialog in Adobe Acrobat is not accessible to screen readers. The link text or the link context needs to make the purpose clear.
  • To change the text spoken by screen readers for links, set the Alternative Text for the link. Go to the properties of the Link tag and on the Tag tab set the Alternative Text.

Word

As with HTML links, ensure that the text will be understood by the user in the context of the surrounding text and content structure, and that it makes sense out of context. Screen reader users can browse a list of links, so “General PDF Accessibility Guidelines” is better than “click here.” Verify that the links are active.

To set the text of the link, change the Text to display text in the Hyperlink properties dialog box.
The first form field in the Insert Hyperlink dialog box allows users to change the text to display for the link.

Avoid using the URL as the display text. Listening to long URLs can be tedious for a screen reader user and could cause them to abandon the content. Concise, meaningful descriptions as link text are helpful.

PowerPoint

As with HTML links, ensure that the text will be understood by the user in the context of the surrounding text and content structure, and that it makes sense out of context. Screen reader users can browse a list of links, so “PowerPoint Accessibility Guidelines” is better than “click here.” Verify that the destination of each link is valid.

It is easier for screen reader users when links contain concise, meaningful display text rather than URLs. Listening to long URLs can be tedious for them and could cause them to abandon the content. PowerPoint will autocorrect text that clearly looks like a URL to be a link (e.g. http://… And www.) Allow it to do this or use ctrl-K or Insert > hyperlink to add links. This is better than forcing links to be in plain text. Link text should be differentiated from other content with an underline and/or a high-contrast text color.
In the Insert Hyperlink dialog box, enter the meaningful display text in the text to display textbox.

Testing HTML

Testing technique Description
Tools Though you may want to look at a list of links (Web Accessibility Toolbar > Doc Info. > List Links), the simplest tool is observation.
Review Especially check for those typical (meaningless) link phrases like “Click here” or “More”.
Analysis The link text should indicate what the link does. Context (such as current sentence or current heading) may supply missing information in cases where including the information in the link text would be particularly awkward or repetitive.

Testing Mobile Applications

Testing technique Description
Tools Look for all links and buttons on the page. Use the built-in screen reader on the device (VoiceOver on iOS and TalkBack on Android) to listen to the link text.
Review

Note any links that do not have descriptive link text. Especially check for those typical (meaningless) link phrases like “Click here” or “More”.

Read the links and buttons on the page with the screen reader. Note what link text is read when the button or link gets focus.
Analysis

The link text should indicate what the link or button does. Context (such as current sentence or current heading) may supply missing information in cases where including the information in the link text would be particularly awkward or repetitive.

A common error is not having the visible text associated with the link or button. When the link or button gets focus, the link text and the role (e.g. button, link) should be read together.

Testing PDF in Acrobat

Testing technique Description
Tools Use the content pane and the tags panel to verify proper link text and tagging.
Output

In the document pane, verify that each link is visible.

Using the Select Object tool, right-click each link to check its properties. In Acrobat 9, this is under Tools > Advanced Editing > Select Object; in Acrobat 10 it is under Tools > Content. Verify that the link properties are set to visible, inset, thin underline, and that the action is set appropriately (page view, file, or web page), and for web pages, that the URL is fully qualified, using http://.

In the tags pane, verify that the link is represented within the tag for the surrounding text and as a link tag containing an object reference (OBJR) and a text container for the link display text. For example, a paragraph of text is represented by a <p> tag. There will often be at least three container elements within that tag:

  1. text preceding the link,
  2. link element with text container for display text, and
  3. text after the link.

It is generally recommended that the display text for links is meaningful within the context and is not simply the URL. For example, use “office locations” rather than a lengthy URL.
Analysis Make note of any links that are not visible, are not tagged properly, or which have display text that is not optimal for the context of the content.

Related Guidelines

WCAG 2.0 A – SC 2.4.4 Link Purpose (In Context)

The purpose of each link can be determined from the link text alone, or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general. (Level A)

WCAG 2.0 AAA – SC 2.4.9 Link Purpose (Link Only)

A mechanism is available to allow the purpose of each link to be identified from link text alone, except where the purpose of the link would be ambiguous to users in general. (Level AAA)