Passing Examples
Link with Descriptive Text
This link has descriptive text that clearly explains where it leads.
Contact our support team<a id="link-descriptive-pass" href="https://example.com/contact">Contact our support team</a>
Link with Icon and Text
This link has both an icon and text, which together form its accessible name.
🏠 Return to homepage<a id="link-icon-text-pass" href="https://example.com/home" class="icon-link"><span>🏠</span> Return to homepage</a>
Link with aria-label
This link has an aria-label attribute that provides a more descriptive name than its visual text.
Products<a id="link-aria-label-pass" href="https://example.com/products" aria-label="View all available products and services">Products</a>
Link with aria-labelledby
This link uses aria-labelledby to reference text elsewhere on the page for its accessible name.
Search the knowledge base 🔍<span id="search-label">Search the knowledge base</span>
<a id="link-aria-labelledby-pass" href="https://example.com/search" aria-labelledby="search-label">🔍</a>
Image Link with alt Text
This link contains an image with proper alt text.
<a id="link-img-alt-pass" href="https://example.com/profile">
<img src="..." alt="John Doe">
</a>
Failing Examples
Empty Link
This link has no text content or accessible name.
<a id="link-empty-fail" href="https://example.com"></a>
Generic "Click Here" Link
This link has generic text that doesn't explain its purpose or destination.
Click here<a id="link-click-here-fail" href="https://example.com/about">Click here</a>
Generic "Read More" Link
This link has generic text that doesn't explain its purpose or destination.
Read more<a id="link-read-more-fail" href="https://example.com/article">Read more</a>
Link with URL as Text
This link uses a raw URL as its text, which can be difficult for screen readers to process. This is a best practice issue, not a WCAG requirement.
https://example.com/policy<a id="link-raw-url-warn" href="https://example.com/policy">https://example.com/policy</a>
Icon-only Link without Accessible Name
This link has only an icon with no accessible name.
⚙️<a id="link-icon-only-fail" href="https://example.com/settings" class="icon-link">⚙️</a>
Link with Empty aria-label
This link has an empty aria-label attribute.
FAQ<a id="link-empty-arialabel-fail" href="https://example.com/faq" aria-label="">FAQ</a>
Link with Non-existent aria-labelledby Reference
This link has an aria-labelledby attribute pointing to an ID that doesn't exist.
Support<a id="link-broken-labelledby-fail" href="https://example.com/support" aria-labelledby="non-existent-id">Support</a>
Link with Only Whitespace
This link contains only whitespace characters, which doesn't provide a proper accessible name.
<a id="link-whitespace-fail" href="https://example.com/blank"> </a>
Link with Only Punctuation
This link's aria-label contains only punctuation, which may not be announced by some screen readers.
<a id="link-punctuation-arialabel-fail" href="https://example.com/more" aria-label="..."></a>
Image Link without alt Text
This link contains an image with no alt text.
<a id="link-img-no-alt-fail" href="https://example.com/image">
<img src="..." alt="">
</a>