WCAG Principle: Operable
Guideline 2.4: Navigable (Provide ways to help users navigate, find content, and determine where they are)
Conformance Level: A (Minimal Requirement)
What is Success Criterion 2.4.4?
The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.
This guideline is about making sure that website links have clear descriptions. Basically, if someone sees a link, they should be able to understand where it leads by reading the link text or the text around it. This helps users decide whether to click on it.
The text with the link should tell you what the link is for. For example, if the link goes to a document or an app, just naming it can be enough. But, you don’t always have to use the name; other descriptions can work too.
Success criterion 2.4.2 (Page Titled) focuses on web page titles. Similarly, the title should match what the link or page is about. That way, users can easily connect the clicked link to the page it opens.
However, there are exceptions. Sometimes, a link might use vague terms like “click here” or “more.” This is acceptable if the purpose of the link would be unclear to all users, not just those with disabilities.
How does it make your website accessible?
By using clear link text or context, websites become easier to use for everyone. Plus, it is especially important for those using screen readers or other assistive tools.
Who benefits?
- Screen reader users benefit because they can hear and understand where each link will take them without needing additional context.
- People with cognitive disabilities benefit because clear and simple link texts make navigation less confusing.
- Meaningful link text helps people with motor impairments to navigate more easily with a keyboard without extra effort.
How to Meet Success Criterion 2.4.4
Common mistakes on websites:
- Using ambiguous link text like “click here,” “more,” or “read on” without sufficient surrounding context that explains the link’s purpose.
- Using the same text for links that lead to different locations, which confuses users about where each link goes.
- Embedding links within large blocks of text without clear indicators of their function or destination.
- Using complex or technical words in link descriptions that can confuse users, especially those with cognitive disabilities.
- Using links that do not behave the way their texts describe.
How to fix mistakes:
- Use clear, concise descriptive phrases that clearly explain where each link leads and what it does.
- Ensure that links going to different pages or sections have distinctly different texts that accurately describe their targets.
- Ensure links within large text blocks are clearly highlighted and include descriptive text.
- Use simple, straightforward language in link descriptions to ensure everyone understands them.
- Design links to behave in expected ways and avoid non-standard actions that could confuse users.
Helpful tips for developers:
- Use consistent styling for all links across the website, such as color and underline, to make them easily recognizable as clickable elements.
- Place the most relevant keywords at the beginning of the link text. Doing so makes it easier for users, especially those using screen readers, to quickly understand its purpose.
- Ensure that each link has a unique context or surrounding text that does not overlap with other links.
- Implement breadcrumbs and other clear navigation aids. This helps users understand their current location and how links relate to the structure of the site.
How to test if your websites meets conformance:
- Navigate through the website and compile a list of all links. This includes links within text, buttons, navigational elements, and any interactive elements that behave as links.
- Look at each link text independently from its context. Does the text clearly indicate where the link leads or what it does?
- Evaluate the immediate context of the link. This may be the sentence, paragraph, list item, or table cell containing the link. Does the surrounding text provide enough information to understand the link’s purpose?
- Check if links leading to the same destination use consistent text. Conversely, also check that links leading to different destinations do not use the same descriptive text.
- Use a screen reader to listen to how it reads out the link text and context. Is the purpose of each link clear based on the audio information alone?
- Navigate the site using only the keyboard. Can you understand the purpose of each link without using a mouse to hover or click?
Bad and Good Examples (Code Snippets)
Code example that fails success criterion 2.4.4
Code Snippet
<p>To get the latest updates, <a href="/subscribe">subscribe to our newsletter</a>.</p>This code snippet fails because “click here” does not tell the user where the link leads or what it does without reading the surrounding text. Essentially, users with screen readers might not receive enough context when links are announced outside of the surrounding text.
Code example that meets success criterion 2.4.4
Code Snippet
<p>To get the latest updates, <a href="/subscribe">subscribe to our newsletter</a>.</p>This passes because the link text “subscribe to our newsletter” clearly describes what the link does directly within the link text itself. It is also clear and informative without requiring additional context. This makes it easily understandable for all users, including those using screen readers.
Frequently Asked Questions
What is the purpose of a link?
The purpose of a link is to navigate to another resource or location, either within the same website or to an external destination.
Is it acceptable to use URLs as link text?
Using URLs as link text is generally not recommended unless the URL is descriptive of the destination. Descriptive text is more helpful and accessible than a raw URL, which may not convey meaningful information to all users.
Can placeholder links ("#") be compliant if the page content provides context?
Placeholder links often fail this criterion because they do not lead anywhere, potentially confusing users. Even if the surrounding content provides context, the link itself should have a functional purpose.
