Best practice

Link purpose

  • Provide link text that identifies the purpose of the link without needing additional context.
  • If the link text is not self-descriptive, ensure the link context describes the link purpose.
  • Do not use information-empty link text such as “click here” or “Read More” etc.
  • Distinguish links with identical text but different destinations by either
    • rephrasing the link text,
    • using an ARIA label, or
    • adding visually-hidden text to the link text.

Link activation

  • Custom links need tabindex="0" to receive keyboard focus and an onkeypress event to activate by Enter key.
  • A link's visible name matches or is included in the link's accessible name.

Visual focus indicator

  • Links must have a visible focus state.
  • Avoid styles that the visibility of keyboard focus indicators
  • Use CSS to design a highly-visible focus indicator with strong contrast

Distinguishing links from text

  • Ensure links have visual indicators to enable users to quickly identify them.
  • Colour must not be the only means of differentiating a link from regular text. Accompany colour with another visual cue (e.g., underline, italics, bold) to differentiate link text from regular text

Link opens in new window

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

Blocks of navigation

  • Identify important blocks of navigation with the <nav> element or role="navigation" attribute.
  • When there are two or more navigation regions on the page, name each with aria-label or aria-labelledby to differentiate them.
  • Indicate the current location visually, using CSS, and semantically, using the aria-current="page" attribute.

Skip navigation links

  • Place the skip navigation link at the top of the page before any other focusable element (link, button, or custom control).
  • The skip link doesn't not need to be visible until it receives focus.
  • Use clear link text – e.g. “Skip to Main Content” or “Skip to Content”
  • Use a same-page link, targeting the id attribute value of the destination (usually the <main> element).
  • Assign the destination the tabindex="-1" attribute. This fixes shortcomings in some browsers that move the viewport to the destination but not the focus.
  • Do not hide the skip link using any of these CSS options:
    • Use CSS to permanently position the link off screen
    • Set display: none
    • Set visibility: invisible

Multiple ways

Provide more than one way to locate a Web page within a set of Web pages. Use two or more of the following techniques:

  • Provide links to navigate to related Web pages.
  • Provide a Table of Contents.
  • Provide a site map.
  • Provide a search function to help users find content.
  • Provide a list of links to all other Web pages.
  • Link to all of the pages on the site from the home page.

Table of contents

  • Ensure Table of contents reflects the document's heading hierarchy
  • Ensure every topic in the Table of Contents links to the appropriate location

Focus and focus order

  • Ensure a meaningful tab order by positioning focusable content in the same sequence as the underlying code.
  • Ensure the keyboard navigation order is logical and intuitive. Typically, this means ensuring the navigation follows the visual flow of the page, left to right, top to bottom. It moves through the banner, main navigation, page navigation and controls, then footer on a typical page.
  • Avoid using tabindex values greater than 0.

Character key shortcuts

If a keyboard shortcut is implemented in content using only letter (including upper- and lower-case letters), punctuation, number, or symbol characters, then at least one of the following is true:

Turn off
A mechanism is available to turn the shortcut off.
Remap
A mechanism is available to remap the shortcut to include one or more non-printable keyboard keys (e.g., Ctrl, Alt).
Active only on focus
The keyboard shortcut for a user interface component is only active when that component has focus.

Changes of context

Whenever possible, give the user control over changes of context with an explicit user action that's generally understood to cause a change of context; e.g, clicking a link or pressing a submit button.

Changes of context:

  • must never be triggered on focus.
  • must be anticipated by the user if triggered by changing the setting of a control (on input).

Consistency

Consistent navigation
From one page to the next, the relative order of components on the page and of links within navigation blocks should remain unchanged. Components or links may be removed or inserted, but the relative order should stay the same.
Consistent identification
From one page to the next, identical functional components should be consistently named. For instance, a widget named "Search" on one page is named "Search" on the other pages, not sometimes "Find". This includes the alt text of icons and other non-text items with identical functionality.
Back to top