Links

Accessibility Techniques for Links
Topic Technique WCAG AA Requirement
Semantic Markup and Purpose Link markup: Links MUST be semantically designated as such.
  • Note: Ideally this means using an <a> element with a valid href value. In rare problematic cases, setting role="link" (and adding all other aspects of link functionality) may be acceptable.
Required
WCAG 4.1.2
Links versus buttons: Links SHOULD be used only for actions that take the user to other locations, and SHOULD NOT be used for button-like functionality.
Note 1: "Other locations" means other web pages, or to other locations in the same web page. Typically, the URL will change after activating a link.
  • Note 2: "Button-like functionality" means scripted features, including submitting forms.
best practice
Distinguishable link purpose: The purpose of each link MUST be understandable and distinguishable from other links on the same page, either from the link text alone (ideally), or from the immediate surrounding context of the link.
Required
WCAG 2.4.4
Avoid "link" (or similar) in the link text: The link text SHOULD NOT state its semantic role (e.g. don't say "link to..."), because screen readers already state the role before reading the link text.
best practice
Consistent link text across pages: Links to the same destinations MUST be consistently identified with the same (or very similar) link text across all pages of the site.
Required
WCAG 3.2.4
Links opening in new tab or window: A link that opens in a new window or tab SHOULD indicate that it opens in a new window or tab.
best practice
Links to non-HTML files: A link to a file or destination in a non-HTML format (e.g. MS Word, PDF, plain text, etc.) SHOULD indicate the type of file or destination.
best practice
Links to external sites: A link to an external site MAY indicate that it leads to an external site.
best practice
Keyboard Accessibility
Keyboard-focusable: Links MUST be keyboard-focusable.
Required
WCAG 2.1.1
Keyboard activation: Links MUST activate with the enter/return key.
Required
WCAG 2.1.1
Focus Order
Focus order: The navigation order of focusable elements (links, form elements, etc.) MUST be logical and intuitive.
Required
WCAG 2.4.3
Tabindex: The tabindex attribute SHOULD NOT be used with positive values to customize the tab order (e.g. don't use tabindex="1").
best practice
Link Colors, Contrast, and Styles
Links visually distinguishable from non-links: Links MUST be visually distinguishable from surrounding non-link text.
Required
WCAG 1.4.1
Color as a way to visually distinguish links: Color alone MUST NOT be used as the only way to distinguish links from surrounding text unless the color contrast between the link and the surrounding text is at least 3:1 and an additional differentiation (e.g. underline, outline, etc.) is provided when the link is hovered or receives focus.
Required
WCAG 1.4.1
Link contrast: Links MUST have a contrast ratio of 4.5:1 (for small text) or 3:1 (for large text) against their background.
Required
WCAG 1.4.3
Target Size
Target size: Links SHOULD measure a minimum of 44px by 44px.
Note: Inline links in paragraphs or blocks of text MAY be smaller.
best practice
Visual Focus Indicator
Focus indicator: All links MUST show a visual focus indicator when in focus.
Required
WCAG 2.4.7
Enhanced focus indicator: Links MAY have enhanced visual focus indicator styles.
best practice
Small focus indicators: The contrast of all small visual focus indicators (smaller than 3px by 3px) against the background SHOULD be at least 4.5 to 1.
best practice
Large focus indicators: The contrast of all large visual focus indicators (at least 3px by 3px) against the background SHOULD be at least 3 to 1.

best practice
Visual Hover Indicator
Enhanced hover indicator: Links SHOULD have enhanced visual hover indicator styles.
best practice
Hover cursor style: On hover over a link, the mouse cursor SHOULD appear as the pointer style, to provide a visual confirmation of the link role.
  • Note: On most browsers, the pointer style is represented by an icon of a hand with the index finger pointing forward.
best practice
In-Page Navigation
Skip navigation: A keyboard-functional "skip" link SHOULD be provided to allow keyboard users to navigate directly to the main content.
  • Note 1: The "skip" link SHOULD be the first focusable element on the page.
  • Note 2: The "skip" link MUST be either visible at all times or visible on keyboard focus.
  • Note 3: "Skip" links, landmarks (e.g. <nav>, <main>, etc.), and page table of contents are each valid and sufficient methods to satisfy the WCAG 2.4.1 requirement to allow users to bypass blocks of content. Ideally the design would include all of these techniques, where appropriate.
Required
WCAG 2.4.1
(This technique is one way to satisfy this requirement)
Page table of contents: A table of contents for the page MAY be included at the top of the content or in the header.
  • Note: Ideally, the links in the table of contents SHOULD correspond to the heading structure in the page content.
Required
WCAG 2.4.1
(This technique is one way to satisfy this requirement)