Accessible and SEO friendly link text

Write good link text optimized for accessibility and SEO

Using accessible link text is vital for ensuring your website remains accessible and compliant with web accessibility standards. It enables users to comprehend the purpose of links, allowing them to make informed decisions about which links to follow.

Furthermore, incorporating accessible link text also enhances your site’s search engine optimization (SEO), as it provides search engines with context about the link, making it easier for them to understand the content and relevance of the linked page.

What is a link?

A link, also known as a hyperlink, is a connection between two web pages or a web page and another resource, such as a document, image, or email address. It is an interactive element on a web page that, when activated, takes the user to the linked resource.

To activate a link, a user can use various methods, depending on their device, such as using a mouse, tapping on a touchscreen, or using keyboard navigation and pressing the enter key, to access the linked content. Using device-independent language when describing links is important, which is why it’s recommended to avoid using the term click as it implies a specific action that may not be applicable to all devices or users, such as those using assistive technologies (touch screens, voice commands, or other forms of interaction) or mobile devices. By using more general terms, such as activate, writers can ensure that their content is inclusive and accessible to a wider range of users.

For example, instead of saying click on the link, you could say activate the link or follow the link. This language is more inclusive and can be applied to a wider range of devices and interaction methods.

Links are not just underlined text but also used in navigation, breadcrumbs, and skip links.

Navigation

The primary navigation menu, typically located at the top of a website, is a collection of links that facilitate user movement throughout the site. Although these links may be visually distinct from standard hyperlinks, they function identically.

Individuals with disabilities or impairments often rely heavily on accessible navigation, which must be straightforward to locate, comprehend, and utilize.

Breadcrumbs

Breadcrumbs are a series of links that show the user’s current location within a website’s hierarchy. They typically consist of a trail of links that lead from the top-level page to the current page.

In large websites with complex structures, breadcrumbs provide essential guidance for visitors, including those with accessibility requirements, to determine their current position within the site’s organizational hierarchy.

Skip links

Skip links are a feature that allows users to bypass repetitive content, such as navigation menus, and jump directly to the main content of a page. They are often implemented as a link with the text Skip to main content or Skip to navigation.

Why hyperlink text is essential for accessibility

Hyperlinking text is crucial for accessibility because it helps users understand the context of a link and where it will take them.

Imagine you’re browsing a website and come across a link that simply says click here. Would you know where that link leads? Probably not!

But if the link text says something like Learn more about [topic], it’s much clearer what you’ll find on the other side. This is especially important for people with disabilities, such as visual impairments or cognitive differences, who rely on clear and descriptive text to navigate the web.

By using descriptive link text, you make your website more accessible and inclusive for everyone. It is also a part of Web Content Accessibility Guidelines (WCAG).

Individuals who rely on assistive technologies to navigate web pages often rely on links to move around a page. This includes:

• People who are blind or have low vision
• Those with visual impairments
• Users with motor disabilities or impairments
• Individuals with dyslexia or other reading difficulties

Why hyperlink text is essential for SEO

Hyperlink text is essential for SEO because it provides context and relevance to search engines, helping them understand the link’s purpose and destination.

Hyperlink text acts as anchor text, which is the text surrounding a link that users can interact with. Search engines utilize this anchor text to determine the link’s relevance and context. By incorporating target keywords into hyperlink text, you can enhance a page’s ranking for specific keywords, as it provides search engines with a clearer understanding of the link’s purpose and content.

How is a text link actually constructed?

The link text can come from various sources, not just the text between the <a> and </a> tags. There are other sources of the link text:

• alt attribute of an img tag: if an image is used as a link, the alt attribute can provide a text description of the link.
• title attribute: browsers and screen readers may use the title attribute as the link text if it is provided.
• aria-label attribute: this attribute can be used to provide a text description of the link for accessibility purposes.
• aria-labelledby attribute: attribute that allows you to reference one or more elements that contain the text that should be used as the accessible name for the link.
• Other elements: in some cases, the link text may be generated from other child elements, such as a span element, using CSS (the content CSS property) or JavaScript (innerText, textContent or property data from the text node).

For example:

<a href="https://www.example.com">
  <img src="image.jpg" alt="Example website">
</a>

In this case, the link text would be Example website, which comes from the alt attribute of the img tag.

Tips for creating better link text

To create effective and inclusive hyperlinks, consider the following guidelines for crafting well-structured, accessible, and SEO-friendly link text that enhances the user experience and search engine optimization.

Make text links descriptive and meaningful

When creating links, keep in mind that users tend to scan content rather than reading it thoroughly. As a result, link text should be descriptive enough to stand alone, providing a clear understanding of the link’s destination without relying on surrounding context.

To achieve this, consider using the following strategies:

• For informational links, use the destination page’s title as the link text, if it accurately describes the content.
• For action-oriented links, such as registration or downloads, start the link text with a verb (e.g., Register now or Download accessibility issues report) to encourage users to take the next step.
• Incorporate relevant keywords from the destination page into the link text to enhance search engine optimization (SEO) and provide additional context for users.

Don’t use generic phrases such as “click here” or “read more” as link text

Avoid using generic phrases such as click here or read more as link text, as they do not provide any meaningful information about the link’s destination. Instead, opt for descriptive and concise language that clearly indicates what users can expect to find when they navigate on the link.

See, how the screen reader users as well as search engines “see” such links:

Generic phrases do not provide any relevant keywords or context, making it harder for search engines to understand the link’s purpose and relevance. Using descriptive and keyword-rich link text can help improve the page’s visibility and ranking, whereas generic phrases can hinder this process.

If you still want to keep only text “read more”, consider adding visually hidden enhanced text to provide a better experience for screen reader users and search engines. This can be achieved by adding, for example, a span element with the enhanced text, and then hiding it visually using CSS.

For example:

<a href="#">Read more<span class="visually-hidden"> about our latest news and updates</span></a>

The CSS to hide the text visually would be:

.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  white-space: nowrap !important;
  width: 1px !important;
}

.visually-hidden:not(caption),
.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption) {
  position: absolute !important;
}

This way, screen reader users will hear the enhanced text, and search engines will be able to index the link with the additional context, while visual users will only see the original read more text.

Avoid using the same link text for different destinations

Using the same link text for different destinations can be confusing and frustrating for users. It’s a key principle of accessibility and good user experience.

Imagine a website with multiple the same links Learn more on the page. One Learn more link might take you to a product description, while another leads to a blog post. This inconsistency can leave users feeling lost and unsure where they’ll end up. Additionally, it can also lead to confusion for users who use browser extensions or other tools that provide previews or summaries of linked content.

Also, when multiple links with the same anchor text point to different pages, search engines may struggle to determine which page is the most relevant for that keyword. This can dilute the SEO value of the link and affect how well those pages rank.

Consistency in link text helps users understand what to expect when they navigate to a resource specified under the link. If they find that the same text leads to different content, it can create a negative experience, which may increase bounce rates – another factor that can negatively impact SEO.

Avoid using links that are only a single word

Avoiding links that are only a single word is a good practice because it can improve the clarity and usability of a website. Single-word links can be unclear or ambiguous, making it difficult for users to understand what the link is for or where it will take them.

Using single-word links can also cause problems for screen reader users, as the link text may not provide enough context for them to understand the purpose of the link. Additionally, single-word links may not be descriptive enough for search engines to understand the content and purpose of the linked page, which can affect the page’s search engine ranking.

Pagination is a great example of where using single-word links can be problematic. For instance, using Next or Previous as link text can be unclear, as it doesn’t provide enough context about what the user will see when they navigate to.

A better approach would be to use more descriptive link text, such as Next page or Go to previous page. This provides a clearer indication of what the link will do, and can be especially helpful for screen reader users or users who rely on keyboard navigation.

Another example could be Page 1 instead of just 1. The word “Page” provides context and helps users understand that the link will take them to a specific page, rather than just being a numeric value.

Don’t use URLs as link text

Instead of using a URL as the text for a link, use descriptive text to indicate what the link is for. The URL may contain special characters and is not screen reader friendly. Users who rely on screen readers may find long URLs difficult to understand. A URL can be cumbersome and confusing, making navigation challenging for those with visual impairments. Use human-readable words rather than a URL.

URLs often do not provide meaningful information about the content they link to. For example, a link like <a href="www.example.com/page1">www.example.com/page1</a> doesn’t tell users what to expect when they navigate to.

Keep in mind that using descriptive link text instead of URLs allows you to incorporate relevant keywords. This helps search engines understand the context of the link and improves the linked page’s visibility.

Use bookmarklet to determine all links

Use bookmarklet Determine all links on the page to see all links on the current page.

To use a bookmarklet, simply drag and drop it to your bookmarks bar. Then, when you want to use it, just click or tap on the bookmarklet. It’s that simple!

Final words

By following these best practices, you can create link text that enhances user experience, improves accessibility, and boosts your SEO efforts. Always test your links description with a screen reader. Testing link descriptions with a screen reader helps to ensure that they are read in a natural way, similar to how a real user would hear them.

Additionally, search engines also interpret link text, so testing with a screen reader can help ensure that the link text is also optimized for search engine understanding, which can improve accessibility and search engine optimization (SEO).

Search engines are not visual scanners, but rather text-based scanners that crawl and index web pages based on their algorithms. They don’t see web pages in the same way that humans do, but rather interpret the underlying code and text structure. This is why it’s important to ensure that link text is descriptive, concise, and well-structured, so that search engines can accurately understand and index it.