Web pages use links to send visitors to new or additional content. Links can be text and images. Links are powerful navigation tools and must be properly structured for the best experience.

The Web Content Accessibility Guidelines (WCAG) are defined specific requirements to make sure content is accessible to everyone. According to the WCAG 2.2 AA guidelines, links must state the purpose of the link so visitors can decide if they want to follow it. Links need discernible text that tells visitors where the link takes them.

What does discernible text mean?

Links generally have two pieces of information:

  • URL: Web address where the link sends visitors when they select it
  • Display text: Visible text that tells visitors what to expect to find if they select the link

Consider this link to best practices: Best practices for links. In the HTML source code, the best practices link looks like this:<a href="#best-practices">Best practices for links</a>

When the display text, or the text between the <a> tags is missing, the link is missing discernible text. Discernible text is that display text that tells your visitors the purpose of the link.

It's a minor issue when links don’t have discernible text. Fix minor issues for a better experience. Links missing or with vague text can make navigation confusing and be a source of frustration for people with disabilities.

How people with disabilities use links link to bottom of page

Ally helps you identify when links are missing text and explains how to fix them. Ally goes through these checks:

  • Is there text between the hyperlink <a> tags?
  • Is the text between the <a> tags hidden?
  • Do images used as links have alternative descriptions?

If the link doesn't pass any of the checks, Ally marks the link as an issue.

Use Ally to find links with missing text

Use Ally's Accessibility report to discover and fix accessibility issues on your site. Use the link provided for the report and sign in. Open the report and look at the list of issues in the Accessibility Issues table.

The Accessibility Issues table is in both the Overview and Domain tabs. Start in the Domain tab to see issues specific to a domain.

Links that are missing discernible text get flagged as a minor issue. Use the Minor tab in the Accessibility Issues table to view the list of minor issues. Select the issues with links without discernible text.

If you start in the Overview tab, select the issue and then the domain with the issue.

From the list of issues in the domain, select the score indicator next to an item with the issue. The content editor feedback panel opens.

Preview the links missing text

Ally’s feedback panel shows you a preview of the content as well as detailed feedback and support to help you fix your accessibility issues. Use the preview to see the links missing text.

The preview highlights where specific accessibility issues are in the document. Highlights show every occurrence of one issue type at a time. For example, for the issue of links missing text, the preview highlights every instance this specific issue occurs.

Preview tools

Use the preview tools to explore the issues in your document.

  • Move through the preview page by page.
  • See how many times a specific issue appears.
  • Jump between the issue highlights.
  • Hide or show the highlights.
  • Zoom the preview content in or out.
  • If the issue is in an attached document, download the original file.

Follow Ally’s guided steps to add link text

Ally assumes you have basic knowledge of HTML and how to use your Content Management System (CMS). To follow the guided steps, you need to know how to edit a web page in the HTML or source code in your CMS.

Along with the preview, Ally gives you step-by-step guidance on how to fix the issue. Ally organizes this feedback in a decision tree. Read the directions and respond to the prompts. Learn what the issue is, why it matters, and how to correct it appropriately.

Select How to fix link text to follow the guided steps.

Ways to add text to links

There is more than one way to fix link text on your web pages.

  • HTML: Ally's guided steps walk you through how to find and fix link text in HTML. Basically, find the web page with the link. Edit the page. In the HTML code, add text between the <a> tags. Save the page.
  • RTE: Some CMSs have a Rich Text Editor (RTE) that may provide user-friendly ways for you to fix links. Find the link on the web page. Select the link and use the CMS tools to add text. Save the page.

Visit w3schools to learn more about HTML and CSS

Best practices for links

  • Link text should be meaningful. Tell your visitors where they are going. Describe what the user can expect to see when they select the link.
    • Avoid text like “click here” and “see more”. These phrases don't tell visitors what to expect when they select the link. Some assistive technologies have a tool that list just the links on the page. Phrases like these will have no meaning when taken out of the page context and displayed in a list.
    • Avoid URLs as the visible link text. A URL may not be descriptive. Screen readers also read each letter of a URL individually, which can be frustrating for those visitors.
  • Link text should be unique. Each link should be unique to the other links on the page. Repeating link text can be confusing when taken out of the page context and displayed in links list tool.
  • Links should visually stand out. It should be clear that it is a link. If you don't like the style of the link, you might want to update the template.

    • Distinguish links from surrounding text in a way that does not rely on color alone. WCAG 2.1 - 1.4.1

      Link appearance is often defined in a site's style guide and can reflect branding. Before you make any changes, check with your site style guide and site administrator.

  • Tell users if the link opens in a new window. Opening links in a new window can be disorienting. Tell your users when you are sending them to a new window or tab.
  • Don’t use an image to represent something you can create in the HTML. For example, don’t use an image of a button instead of an actual button. Don’t use an image of a table instead of a table created in the source HTML code.

How people with disabilities use links

Proper links that contain a link and meaningful link text allow for a much better experience for everyone. Well-formed links are powerful navigation tools, and make it clear what to expect. However, proper links are essential for visitors with visual impairments.

Links that have unique and meaningful text can mean quick navigation for a lot of users.

  • Screen reader users don’t need to listen to the entire page. They can choose to listen to and interact with a list of links instead.
  • Speech recognition users interact with links by saying the link they want to select out loud.

Links that are properly formed can be easier for a lot of users to see and interact with.

  • Keyboard-only users, who may not be able to use a mouse, can use their keyboard to navigate to elements on the page like links.
  • Users with color blindness may not see color variation but can see an underlined link.