Skip to main content
All CollectionsAccessibility HelpBasics
Readable (Discernable) Link Text: Correcting
Readable (Discernable) Link Text: Correcting

Suggestions for correcting No readable (discernible) link text flags.

Updated over a week ago

Correcting Simple Text Links

When creating basic link text, take a moment to ensure it gives users a clear idea of where the link will take them. Most screen readers allow users to access a list of just the links on a page with no accompanying text for context. As you create your link text, keep in mind how the links on your page would look or sound if read in a list.

Flagged Content:

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 or hear the words 'Click here' when reviewing a list of links for a page. This would give them no idea of the link destination.

Corrected Content:

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 in the link destination.


Correcting Repetitive Link Text

When your site has a page that provides an overview of other pages, such as a news or blog home page, you need to ensure that any repetitive links have the appropriate associated text for links to the full article.

An example, on our DubBlog home page, each entry has a Read More button. Without special treatment, this text would not provide the user with appropriate readable text for these links.

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

Manual Solution

If you manually produce the HTML for such an overview page, you can 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 a CMS generates your overview page, you could automate the creation of an aria-labelledby attribute. Following is the code used on the page shown above:

<a aria-labelledby="link_0c68 of blog_0c6889b20" class="button is-rounded" href="2024/access-vs-aesth.html" id="link_0c688">Read More</a>

The aria-labelledby attribute added above pulls in the article title from this part of the page's HTML:

<h2 class="title" id="blog_0c6889b20">Accessibility vs. Aesthetics: Finding the Balance in Your Design</h2>

This type of automated solution will most likely need to be handled by someone who manages the back-end of your CMS.


Correcting Readable Text for Image Links

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

DubBot home page pointing out our top, left logo which is also a link

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>


Correcting Links with no Text

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

Correct :
<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, adding the 'aria-label' attribute ensures that readable text will be announced to screen reader users.


Learn More with WCAG

Looking for the basics? Refer to our article, Readable Link Text: The Basics.

DubBot Flag: Link does not have readable (discernible) link text

If you have questions, please contact our DubBot Support team via email at help@dubbot.com or via the blue chat bubble in the lower right corner of your screen. We are here to help!

Did this answer your question?