Link Text That Says Click Here

A page heard as a list of links

A news page lists twelve articles. Each has a photograph, a short summary and a link underneath that says read more.

Somebody using a screen reader, the software that reads a page aloud, asks it for a list of the page's links. They hear read more twelve times, then click here, then learn more.

Nothing in that list says where any of the links go.

On screen, the page looks tidy. Heard as links, it is a corridor of identical doors.

How people actually use links

Many screen reader users do not listen to a page from top to bottom.

The common screen readers can list every link on a page with a single command, or jump from one link to the next. Each link is then heard on its own, without its paragraph.

People who control a computer by voice often activate a link by saying its words. With twelve links called read more, that instruction is ambiguous.

The usual offenders

• Click here, which assumes a mouse and names nothing.
• Read more and learn more, repeated under every item.
• Bare web addresses, read aloud as strings of letters and slashes.
• Here and this, linked in the middle of a sentence.
• The same words pointing at different pages.
• Icons with no words, such as a lone arrow.

The second fills whole pages. A blog index with read more under every item produces a list of identical links, and only the surrounding text, which the list leaves out, says which is which.

What the standard asks

WCAG 2.1, the current web accessibility standard, deals with this at its most basic level, Level A.

It asks that the purpose of each link be clear from its own text, or from that text together with its immediate context, such as the sentence or list item it sits in.

A stricter criterion, at the highest level, asks that the link text alone be enough. Few sites are held to it, but it is better practice, since a list of links never carries the context.

Writing link text that names the destination

Good link text says where the link goes or what it does: book a consultation, download the spring price list, read the story of the kitchen renovation.

Put the meaningful words first. Somebody scanning a list hears or sees the start of each link, so a link reading 2018 season reports beats one reading click here for our 2018 season reports.

Make the link part of the sentence rather than an instruction tacked on. Our spring price list is now available, with the words spring price list linked, reads naturally and needs no click here at all.

Keep it reasonably short. A whole linked sentence is as hard to scan as a vague one.

A worked example

An independent bookshop on a busy main street lists its author readings and book clubs on an events page, and sends people there from its newsletter.

Each event had a photograph, two lines of description and a link reading read more. The newsletter sign-up beneath said click here, and the printable calendar was a link reading download.

A regular customer who uses a screen reader mentioned at the till that the page was impossible to use. Every link sounded the same.

The fix changed nothing in the design. Each event's title became its link and the read more links were removed. The sign-up became join the monthly events newsletter, and the calendar link gained its file type and size.

Heard as a list of links, the page is now a list of events.

Files, new windows and phone numbers

A link to a document should say what kind it is and roughly how large, such as spring price list, PDF, 2 MB. Somebody on a phone deserves to know before they tap.

If a link opens a new window or tab, say so in the link or beside it. Screen reader users in particular can lose their place when a new window opens and the back button stops working.

Phone and email links should show the number or address itself. A link reading call us gives somebody nothing they can write down.

Linked images and icons

When an image is the link, its alt text, the description read aloud in its place, becomes the link text.

So it should describe where the link goes rather than what the picture shows: shop garden tools, not a photograph of a rake. A logo linking home needs the business name and the word home.

Icons used as links or buttons, such as a lone arrow or a download symbol, need a text label too, visible where possible and readable by screen readers at least.

Why it helps everyone

Descriptive links are easier for every visitor to scan, on any screen.

They make larger, clearer targets on a phone, where tapping the word here means aiming at four letters.

Search engines read link text as a description of the page it points to, so descriptive links describe your pages in your own words.

Fixing an existing site

Start by searching the site's content for click here, read more and learn more. In WordPress, the search box on the pages and posts screens finds most of them.

Read more links on a blog index usually come from the theme rather than the posts. Whoever maintains the site can change the template so each one includes the post's title, visibly or for screen readers only.

The rest is editing, one link at a time, each renamed after its destination.

The counter-case

Not every read more is a failure.

A read more link inside the same list item as a clear heading can meet the Level A requirement, because assistive software can read the two together. It is not ideal, but it does not fail the standard.

A small site with a dozen links has a short job, and a large one can fix the templates first and the content gradually.

The aim is not long links everywhere. It is that every link, heard on its own, names where it goes.

The check

1. Search your pages for click here.
2. Count the read more links on index pages.
3. Rename each link after its destination.
4. Add type and size to every download link.
5. Give linked images alt text naming the destination.
6. Ask your maintainer to fix theme templates.
7. Listen to one page with a screen reader.

Step seven makes the problem obvious in a way no description can. VoiceOver on an iPhone, or the free NVDA screen reader on Windows, will read your links back to you within minutes.

Images used as links raise the same question as words set inside pictures, covered in text inside images.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.