Make Clickable Links Visually Different

Pavel Saman
2 min readSep 7, 2022

--

This is a good practice in accessibility. Make things that are clickable look different.

I was searching on Macmillan for information about a possible API. Then I found this page:

Macmillan’s site with a link that does not look clickable
Macmillan’s site with a link that does not look clickable

“This link” is actually a link that takes me somewhere else. But it doesn’t look like it.

People with impaired vision might really struggle with such a link.

“This link” is also a terrible text for a link. Because screen readers would likely announce exactly that: “this link”. When you hear that, how would you know where “this link” will take you?

Yet another problem might be that the link is implemented like this:

<a href="http://macmillaneducation.force.com/help/bg_ContactUs?language=en_US" target="_blank"> this link</a>

That opens a new tab in a browser when clicked. That might be confusing for some assistive technologies, or for people with disabilities (or even without, it’s sometimes confusing to me as well).

However, let’s focus for a bit on the problem with “this text”. This is unfortunately so common on so many websites that it feels so useless to constantly repeat that as a piece of advice for improving accessibility.

I quickly ran a Lighthouse check on this page in hope it’d tell me about some of these problems. But it did not:

Lighthouse accessibility report
Lighthouse accessibility report

When I looked more into the report, it said the check for link names had passed:

Lighthouse link names check passed
Lighthouse link names check passed

The link to “Learn more” takes me to a site that says:

Similar to buttons, links primarily get their accessible name from their text content. Avoid filler words like “Here” or “Read more”; instead, put the most meaningful text into the link itself

So it apparently checked for meaningful texts inside links but did not report “this link” as a link with a lack of meaning. Interesting.

Apart from the two accessibility problems, I might also conclude that:

  • it’s better to combine tools because one tool might fail to detect something
  • use humans for testing tasks that might be better performed by humans; I argue that accessibility is such a field

I hope accessibility on websites will keep improving, it’s high time.

--

--