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:
To learn more about our services, href="https://dev.to/services">click here.
- Good example:
To learn more, see our href="https://dev.to/services">services page.
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):
Introduction to WCAG
href="intro.html">PDF,
href="intro.doc">Word
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.
href="report.pdf">Annual Report 2024 (PDF, 2MB)
- Identify External Links: Let users know if a link opens a new window or leads to an external site.
href="https://example.com" target="_blank">Example Site (opens in new window)
-
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
