Main Content for Page

VPAT Checklist - Links and Navigation

Article Index

Page 3 of 6

Links and Navigation

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  
Link Text
Discernible text: A link MUST have programmatically-discernible text, as determined by the accessible name calculation algorithm.
 Required WCAG 4.1.2
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 *
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 *
Accessibility Techniques for Consistent Identification and Navigation Patterns
Topic Technique WCAG AA Requirement
Consistent Identification: Elements such as labels, names, and text alternatives for content that have the same functionality across multiple screens must be consistently identified. Required WCAG 3.2.4
Accessibility Techniques for Within-Page Navigation
Topic Technique WCAG AA Requirement
Methods to Bypass Blocks of Content Bypass blocks: A method MUST exist to bypass repeated blocks of content. Possible techniques applicable to almost all pages include skip links, headings, and landmarks. It's best to use all of these techniques, if possible. Other techniques include page-specific table of contents links and expandable/collapsible regions. Required WCAG 2.4.1
Reading/Focus Order Reading Order: The reading and navigation order MUST be logical and intuitive. Required WCAG 1.3.2
Focus Order: The navigation order of focusable elements MUST be logical and intuitive. Required WCAG 2.4.3
Paginated Views Visual "you are here" indicator: A paginated view SHOULD include a visible method of informing users which view is the currently active/visible view. Best Practice  
Non-visual "you are here" indicator: A paginated view SHOULD include a method available to assistive technologies of informing non-visual users which view is the currently active/visible view. Best Practice  
Accessibility Techniques for Reading Order/Focus Order
Topic Technique WCAG AA Requirement
Reading Order Reading Order: The reading order MUST be logical and intuitive.
Note: The default reading order is determined by the order of the elements in the DOM.		 Required WCAG 1.3.2
Focus Order Focus Order: The navigation order of focusable elements MUST be logical and intuitive.
Note 1: Focusable elements include links, form inputs and controls, buttons, and any element with a tabindex value of 0 or greater.
Note 2: The default reading order is determined by the order of the focusable elements in the DOM.
Note 3: Use the tab key to navigate forward through focusable elements, and shift + tab to navigate backward.		 Required WCAG 2.4.3
Tabindex Positive values: A tabindex of positive values (e.g. tabindex="1", tabindex="2", etc.) SHOULD NOT be used, because the result is almost always an illogical reading and/or tab order. Best Practice  
Zero: Use tabindex="0" to make a custom widget or control focusable, if it is not already focusable.
Note: Use natively focusable elements whenever possible (e.g. links, form inputs and controls, buttons), rather than custom controls, for simplicity in markup and implementation.		 Best Practice  
Negative 1: Use tabindex="-1" to allow JavaScript to send the focus to an element, without putting it in the focus order. Best Practice