Accessibility Tip: Use descriptive link anchor texts

Last updated on January 01, 2022A11y issues

Anchor text and the text on buttons should be descriptive. This is so people know what they are clicking on.

Table of contents

Screen readers should also be able to read out the interactive elements and it be clear to the user what the button is for. If it just says “click here” or “read more”, they need the context (probably the previous paragraph) to understand what they would be clicking, but most users of screen readers would tab through between things such as links to navigate the page.

Avoid ‘read more’, ‘click here’ etc. Replace with more descriptive texts such as ‘See our about us story’, ‘Buy this tshirt’ etc. This also has SEO benefits.

If you really want a button that says “read more” then add text just for screen readers. For example:

<!-- 
    this assumes .sr-only is a class only for 
    screen readers, but hidden to normal users 
    -->
<a href="/about-us">
    Read more 
    <span class="sr-only">about our story</span>
</a>

Inaccessible example (not descriptive text)

<a href="/contact">Click here</a>
<a href="/contact">Contact us</a>
<a href="/contact">Read our contact details</a>

WCAG guidelines

https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html

Success Criterion 2.4.4 Link Purpose (In Context) (Level A): The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.

https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-link-only.html

Success Criterion 2.4.9 Link Purpose (Link Only) (Level AAA): A mechanism is available to allow the purpose of each link to be identified from link text alone, except where the purpose of the link would be ambiguous to users in general.

Found this post useful?

Please consider sharing this link with your work colleagues or on social media. There are no ads on my site, I just want to promote accessibility.

Found an issue? please point them out - let me know if there is a mistake and I'll update it

Follow me on Twitter: @A11yForDevs. I post links to interesting a11y articles and resources.

More posts

Welcome to Accessibility for Developers

New to accessibility?

Accessibility for Developers

This is a free site to give advice on how to make your website accessible

I have been a software developer for nearly a couple of decades, and really want to help promote better accessibility in apps and websites that we, as developers, create! Accessibility isn't very difficult, it is just important to be aware about it and understand it.

If you spot any mistakes or have any suggestions, ideas or collaborations please check out my contact page.

Important: The information on this website is for general informational purposes only. I make no representation or warranty, express or implied. Your use of the site is solely at your own risk. I've tried my best to make sure all information is accurate, but I am just a software engineer (not an accessibility expert).