Loading...
Loading content...
Loading content...
Link text should make sense on its own or within its context.
Why it matters: Users need to know where a link goes before clicking it.
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, unless the purpose of the link would be ambiguous to users in general.
What This Means: This success criterion requires that the purpose of each link must be determinable from the link text alone, or from the link text together with its programmatically determined context (like surrounding text, heading, list item, or table cell). Users should be able to understand where a link goes or what it does without having to follow it.
Why It's Important: Screen reader users often navigate by jumping from link to link, reading only the link text. If link text is generic ('click here', 'more', 'read more'), users cannot determine the link's purpose without additional context. This makes navigation difficult and time-consuming. Users with cognitive disabilities also benefit from clear, descriptive link text.
Use descriptive link text that makes sense on its own (e.g., 'Download WCAG 2.2 guide' instead of 'Download'). If generic text is necessary, ensure surrounding text provides context. Use aria-label or aria-labelledby to provide additional context when needed. Avoid links that say only 'here', 'more', 'click here', or 'read more' without context.
This criterion ensures that screen reader users can access and understand the content, improving their overall experience and ability to use the website effectively.
This criterion ensures that users with cognitive disabilities can access and understand the content, improving their overall experience and ability to use the website effectively.
Impact: When this criterion is properly implemented, it removes barriers for these user groups and creates a more inclusive web experience for everyone.
Link text 'click here' is generic, but works because surrounding text provides context.
<p>To learn more about our services, <a href="/services">click here</a>.</p>Link text is descriptive and makes sense on its own.
<p>Learn more about our <a href="/services">web accessibility services</a>.</p>Link text 'here' or 'more' without surrounding context is not accessible.
<a href="/services">here</a>This success criterion benefits the following user groups:
Tip: Use this checklist during development and testing to ensure all requirements for 2.4.4 Link Purpose (In Context) are met. Check off items as you complete them.
To meet this success criterion, ensure the following requirements are met:
While meeting the minimum requirements ensures compliance, consider these enhancements for a better user experience:
If I use 'click here' but the paragraph explains it, that's fine.
While this can work for Level A if context is programmatically available, it's better practice to make link text descriptive on its own. Screen reader users often browse by links list, missing surrounding context.
All links need to be descriptive on their own, no context allowed.
Level A allows link text to work with surrounding context. However, Level AA (2.4.9) requires links to be understandable from link text alone.
I can use aria-label to fix any link text issue.
Aria-label can help, but the visible link text should still be meaningful. Don't rely solely on aria-label for context that should be visible.
Generic link text like 'click here', 'read more', 'here' without sufficient context.
Make link text descriptive. Instead of 'click here', use 'read our accessibility guide' or 'view product details'.
Multiple links with the same generic text going to different destinations.
Make each link unique and descriptive. If you must use similar text, add context: 'Read more about services' vs 'Read more about products'.
Icon-only links without accessible names.
Add aria-label, aria-labelledby, or visible text to icon links. Example: <a href='/search' aria-label='Search'><Icon /></a>
Links that rely on visual context (like 'this' pointing to an image).
Include the relevant information in the link text itself. Instead of 'click this', use 'view the product image' or 'download the accessibility report'.
Using URLs as link text.
Use descriptive text instead of URLs. Instead of 'https://example.com/about', use 'About our company'.
Note: These are official W3C resources for 2.4.4. For the most up-to-date information and detailed technical guidance, always refer to the official W3C documentation.
Implementing 2.4.4 Link Purpose (In Context) correctly requires understanding your specific context. Code solutions vary significantly based on multiple factors:
HTML, React, Vue, Angular, PHP, Python, and other frameworks each have different patterns and best practices.
Server-side rendering, client-side rendering, static generation, and hybrid approaches require different solutions.
Your existing components, styling approach, and UI library influence how accessibility must be implemented.
Your specific user base, content type, and interaction patterns determine the most appropriate implementation.
We provide tailored implementation guidance by analyzing your specific technology stack, coding patterns, design system, and project requirements. Our team reviews your codebase and provides custom solutions that integrate seamlessly with your existing architecture.
Get Custom Implementation HelpPart of
Operable PrincipleGuideline
2.4 Navigable