Accessible link text

Published on: 5 March 2025

Abstract image, in a simple format, depicting clarity and directness, without ambiguity

Meaningful link text

In WebAIM's annual accessibility report of 2024, they found that 13.2% of the top million home pages that they audit, had ambigious link text, such as "click here", "more" or "continue", etc.

This can be a bad thing as users can take links out of context. Imagine seeing something that just said "click here" and not knowing what it was for. It would be pretty much useless. This can be the experience for many users.

How generic link text can impact people

All of this makes sense for links within body text or a link on an article, card or section title, for instance.

The common challenge is where you may have a list of common items. For usability purposes, you may want to include an additional link or button on each item to give a clear path forwards.

In this case you need to consider what the trade offs are between the different approaches available or if there is one approach which is going to be bestest in the universe, for all users.

Example card methods

Option one - fairly generic link

Design of card with a title of 'Bag of apples', which is a link, a description and a link of 'view product details'
Example of product card with a fairly generic call to action of 'view product details'.

Option two - no generic link text

Design of card with a title of 'Bag of apples', which is a link
Example of product card where the title of the card acts as the link, which also has meaningful text.

Option three - no generic link text

Design of card with a title of 'Bag of apples', which is a link and another descriptive link of 'view bag of apples'
Example of product card where the title of the card acts as the link, which also has meaningful text. As well as an additional meaningful link, to act as the call to action.

Option four - disconnected generic link

Design of card with a title of 'Bag of apples', which is a link and another link which is generic and outside of the card area with text of 'more details'
Example of a link that is disconnected to a context and programmatically sitting oustide of a container, which has related content.

Option five - wrapping card in an anchor

Design of card where the whole card is wrapped in an anchor tag, and there are multiple pieces of text inside it.
Example of wrapping a whole card in an anchor tag, and there being multiple bits of text inside it.

Option six - making the wrapped anchor more meaningful

Design of card where the whole card is wrapped in an anchor tag, and there are multiple pieces of text inside it. An aria-labelledby attribute is used to reference the title.
Example of wrapping a whole card in an anchor tag, and there being multiple bits of text inside it. An aria-labelledby attribute is used on the anchor tag, which references the card title.

Option seven - as per option six but with less visual cues

Design of card where the whole card is wrapped in an anchor tag, and there are multiple pieces of text inside it. An aria-labelledby attribute is used to reference the title. Visual cues are more subtle.
Example of wrapping a whole card in an anchor tag, and there being multiple bits of text inside it. An aria-labelledby attribute is used on the anchor tag, which references the card title. There are less visual cues on this version.

WCAG and link text

WCAG 2.4.4 – Link Purpose (In Context) (Level A)

Although it is still best to try and avoid ambigious link text, this guideline suggests that if the surrounding context of the link, gives it meaning, then this is passable.

Consider a 'View article' link which is programmatically contained within an article tag, and that also within that card (or html tag), there is a meaningful heading and description. WCAG 2.4.4 says that this is all good, as users will be able to determine the purpose of the 'view article' link by the related text.

However, it's worth considering that this may not work for all the use cases outlined previously. This may still impact speech recognition users, screen reader users and depending on the design and content length, screen magnification users.

In this context, users may still find ways to work out the page, but they may have to work a bit harder.

If it isn't possible to interpret the meaning of the link, based on its context, it could still fail this guideline.

WCAG 2.4.9 – Link Purpose (Link Only) (Level AAA)

If you want to avoid the potentially negative interaction, implications, of having generic links, then this guideline is essentially saying that the links always need to be meaningful.

If you want to follow this guideline, you simply need to destroy all generic links.

WCAG shortcomings

As I understand, these guidelines only apply to links, and not buttons, for example. So you could pass WCAG, having generic 'click here' buttons, but users with assitive technologies could still encounter some of the usability issues, with this method, outlined previously.

Also, most people normally aim for AA standard. Meaning that there's still plenty of scope to have generic call to actions on things like cards.

Visible underlines or buttons

There isn't anything in WCAG to suggest that your text links must have underlines or that clickable cards, for instance, must have an underlined link or button. However, there are a number of usability considerations, to make.

Conclusion

In the article, I've outlined the pros and cons of each approach. It is worth noting that options one, two and three, potentially have the least number of negatives, associated with them.