Why Link Text Matters
Screen reader users can:
- Pull up a list of all links on a page
- Navigate by pressing Tab or the K key to jump between links
- Hear links read out of context from surrounding text
When every link says "click here" or "read more," users can't tell where they lead.
Screen Reader Link List Example
Imagine hearing this list of links:
- "click here"
- "click here"
- "read more"
- "here"
- "link"
Not helpful! Now compare to: "Accessibility 101 guide," "Spring 2026 schedule," "Contact the help desk"
Link Text Guidelines
1. Be Descriptive
Link text should describe the destination or purpose.
2. Be Unique
Different links should have different text (unless they go to the same place).
Don't: All same text
- Fall 2026 Schedule -Learn more
- Spring 2026 Schedule -Learn more
- Summer 2026 Schedule -Learn more
Do: Unique text
3. Be Concise
Keep link text to a few words—enough to be clear, not so long it's tedious.
Just right
4. Don't Use URLs as Link Text
URLs are hard to read and understand, especially for screen reader users.
Do
Exception:If the URL is short and memorable, and you expect users to type it, showing it may be appropriate.
5. Indicate File Types and New Windows
Let users know what to expect:
- Annual Report (PDF, 2.4 MB)— indicates file type and size
- WCAG Guidelines (opens in new tab)— warns about new window
- Registration form (Excel)— indicates file format
Common Patterns
Card-Style Components
When linking an entire card, the heading should be the link:
<article class="card">
<h3><a href="event.html">Accessibility Workshop</a></h3>
<p>Learn the basics of digital accessibility.</p>
</article>"Read More" That Works
If you must use "Read more," make it descriptive for screen readers:
<a href="article.html">
Read more<span class="visually-hidden"> about color contrast guidelines</span>
</a>The hidden text is announced by screen readers but not visible on screen.
Icon-Only Links
Links with only icons need accessible names:
<!-- Social media icon link -->
<a href="https://twitter.com/uarizona" aria-label="Follow us on Twitter">
<svg aria-hidden="true">...</svg>
</a>Links vs. Buttons
Use the right element for the action:
| Use Link (<a>) | Use Button (<button>) |
|---|---|
| Navigation to another page | Performs an action on current page |
| Has a URL destination | Submits a form, toggles UI, opens modal |
| Can be opened in new tab | Doesn't make sense to open in new tab |
Wrong element
<a href="#" onclick="submitForm()">Submit</a>
<button onclick="goToPage()">Learn more</button>Right element
<button type="submit">Submit</button>
<a href="learn-more.html">Learn more</a>Testing Your Links
- List test:Read all link text out of context. Does each link clearly indicate its destination?
- Screen reader:Use NVDA or VoiceOver's links list (NVDA: Insert+F7)
- WAVE:Shows link text warnings for "click here," "more," etc.
- Uniqueness:Search your page for duplicate link text going to different destinations