Navigating by Links — How Screen Readers Use Link Lists

In this tutorial, you will learn about Navigating by Links. We cover key concepts, practical examples, and best practices to help you master this topic.

Screen readers provide link list navigation allowing users to view all links on a page, requiring every link to have unique, descriptive accessible names.

In this tutorial, you'll learn how Screen Readers use link lists.

What You'll Learn

By the end of this lesson, you'll understand how screen readers list and navigate links, the importance of descriptive link text, and how to test link Accessibility.

Why It Matters

Screen reader users often navigate by links only, skipping all other content. If links say "click here" or "read more," they are useless in a link list.

Real-World Use

DodaTech's content style guide enforces descriptive link text because link list navigation is the second most common navigation method after headings.

Link List Navigation

flowchart TD
  A[User activates link list] --> B[NVDA: NVDA+F7]
  B --> C[JAWS: Insert+F7]
  C --> D[VoiceOver: Rotor > Links]
  D --> E[User reads list of links]
  E --> F{Link describes destination?}
  F -->|Yes| G[User activates link]
  F -->|No| H[User must guess or open]
  H --> I[Likely leaves the page]

Creating Accessible Links

<!-- Bad: non-descriptive link text -->
<a href="/products">Click here</a>
<a href="/security">Read more</a>

<!-- Good: descriptive link text -->
<a href="/products">View our antivirus products</a>
<a href="/security">Learn about security features</a>

Each link in the link list should make sense out of context:

NVDA+F7 link list shows:
1. Click here          ← Bad: where does this go?
2. Read more           ← Bad: read more about what?
3. View our antivirus  ← Good: clear destination
4. Doda Browser        ← Good: clear destination features

Link Title Attributes

Avoid relying on the title attribute for link descriptions:

<!-- Bad: title not always announced -->
<a href="/scan" title="Start a system scan">Scan</a>

<!-- Good: text is always announced -->
<a href="/scan">Start system scan</a>

Testing Link Navigation

// Check link text quality
document.querySelectorAll('a[href]').forEach(link => {
  const text = link.textContent.trim();
  const badTexts = ['click here', 'read more', 'learn more', 'here', 'this', 'go'];
  if (badTexts.includes(text.toLowerCase())) {
    console.warn('Non-descriptive link text:', link.href, text);
  }
  if (link.getAttribute('title') && !text) {
    console.warn('Link relies on title attribute:', link.href);
  }
});

Common Mistakes

• Using "click here" as link text: Useless in a link list. Use descriptive text.
• Reusing the same link text for different destinations: "Read more" repeated multiple times.
• Putting the link on an image without alt text: The link becomes announced as an image.
• Using links for buttons: Use <button> for actions, <a> for navigation.
• Empty links: Links with no text are announced by their href or skipped entirely.

Practice and Challenge

1. How do you open the NVDA link list? NVDA+F7.

2. What makes a good link text? It clearly describes the destination or action, understandable out of context.

3. Why is "click here" bad for accessibility? It provides no information about the link destination in the link list.

4. Should you use the title attribute for link descriptions? No. Screen readers may not announce title attributes.

5. Challenge: Audit your website's link text using the NVDA link list. Identify and rewrite any non-descriptive links.

FAQ

Mini Project

Extract all links from your website using NVDA+F7. Categorize them as good or bad. Rewrite all bad link texts and create a link text style guide.

What's Next

Continue to Navigating by Landmarks to learn about ARIA landmark navigation.