All Collections
Accessibility Help
Basics
Making your links "readable" for screen readers
Making your links "readable" for screen readers

Links must have discernible text / Links need to be "readable" for screen readers

Updated over a week ago

Having readable text associated with your link(s) is critical for users who use screen readers in order to help them to easily navigate your site. These users are typically not using a mouse and utilize a keyboard to navigate.

Screen readers often allow users to jump through available links on web pages. This means that links are often read outside of the context of the web page's content.

Link text best practices include:

  • Link text should be able to stand on its own and allow a web visitor to know where it will go by solely reading the link's text and nothing else around it.

  • Link text should not include the URL of the link. Screen readers will read each letter of the URL if it is in the link text.

  • It is best not to use the same text for more than one link, as that poses an accessibility issue with making the website experience consistent for browsing. If you do, you must provide additional information.

Here are some common link types with examples of how to correctly author:

Create discernible text for simple text links

When creating basic link text, take a moment to ensure that the link text gives users a clear idea of just where the link is going to take them.

BAD

Click here to read about the WCAG Overview.

<a href="https://www.w3.org/WAI/standards-guidelines/wcag/">Click here</a> to read about the WCAG Overview.

When using a screen reader, a visitor would only see the words 'Click here' when reviewing a list of links for a page. This would give them no idea of the link destination.

GOOD

Read more details in the WCAG Overview article.

Read more details in the<a href="https://www.w3.org/WAI/standards-guidelines/wcag/" >WCAG Overview article</a>

By providing the user the text 'WCAG Overview article' for the link text, there is no doubt where this link will take them.

Add discernible text to repetitive links

When your site has a page that is an overview of other pages, as in a news or blog home page, you need to pay special attention to ensuring the links have the appropriate associated text for links to the full article.

An example our DubBlog home page:

DubBlog home page showing three article entries, pointing out three links with the buttons reading 'Read More'

Notice the three 'Read More' buttons. Without special treatment, this text would not provide the user with discernible text for these links.

Manual Solution

If you are manually producing the content for such an overview page, add an aria-label attribute with the appropriate descriptive text to your link. The content inside the aria-label tag will be read to the screen reader user instead of just 'Read More.'

<a aria-label="Read More of Holiday Office Hours">Read More</a>

Automated Solution

If your overview page is generated by a CMS, you can automate the creation of an 'aria-labelledby' attribute. Following is the example from our blog home page:

<a aria-labelledby="link_63f7bf9e0a1504b44fda4cca2b8a5082 of blog_63f7bf9e0a1504b44fda4cca2b8a5082" class="button is-rounded" href="2023/holiday-office-hours.html" id="link_63f7bf9e0a1504b44fda4cca2b8a5082">Read More</a>

This code will output 'Read More of Holiday Office Hours' as the discernible link text that would be read by a screen reader.

Add discernible text to image links

When images are used as links, the alt tag for the image is read as the discernible text for the link. In such cases, be sure you refer to the destination of the link in the alt text.

DubBot home page pointing out our top, left logo

From the DubBot logo in the top, left of our DubBot Home page.

<a class="navbar-item mr-5" href="../index.html">

<img alt="DubBot homepage" src="../_image/dubbot-primary-logo.jpg">

</a>

Add discernible text to links with no text

The most common offender we see in this area is social media icons.

Correct Example:
<a href="https://twitter.com/dubbotqa" aria-label="Twitter" class="icon icon-twitter"></a>

Even though there is no content between the <a> and </a> tags, by adding the 'aria-label' attribute, it ensures that discernible text will be announced to our screen reader users.

Did this answer your question?