Understanding WCAG SC 2.4.4 Link Purpose (In Context)
Version and Level: 2.1/2.2 (Level A)

WCAG SC 2.4.4 Link Purpose (In Context) ensures that the purpose of each link can be determined from the link text alone or from the link text together with its surrounding context. An exception is if the purpose of the link can't be understood by any users, and not just by users with disabilities. However, if the purpose of the link can be inferred by other text in another area (previous paragraphs), and not by users with disabilities (such as screen reader users), then the success criterion would fail.

Benefits:

  1. Improved Accessibility for Screen Reader Users: Ensures that users relying on screen readers can understand the purpose of each link.
  2. Enhanced User Experience: Clear and descriptive links reduce confusion and make it easier for all users to find the information they need.
  3. SEO Benefits: Descriptive links improve search engine optimization by providing search engines with clear context about the linked content. Especially when the link’s text is the same text of the redirected page’s title.

Main Objective:

To ensure that the purpose of each link is clear and understandable, first try to make the link itself as self-explanatory as possible. For example, instead of 'Subscribe,' use something like 'Subscribe to our Newsletter for Weekly Updates.' Users who utilize screen readers can sometimes access a list of all links lying on the page. If the link only says 'Subscribe,' they will not understand its purpose, while sighted users might infer it from another section or paragraph of the page.

If the purpose of the link cannot be conveyed within the link text itself, try to include it in the text preceding the link, ensuring both the link and the text are nested within the same paragraph (<p>) or list item (<li>). While there is no rule against including the explanatory text after the link, it is strongly recommended to place it before the link to enhance the experience for screen reader users. If, for any reason, the text cannot be provided in these ways but is still understandable by other means on the page (e.g., a preceding heading), try to make it programmatically understandable by including an aria-labelledby or aria-label attribute.

Best Practices:

  • Ensure clear link descriptions: Ensure that the link clearly conveys its description and purpose, such as: "Subscribe to Our Newsletter for Weekly Updates" or "Contact Us to Schedule a Consultation", instead of "More Info" or "See Here".

  • Avoid ambiguous link texts: Avoid using ambiguous link texts such as 'Let’s go' or 'Get started.' If used, nest them within a paragraph or list, preferably at the end of the paragraph, to ensure clarity of purpose and context. If the paragraph itself doesn’t provide sufficient clarity, consider using the aria-labelledby attribute to associate the link with a heading or multiple text strings within the section, or provide it with an aria-label attribute.

  • Avoid duplicate screen-reader announcements:To avoid duplicate screen-reader announcements, if an image and a neighboring link share the same purpose or destination, don't use identical text and alt-text for both. Instead, nest the image and the link under one element, and set the image's alt attribute to an empty value (alt="").

  • Ensure image links are accessible: If the only content of the link is an image or icon, ensure to incorporate an alt attribute. If the link does not have preceding or following text, consider using hidden text within the link styled with CSS. This will ensure that screen readers can interpret the full name of the link.

Examples & Explanation:

Example: Using aria-label for Link Context

What Should Be Avoided

In a navigation menu, dropdown menus are hidden using CSS. No script is provided for keyboard users to open the dropdown menu. As a result, users navigating with a keyboard will miss the elements within the dropdown. Sighted users can open the dropdown menu by mouse click or hover, but this functionality is not accessible to keyboard users. HTML Example (Incorrect implementation):

HTML/CSS

              <section class="animal-entry">
                <h2>Amazing Animals</h2>
                <img src="images/seahorse.jpg" alt="Image of a seahorse">
                <p>The seahorse, a fascinating marine creature, is known for its unique body shape and ability to camouflage itself with its surroundings. These gentle fish are monogamous and the males carry the fertilized eggs until they hatch.</p>
                <p><a href="seahorse-details.html">More Info...</a></p>
              </section>

Explanation:The link does not have any preceding or following text and is not nested within a paragraph to explain the context of the link. Sighted users may infer it by reading the <h2> or the preceding paragraph in full. However, for screen-reader users, landing only on the link, it could come across as ambiguous.

What Should Be Done

HTML/CSS

              <section class="animal-entry">
                <h2 id="animal-heading">Amazing Animals</h2>
                <img src="images/seahorse.jpg" alt="Image of a seahorse">
                <p>The seahorse, a fascinating marine creature, is known for its unique body shape and ability to camouflage itself with its surroundings. These gentle fish are monogamous and the males carry the fertilized eggs until they hatch.</p>
                <p><a href="seahorse-details.html" aria-label="Learn more about seahorses">Learn more</a></p>
              </section>

Explanation:In this corrected implementation, the aria-label "Learn more about seahorses" provides clear and descriptive information about the linked destination. The use of aria-label provides context to the link beyond its purpose, which is to learn more, ensuring that screen-reader users can easily understand the context of the link.

Next Up

Expand your knowledge with SC 2.4.5 - Multiple Ways. Learn to provide multiple ways to access content for all users.

Go to SC 2.4.5