Link Purpose Checker – Test Link Accessibility

Good link text is: Descriptive: Clearly explains where the link goes or what it does Concise: Usually 5-8 words, not full sentences Unique: Different links have different text (unless going to same place) Meaningful: Makes sense out of context Action-oriented: Often starts with verbs (Download, View, Read, Learn) Examples of good link text: "Download the user manual (PDF, 2MB)" "View pricing and plans" "Read our accessibility statement" "Learn about our refund policy" "Contact support team" Why it matters: Screen reader users often navigate by listing all links on a page. Links should make sense in that list.

"Click here" and similar generic phrases are problematic because: No context: Doesn't explain destination when heard alone Screen reader navigation: Users navigate by links - hearing 20 "click here" links is useless Voice control: Users can't say "click here" to activate when there are multiple Cognitive load: Forces users to read surrounding text for context SEO impact: Search engines use link text for context - "click here" provides none Instead of: To learn more about our services, <a href="...">click here</a>. Use: <a href="...">Learn more about our services</a>. The link text itself should convey the purpose.

"Read more" links are common but problematic because they're not descriptive. Solutions: Option 1: Add context with aria-label (Recommended) <a href="/post-slug" aria-label="Read more about Introduction to React Hooks"> Read more </a> Option 2: Include article title in link text <a href="/post-slug"> Read more about Introduction to React Hooks </a> Option 3: Visually hidden text <a href="/post-slug"> Read more <span class="sr-only">about Introduction to React Hooks</span> </a> Option 4: Make entire card the link <a href="/post-slug" class="card-link"> <h3>Introduction to React Hooks</h3> <p>Article excerpt...</p> </a> The heading becomes the link text, which is descriptive!

Yes! This is a WCAG best practice. Users should know: File type: PDF, DOC, ZIP, etc. File size: Especially for large files (over 1MB) Opens in new window: If it opens in new tab/window Good examples: <a href="/manual.pdf"> Download user manual (PDF, 2.5MB) </a> <a href="/data.zip"> Download dataset (ZIP archive, 15MB) </a> <a href="/report.docx"> View annual report (Word document, 500KB) </a> Why it matters: Users on mobile/metered connections can decide whether to download Users know if they have the required software to open the file Screen reader users get complete information before activating Reduces surprise and improves user experience

Icon-only links (common in social media, actions) need accessible names: Method 1: aria-label (Recommended) <a href="https://twitter.com/company" aria-label="Follow us on Twitter"> <TwitterIcon /> </a> Method 2: Visually hidden text <a href="..."> <TwitterIcon aria-hidden="true" /> <span class="sr-only">Follow us on Twitter</span> </a> Method 3: title attribute (Least preferred) <a href="..." title="Follow us on Twitter"> <TwitterIcon /> </a> Why aria-label is best: Reliably announced by all screen readers Provides proper accessible name Doesn't affect visual design Works with voice control Don't forget: Make the icon aria-hidden="true" when using visually hidden text or aria-label to avoid duplicate announcements.

For WCAG Level AA (2.4.4), links can use surrounding context. For Level AAA (2.4.9), each link must be clear on its own. Level AA - Context allowed: Read our <a href="/privacy">privacy policy</a> and <a href="/terms">terms of service</a>. This is acceptable because the sentence provides context. Level AAA - No context needed: <a href="/privacy">Read our privacy policy</a> <a href="/terms">Read our terms of service</a> Each link is self-explanatory. Best practice: Even for AA compliance, make links as descriptive as possible. Screen reader users often navigate by listing all links, which removes context. Card/article contexts: <article> <h3>Introduction to React</h3> <p>Learn the basics...</p> <a href="/react-intro" aria-label="Read Introduction to React article"> Read article </a> </article> Use aria-label to include context for screen readers while keeping visual text concise.