Accessible Links: Best Practices for Hyperlink Accessibility

Links provide a roadmap for users, guiding them from one digital destination to the next. In a seamless user journey, the hyperlink text functions as a digital signpost by clearly indicating what lies ahead, helping users navigate text with confidence.

In contrast, poorly written link text derails a digital experience, leaving users puzzled and unsure where to turn next. It’s also inaccessible to people who use assistive technologies, making it difficult, if not impossible, for many individuals to find the information they’re seeking.

In this post, we’ll explore the benefits of creating accessible hyperlink text for both website owners and users and provide practical tips for writing it effectively.

What is link text?

Link text, also known as a hyperlink or anchor link, is a clickable element on a web page that redirects users to another page, resource, or section of the same page. Ideally, the text references relevant information about the topic being discussed on the page it leads to.

Why is accessible hyperlink text important?

Using clear and relevant link text is crucial to maintaining the accessibility of your website and meeting web accessibility standards.

Specifically, meaningful link text aligns with the Web Content Accessibility Guidelines (WCAG) Success Criterion 2.4.4: Link Purpose. This criterion is aimed at helping users understand the objectives of links, so they can make informed decisions about what to click on.

Additionally, adopting accessible link text can contribute to improved search engine optimization (SEO) for your site, because it communicates the context of a link to search engines. Search engines can use relevant anchor text to index and rank your web page, increasing potential site traffic.

Who benefits from accessible links?

An accessible link is a line of link text that makes sense without any additional context. Links that convey their purpose or function are easier for users to understand and navigate. They can be especially important for people with cognitive disabilities who may need additional context to help them understand what action to take.

Anchor tag accessibility plays a critical role in ensuring links are usable by everyone. When the anchor tag (<a>) contains clear and descriptive text, it improves the experience for users who rely on keyboard-only navigation or assistive technologies like screen readers.

For example, some people with mobility disabilities have trouble gripping a mouse or using a touchpad and accessing digital content with the keyboard alone. Additionally, as keyboard-only users typically rely on the “tab” key, rather than a mouse, to move through web content, descriptive anchor text is necessary for these users to quickly identify and select relevant links.

Meanwhile, many people with visual disabilities navigate the web using screen readers, which convert on-screen text into speech. Properly written link text enables screen reader users to understand a link’s destination before they click on it, saving valuable time and preventing confusion.

Of course, accessible links aren’t just helpful for people with disabilities; well-written link text ultimately enhances the user experience for everyone. In turn, it benefits website owners by boosting common web performance metrics like time-on-site and conversion rate.

Best practices for writing accessible hyperlink text

To be accessible, hyperlink text should explain the information that a user will receive by clicking on a given link. Imagine that there’s no surrounding text and ask yourself if the meaning of the link text is still clear. Here are some more quick tips for writing effective and accessible link text:

1. Clearly communicate the purpose of a link as well as its destination. Do not use vague link phrases such as “click here,” “here,” “more,” “read more,” or “info.” This overly general language has no stand-alone value and provides no concrete information about where users who click through a link will end up.

2. Don’t use words like “link to.” Screen readers often say “link” before reading links, and users of this technology don’t need to hear “link to more information.” This redundancy may cause unnecessary confusion or frustration.

3. Don’t include verbs in link text. For example, write, “Learn more about the Level Access Platform,” instead of hyperlinking the entire phrase, “Learn more about the Level Access Platform.” After all, the focus here isn’t on the action of reading—it’s on information about the Level Access Platform.

4. Never use a URL as link text. A URL, consisting of its protocol, domain, and path, conveys little meaning to users. For example, instead of using “visit our website at https://www.levelaccess.com/,” as link text, use “visit our website” as the link text.

5. Differentiate links from other text with a combination of color and underline. Color should not be the only method used to distinguish links. Rather, underline links for users who can’t perceive a full range of color. Additionally, underlines should be reserved for links only. Using an underline for emphasis on a word that isn’t a link may confuse a user who’s reading web content.

What role do ARIA labels play in inaccessible links?

When it comes to link functionality, the code behind the link text is just as important as the text used to describe the link. This is where ARIA labels come in.

An ARIA (Accessible Rich Internet Application) label is an HTML attribute used to provide an accessible name or label for a web element that lacks inherent labeling, or that needs a more descriptive label than its content provides.

ARIA labels are primarily applied to web elements—such as links, buttons, and other interactive controls—to help assistive technologies understand the purpose of these elements. So, just as some users may glance at the content around a link to understand its destination, users of assistive technologies like screen readers can glean this additional context through ARIA labels.

However, simply providing an ARIA label isn’t enough to make a link accessible. While ARIA attributes are intended to enhance accessibility, their incorrect implementation can lead to confusion and frustration for people who use assistive technologies. If an ARIA label is applied to a link improperly, assistive technology users may have to traverse up and down a page to understand the link’s destination.

Here are some ways to ensure your ARIA labels are accessible:

• Use an ARIA label as an attribute within the HTML tag. Don’t overuse ARIA labels, and prioritize semantic HTML elements whenever possible. For example, <a aria-label=”…”>.

• Keep the ARIA label content clear and concise. Avoid using long ARIA label text that could distract from the purpose of a link.

• Maintain meaningful link text. Strive to maintain meaningful link text while supplementing it with an ARIA label when necessary. For instance, <a href=”..” aria-label=”Learn More”>Learn More</a> should be<a href=”..” aria-label=”Learn More about Dolphins”>Learn More</a>. It’s better to provide additional context than to replicate the visible link text.

Learn link text accessibility with Level Access

Accessible links are essential for all users to interact with content successfully. By adhering to link text best practices, web developers and content creators can contribute to more inclusive and user-friendly digital experiences.

If you’d like to learn more about accessible link creation, our Level Access Academy learning platform can help teams build role-specific knowledge with training on:

• Buttons and Links for User Experience Designers: This course covers the importance of accessible buttons and links in digital experiences. You’ll learn how to design in accordance with WCAG, how to allow users to interrupt accidental button activations, and how to incorporate skip links for improved navigation.

• Buttons and Links for User Interface Designers: This course explains the role that color plays in accessible web design, and how to meet requirements related to contrast, use of color, in-text hyperlinks, and flashing content.

• Formatting and Other Considerations for Content Designers: This course highlights formatting best practices for content designers based on WCAG standards for web-based content.

Get expert support with web accessibility

Level Access provides advanced automated tools that help organizations quickly identify and fix inaccessible links—along with missing alt text and other common accessibility barriers.

For a full, end-to-end approach, the Level Access solution combines technology, services, and legal expertise to ensure all your digital content is accessible and compliant.

Engage with our team today and let us support you on your digital accessibility journey.

FAQ

Why is descriptive link text important?

Descriptive link text helps all users understand the purpose of a link, but it’s essential for those using assistive technologies. Screen readers can generate a list of links on a page, and if those links are vague like “Read more,” it becomes challenging to determine their destination.

What is anchor tag accessibility?

Anchor tag accessibility refers to making sure <a> tags (hyperlinks) are usable by all people, including those with disabilities. This means the link text must be clear, keyboard-navigable, screen reader-friendly, and visually distinguishable.

What does WCAG say about link text?

The Web Content Accessibility Guidelines (WCAG) provide comprehensive standards for writing link test. For example, WCAG 2.2 includes a success criterion called “Link Purpose (In Context),” which requires that the purpose of a link be clear—either from the link text itself or from its surrounding context that can be interpreted programmatically (like with a screen reader).