Links

Link purpose

Screen readers enable users to skim links on a page, moving from one to the next without declaring the neighboring text. Whenever possible, provide link text that identifies the purpose of the link without needing additional context. According to the Canada.ca Content Style Guide, “Your links should be descriptive and able to stand alone so that it's clear what people can expect if they click on them.”

People with visual disabilities can also determine the purpose of a link by exploring the link's context. If writing stand-alone link text is impossible, ensure the link text identifies its purpose in combination with one of the following:

• The enclosing sentence
• The enclosing list item
• The enclosing paragraph
• The enclosing table cell and table header cell
• The parent list item of a nested list (example follows)

If two or more links on the same page have identical link text but different destinations, you can distinguish the links from one another in one of three ways:

• Rephrase the link text.
• Use an ARIA label (either the aria-label or aria-labelledby attribute). The ARIA label supercedes the native link text in assistive technology. Be sure to include the visible link text in the ARIA label, so voice input users can target the link (see Link Activation, below).
• Add visually-hidden text to the link text (example follows).

Link vs button

Developers frequently confuse the link and button roles, passing the confusion on to screen reader users. Users expect links to navigate (across pages or within a page), and buttons to trigger a local effect (or submit a form). A screen reader user can be disorientated when activating a button and instead navigating to a new page, or when activating a link and instead interpreting a local button effect.

<h1>Tools and resources</h1>

<h2>Planning Accessible Virtual Events – Job Aid</h2>
<p>[Description of the resource]</p>
<p>
   <a href="[...]" aria-label="Access Planning Accessible Virtual Events – Job Aid">Access</a>
</p>

<h2>Employees with Disabilities Network (EwDN)</h2>
<p>[Description of the resource]</p>
<p>
   <a href="[...]" aria-label="Access Employees with Disabilities Network">Access</a>
</p>

<h1>Tools and resources</h1>

<h2 id="planning-virtual">Planning Accessible Virtual Events – Job Aid</h2>
<p>[Description of the resource]</p>
<p>
   <a id="linktext" href="[...]" aria-labelledby="linktext planning-virtual">Access</a>
</p>

<h2 id="ewdn">Employees with Disabilities Network (EwDN)</h2>
<p>[Description of the resource]</p>
<p>
   <a href="[...]" aria-labelledby="linktext ewdn">Access</a>
</p>

<h1>Tools and resources</h1>

<h2>Planning Accessible Virtual Events – Job Aid</h2>
<p>[Description of the resource]</p>
<p>
   <a href="[...]">
      Access
      <span class="wb-inv">Planning Accessible Virtual Events – Job Aid</span>
   </a>
</p>

<h2>Employees with Disabilities Network (EwDN)</h2>
<p>[Description of the resource]</p>
<p>
   <a href="[...]">
      Access
      <span class="wb-inv">Employees with Disabilities Network</span>
   </a>
</p>

.wb-inv {
   clip: rect(1px,1px,1px,1px);
   height: 1px;
   margin: 0;
   overflow: hidden;
   position: absolute;
   width: 1px;
}

Related WCAG resources

Link activation

Some people with disabilities are not able to use a mouse and instead leverage mechanisms such as keyboard, voice control and alternative pointing devices to navigate and interact with web. Ensure that links (and buttons and other controls) are focusable and actionable by keyboard and voice input and not just via a mouse.

Native links are keyboard-activated by pressing the Enter key. If you design a custom link using the ARIA role="link" attribute and a div or span element, include:

• A tabindex="0" attribute, so that the custom link receives keyboard focus via the Tab key.
• A JavaScript event listener for the Enter key for activation, in addition to mouse click.

To activate a link using voice input, the user declares the name of the link as visible. When using aria-label or aria-labelledby to name a link, ensure the link's visible text matches or is included in the ARIA label. Otherwise, voice input users won't be able to target the link by name, forcing them to switch to less efficient techniques to activate the link.

Related WCAG resources

Visual focus indicator

For keyboard only users, visually tracking where they are in a page can be challenging. Mouse users can roam the page and receive two clues about actionable items: the mouse arrow turns into a hand when hovering over an actionable item, and the element displays its "hover" state to indicate it’s actionable (e.g., an underline appears under a link).

Typically, keyboard users press the Tab key to navigate the interactive elements on a web page (links, buttons, form fields, custom controls).

• Tabbing to an item gives it keyboard "focus", at which point it can be activated with the keyboard. See the section Focus and focus order later in this module.
• Sighted keyboard users need visible feedback of a control's focus state.

Web browsers provide a default visual focus indicator that varies in appearance by browser but usually consists of a border or outline around the focused element.

• Always avoid styles that remove or limit the visibility of keyboard focus indicators. The browser default visual focus indicator can be removed with CSS outline:0 or outline: none, which is a common barrier and anti-pattern.
• It's best practice to use CSS to design a highly-visible focus indicator with strong contrast.

a:focus {
   outline: none;
}

 Good example: Canada.ca visual focus indicator

In this example, the first link in a menu of three has a visual focus indicator consisting of a thick black outline, set closely to the text.

CSS

Code begins

a:focus { 
   outline: 2px auto -webkit-focus-ring-color; 
   outline-offset: -2px; 
}

Code ends

Related WCAG resources

Distinguishing links from text

Users with low vision and colour blindness need to distinguish links from neighboring text. The easiest way to do this is with an underline on the link.

When colour is used as the only way to identify a link (meaning the underline has been removed), two conditions must be met:

• 3:1 contrast between the body text and the link text.
• A "visual cue" (not just a color change) that appears on mouse hover and keyboard focus. The most common way to meet this is to underline the link on hover and focus, but you could also provide a background colour or border or outline.

These requirements are in addition to the minimum text contrast requirement of 4.5:1 (see tutorial module 7 Visual design and colours > Contrast). It can be difficult to find a link colour that has both a 3:1 contrast with black body text and a 4.5:1 contrast with a white background. WCAG Technique G183 lists colour values that do, in Example 1 (see Related WCAG resources, below).

Related WCAG resources

Links that open in a new window

Links open in a new window via the target="_blank" attribute.

In general, avoid opening links in a new window. When links do open in a new window, warn users. Either:

• Add the visible link text “(Opens in new window)”.
• Reveal a visually-hidden warning on focus and hover (see example).

<p>
   This is an example of an 
   <a class="info" href="[...]" target="_blank">
      <strong>External link</strong>
      <span>Opens a new window</span>
   </a>          
</p>

Related WCAG resources