DEV Community

Dawid Ryczko
Dawid Ryczko

Posted on

WCAG - Links and accessible text

#learningnotes #wcag #a11y #learning

Descriptive Link Text

Link text should clearly describe the destination or function of the link. Avoid generic terms like "click here", "read
more", or "more info".

  • Bad example: 
<p>To learn more about our services, <a href="/services">click here</a>.</p>
Enter fullscreen mode Exit fullscreen mode
  • Good example: 
<p>To learn more, see our <a href="/services">services page</a>.</p>
Enter fullscreen mode Exit fullscreen mode

Links in Context

If the link text is not descriptive on its own, its purpose must be clear from the surrounding text (Success Criterion
2.4.4).

  • Example (List context): 

<ul>
  <li>
    Introduction to WCAG
    <a href="intro.html">PDF</a>,
    <a href="intro.doc">Word</a>
  </li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Distinctive Links (Use of Color)

Color should not be the only visual means of conveying that a piece of text is a link (Success Criterion 1.4.1).

  • Links should be distinguishable from surrounding text by something other than color (e.g., underlines, bolding, or icons).
  • If only color is used, the contrast ratio between the link and the surrounding text must be at least 3:1, and a non-color visual indicator (like an underline) must appear on focus or hover.

Focus Visible

Any keyboard-operable user interface must have a mode of operation where the keyboard focus indicator is visible (
Success Criterion 2.4.7).

  • Never remove the default focus outline (outline: none) without providing a clear, high-contrast alternative.

Good Practices

  • Identify File Types: If a link leads to a file (like PDF or DOCX), include the file type and size in the link text. 
  <a href="report.pdf">Annual Report 2024 (PDF, 2MB)</a>
Enter fullscreen mode Exit fullscreen mode
  • Identify External Links: Let users know if a link opens a new window or leads to an external site. 
  <a href="https://example.com" target="_blank">Example Site (opens in new window)</a>
Enter fullscreen mode Exit fullscreen mode
  • Avoid Redundancy: Don't start link text with "Link to..." or "Go to...". Screen readers already announce that it is a link.
  • Consistent Identification: Links with the same destination should have the same link text across the website.
  • Skip Links: Provide a "Skip to Content" link at the very beginning of the page to allow keyboard users to bypass navigation.
  • Image Links: If an image is a link, its alt text must describe the destination, not the image itself.

References

Link Purpose (In Context)

Link Purpose (Link Only)

Use of Color

Focus Visible

Techniques for descriptive link text

Top comments (0)