Creating accessible assets: Links

Accessible links help all users (especially those using screen readers or keyboard navigation) understand where a link will take them and how to interact with it. This article covers best practices for writing clear link text, using meaningful context, and avoiding vague phrases like “click here.” Learn how to make your links more usable, informative, and compliant with accessibility standards.

Requirements

• Links must be semantically designated as such.
• Ideally, this means using an <a> element with a valid href value. Setting role="link" (and adding all other aspects of link functionality) may be acceptable in rare problematic cases.
• A link must have text a program can recognize, following the accessible name calculation algorithm.
• Specifics about such information are defined by other specifications, such as WAI-ARIA, or the relevant platform standards.
• Each link’s purpose should be clear and distinguishable from other links on the same page, either from the link text itself (preferably) or from the surrounding context of the link.
• It is advised to avoid link names such as:
  • Learn more, 
  • Find out more, 
  • Click here for details. 
• Links leading to the same destinations must consistently use the same (or very similar) link text across all website pages
• Links must be keyboard-focusable without requiring precise timing for each keystroke.
• Additionally, links must be activated using the Enter/Return key.
• The navigation order of focusable elements (links, form elements, etc.) must be logical and intuitive.
• Elements’ order must be in a logical sequence. 
• Links must be visually distinguishable from surrounding non-link text.
• Links should not rely solely on color to differentiate them from surrounding text unless there is sufficient contrast between them and the text.
• When the link is hovered over or receives focus, an extra visual cue (like an underline or outline) should appear.
• Links must have a contrast ratio of 4.5 to 1 (for small text) or 3 to 1 (for large text) against their background.
• All links must show a visual focus indicator when in focus.
• The contrast of all visual focus indicators against the background must be at least 3 to 1.
• Users should have a way to skip over repeated content blocks on multiple web pages (e.g., a long list of filers on an e-commerce website that is a standard element of many pages).
  • The “skip” link should be the first focusable element on the page.
  • The “skip” link must always be visible or on keyboard focus.
  • “Skip” links, landmarks (e.g., <nav>, <main>, etc.), and page table of contents are all acceptable methods to meet the WCAG 2.4.1 requirement for allowing users to bypass blocks of content. It’s ideal to incorporate all these techniques in the design where suitable.
• A table of contents for the page can be placed at the top of the content or in the header.
• Ideally, the links in the table of contents should match the heading structure in the page content.

Examples

	Filters panel open on user’s demand, allowing to skip reading this wast column content via screen reader.
	DON’T: The following example incorrectly uses tabindex to specify an alternative tab order. If this list is navigated by the tab key, the list is navigated in the order Homepage, chapter 3, chapter 2, chapter 1, which does not follow the sequence in the content.
	When text fields receive focus, a vertical bar is displayed in the field, indicating that the user can insert text or all of the text is highlighted, indicating that the user can type over the text.
	DON’T: In this example, when using a keyboard, the call to action button is skipped (or even the whole element that gives the user crucial information).
	DON’T: All the elements marked in red look the same, but View pricing is a link. The rest of the blue text is just highlights. This means that links are not visually distinguishable from surrounding non-link text. DON’T: At the same time, elements marked in green cause action, but they look like regular text. This means that links are not visually distinguishable from surrounding non-link text.