DEV Community

Dawid Ryczko
Dawid Ryczko

Posted on

WCAG - Links and accessible text

#learningnotes #wcag #learning #a11y

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 (1)

Collapse
 
alexandersstudi profile image
Alexander •

The requirement for links to be distinguishable by more than just colour is a notorious trap for minimalist designs. Trying to hit that 3 to 1 contrast ratio between the link and surrounding text while also maintaining 4.5 to 1 against the background is mathematically impossible for a lot of brand palettes. It is almost always safer and easier to just keep the text underline on by default instead of fighting the standard. Do you usually push back on designs that remove underlines or try to hack the contrast maths to make it work?