Most users visually scan links on a page, keyboard users use the tab key to jump from link to link, and screen readers can listen to a list of links on a page. WCAG 2.1 provide guidance for links that emphasize clarity, accessibility, and user-friendliness. They include:
- Clear and Descriptive Text: Use link text that tells users where the link leads. Ensure link text is distinct from other link text on page. Avoid vague phrases like “click here” or “read more.”
- Visual Distinction: Links need to look different from regular text so they catch your eye. Keep color perception differences in mind when considering link styles. Do not use color only. Link style options include bolding, using a distinctly different font-family, underlining, background color, etc.
- Keyboard Accessibility: Make sure users can navigate to and activate links using only the keyboard, without needing a mouse.
- Focus Indication: Provide a clear visual indication of which link currently has keyboard focus. This helps users know where they are on the page.
- Contextual Clarity: Links should make sense within the context of the surrounding content. Users shouldn’t need to read the entire paragraph to understand where the link leads.
- Informative Link Text: The purpose of the link should be clear from the text alone, without relying on surrounding content. Don’t keep users in the dark! If a link leads somewhere special like a PDF, give them a heads-up so they know what to expect. This ensures users understand where the link leads even when skimming.
| Ineffective | Effective |
|---|---|
| WCAG-compliant links should explain their purpose for the link text alone. Click here to learn more. | WCAG-compliant links should explain their purpose from the link text alone. |
| Check your contrast levels using https://webaim.org/resources/ contrastchecker/ | Check your contrast levels using WebAim’s Contrast Checker |
| Swarthmore’s Accessibility website includes five tips for preparing accessible materials | Swarthmore’s Accessibility website includes five tips for preparing accessible materials |
| Here is an introduction from WebAIM to links and hypertext | WebAIM’s introduction to links and hypertext |
| 10 minute conversation | How to have a 10 minute conversation [PDF] |
Ineffective? How so?
- Each link lacks clarity and information. Users must read each sentence to understand the purpose of each link, even within context.
- The link text “Swarthmore’s Accessibility website” seems like it might be okay. However, a visitor will hesitate because they don’t know if link will take them to the homepage or the five tips.
- Without clicking on the links, users can’t determine if the links contain the desired information.
- None of the links serve as compelling calls to action.
- Vague labels such as “Here” or “Click here,” or simply spelling out the URL, are unhelpful. Being vague makes it challenging for users to skim the content and locate specific links if they revisit the page.
Effective? Why?
- Each link makes sense on its own and the text provides a decent sense of the purpose of each link.
- Visitors using listening devices can auditorily skim the links and quickly jump to the link they are most interested in.
- Because the links visually stand out, visual users skimming can jump straight to the link they are interested in
- Each link serves as a decent call to action. Visitors are more likely to click on these
Resources to learn more
- WebAIM’s Introduction to Links and Hypertext
- Pope Tech’s video “Write more accessible link text“
- WCAG’s guidance on link text
- Deque University accessibility tips article: Use link text that makes sense when read out of context
- Working with links in Drupal