Three Tips for Links That Work for Everyone
Links are how people move through your material, and they are one of the easiest things to get wrong. These three habits make them work for everyone.
Keep these in mind:
- Make every link descriptive and unique
- Use the page name rather than the web address
- Keep the underline so links look like links
Make Link Text Descriptive and Unique
A screen reader user can call up a list of every link on the page, with none of the surrounding text.
In that list, “click here” and eight copies of “read more” tell them nothing, so the list stops being a shortcut and becomes a guessing game. Sighted readers skim by links too, picking out the words that look like destinations. Write link text that makes sense on its own and describes where it goes, and give different destinations different text.
Here is what that looks like in practice:
- “To read the assignment brief, click here” buries the destination in a vague phrase. Written as “Read the assignment brief,” the link makes sense on its own. That matters because screen reader users often tab through a list of links with no surrounding text.
- Three links that all read “read more” are useless in that link list, because they look identical. Rewrite them as “Read more about referencing,” “Read more about deadlines” and “Read more about the appeals process.” Now each link names its own destination.
- A page with “here,” “here” and “here” pointing to three different forms gives the reader nothing to choose between. Name them instead: “the enrolment form,” “the extension request form” and “the appeals form.” The link list then reads like a clear menu of options.
To go further on this, two references:
Use the Page Name, Not the Web Address
A web address (URL) read aloud is miserable, all slashes and dots and single letters, and it tells the listener nothing about where it leads.
It wraps badly on the page too, and looks like noise in the middle of a sentence. Link the name of the thing instead, and keep it short and consistent. The reader should know the destination before they decide to follow it.
A few examples:
- Pasting “https://www.citizensinformation.ie/en/education/” as the link text reads aloud as a stream of slashes and letters. Link the words “Citizens Information education section” instead. The reader then knows the destination without decoding a web address.
- A long sharing address for a shared document tells nobody what the document is. Link it on the document’s actual name, such as “Group project brief.” The name is shorter, clearer and far easier to read aloud.
- A timetable file linked as its full path is noise in the middle of a sentence. “Semester 2 timetable (PDF)” is short and clear, and it flags the file format. The reader knows what they are opening before they click.
Two resources worth a read:
Make Links Look Like Links
Colour on its own does not do the job.
If colour is the only marker, then colour-blind readers, people on poor screens, and anyone who prints the page cannot find the link at all. Around eight per cent of men have some form of colour blindness, and colour disappears completely in print. The underline has meant “link” since the early web, so people already know it. Keep the underline, and keep the contrast as well.
How it plays out:
- Removing the underline to make links look tidier leaves some readers unable to tell a link from ordinary text. Colour alone is not enough, because not everyone perceives it. Leaving the underline on keeps the link obvious to everyone.
- In a paragraph of running text, the underline and the colour change work together to mark the link. Take one away and you lean entirely on the other. For a colour-blind reader, the underline is often the only cue left.
- A link styled in the same blue as a nearby heading, with no underline, gives no way to tell which blue text is clickable. The reader is left hovering to find out. An underline removes the guesswork at a glance.
Two places to dig deeper:
