Making Links Accessible with Discernible Names

Introduction

Links with discernible names are essential for creating accessible navigation experiences. Discernible names provide context for links, allowing screen readers to announce the purpose of each link clearly.

This helps users with visual impairments, cognitive disabilities, or those using screen readers to navigate confidently through your content. In this article, we’ll discuss what discernible link names are, why they’re important, common issues to avoid, and best practices for creating accessible links.

What is a Discernible Link Name?

A discernible link name is a text label that describes the purpose of a link, making it understandable for all users, especially those using assistive technologies like screen readers. A link’s text should be unique and clearly indicate its function or destination, helping users determine where the link will take them. When images are used as links, providing alternative text (alt text) makes the link’s purpose discernible to screen readers.

<a href="about.html">Learn more about us</a>

In this example, the link text “Learn more about us” provides context for the link, allowing screen readers to announce its purpose.

Why are Discernible Link Names Important?

  1. Improves Accessibility:

    Screen readers announce links based on their text. Discernible names ensure that visually impaired users understand the link’s purpose, providing a more inclusive experience.

  2. Enhances Navigation:

    Clear, unique link names help all users, including those without visual impairments, find relevant information quickly and efficiently.

  3. Reduces Confusion:

    Links with non-descriptive names, like “click here” or “read more,” can confuse users by failing to provide meaningful context. Discernible link names reduce ambiguity, improving usability.

  4. Supports SEO:

    Search engines consider link text when indexing content, and descriptive link names can improve SEO by providing more context about linked pages.

  5. Meets WCAG Standards:

    The Web Content Accessibility Guidelines (WCAG) recommend using discernible link names to improve accessibility, helping websites comply with accessibility regulations.

Common Issues with Link Names

  1. Using Generic Text (e.g., “Click Here”):

    Links like “click here” or “read more” don’t provide information about where the link leads, making it hard for screen reader users to navigate effectively.

  2. Unlabeled Image Links:

    When images are used as links without alt text, screen readers can’t identify their purpose. This creates barriers for visually impaired users who rely on descriptive alt text.

  3. Repetitive Link Text:

    Repeating the same link text for different destinations (e.g., multiple “read more” links) can confuse users. Each link should have unique, specific text to differentiate its purpose.

  4. Empty or Missing Link Text:

    Links with empty or missing text can lead to “empty” announcements by screen readers, confusing users and hindering navigation.

  5. Overly Long Link Names:

    Excessively long link names can be cumbersome, especially for screen reader users. Aim for concise, descriptive text that communicates the link’s purpose clearly.

How to Create Discernible Link Names

  1. Use Descriptive Text for Links:

    Make each link text descriptive and specific to its destination. Avoid vague phrases and focus on what the link provides.

    <a href="services.html">Explore our services</a>
  2. Provide Alt Text for Linked Images:

    When using images as links, ensure that they have alt text describing their purpose. This way, screen readers can convey the link’s purpose to visually impaired users.

    <a href="home.html">
    <img src="logo.png" alt="Go to homepage">
    </a>
  3. Avoid Repetitive Text for Multiple Links:

    Use unique link text when linking to different pages, even if the links serve similar purposes. For example, instead of multiple “read more” links, specify what each link leads to.

    <a href="product1.html">Read more about Product 1</a>
    <a href="product2.html">Read more about Product 2</a>
  4. Use Contextual Phrases Instead of Generic Text:

    Avoid generic text like “click here.” Instead, use contextual phrases that describe the action or content. This helps users understand what to expect before clicking.

  5. Keep Link Text Concise but Informative:

    Ensure the link text is neither too long nor too short. Aim for a balance where the purpose of the link is clear without overloading users with unnecessary information.

  6. Provide Additional Context with Screen Reader-Only Text (if needed):

    In some cases, additional text may be necessary for clarity but could disrupt the visual design. Use visually hidden text to add context for screen readers without affecting the page layout.

    <a href="contact.html">
    Contact us
    <span class="sr-only"> for customer support</span>
    </a>
  7. Test Link Names with Screen Readers:

    Use screen readers to verify that link names are meaningful and easy to understand. This helps ensure a smooth experience for users relying on assistive technologies.

Discernible Link Names and Related Metrics

  1. Accessibility Compliance:

    Discernible link names meet WCAG standards for accessible content, making it easier for visually impaired users to navigate.

  2. User Engagement:

    Clear link names increase user engagement by making it easier to find relevant content and encouraging users to explore the website further.

  3. SEO Ranking:

    Search engines use link text to understand page content, and descriptive link names contribute to better indexing and improved rankings.

  4. Reduced Error Rates:

    Meaningful link names reduce navigation errors, as users are more likely to understand each link’s purpose before clicking.

  5. Time on Page:

    Clear, accessible navigation encourages users to stay longer on the page, improving the overall user experience and reducing bounce rates.

Conclusion

Using discernible link names is essential for creating accessible and user-friendly websites. By crafting unique, descriptive link names and avoiding generic phrases, you improve the navigation experience for all users, particularly those relying on screen readers. Well-labeled links not only support accessibility but also boost SEO and enhance user engagement. Making links accessible is a small but impactful step toward a more inclusive digital experience.