For the love of hyperlinks
The Hyperlink is a defining feature of the web, a tiny digital instruction that transports as if on a magic carpet to far off lands.
The far off lands are news stories, videos, applications, images, maps, and a multiplicity of other data each with its own, unique uniform resource locator - URL - colloquially known as a web address.
The hyperlink, or link, needs only our command to initiate a series of requests and responses which fly around the world before depositing us at our destination.
Hyperlinks are simple to use, and designers and developers must keep it that way.
It's good to connect
Linking to other sites respects the right of the user to explore the web freely.
Authors use links to connect to resources that support their claims and - because they are courteous - to point out pages that are relevant or interesting to their reader. Their altruism is rewarded by improved search engine rankings.
If you want to link to a site - perhaps it is the only source available - but prefer to keep your association at arm's link, it is possible to make your feelings clear to search engines.
If you don't want to upset your reader, make clear that a link leads to content that is sponsored, biased, or damaging.
Is blue the warmest colour?
The default colour for links the user hasn't clicked on is blue. Why blue? According to Tim Berners-Lee, there is no good reason, it is just a default.
The reason to distinguish between visited and unvisited links is to save us from linking to pages we have already visited. This is especially important if the link is to an external source.
Developers have a responsibility to seek guidance as to which colours are legible. WebAIM is an advocate on behalf of those with disabilities but their advice is pertinent to everyone. For this site, I have followed their recommendations on appropriate colours for links. Since the default colours for un/visited sites are blue and dark blue/purple I have selected hues of these two that work in both light and dark mode.
You can check my selections for contrast errors.
Underlining issues
By default hyperlink text is underlined. Does this affect our reading speed or comprehension?
The British Dyslexia Society's friendly style guide points out that underlining text can cause text to run together because the line cuts through the descenders of characters like g and y. The word poppy for example.
On the other hand, WebAIM warns us not to neglect readers with forms of colour blindness:
One way to satisfy both requirements is to remove the default line and create a new one further down, below the bottom of any descenders (as on this site).
If you are able to activate mouse over or keyboard focus you will observe changes to links on this site that are part default, part convention.
These signals confirm that the text is a link, and that it can be activated by clicking, tapping or hitting Enter.
Are hyperlinks distracting?
Evidence suggests that judicious use of links does not impair understanding, or interrupt the reader's concentration.
Solitary links are salient and may be distracting; a sprinkling of links, composed of common words, singly or in or short sentences, seems to be the best approach. It is recommended to use words of high frequency (words familiar to the target audience). The more relevant, specific and pithy the better.
In order to minimise distraction some sites gather links in one place. In a short article this may be at the end of the piece. Some BBC articles group and list links as they go along, a technique which keeps the links close to the text they support.
Links to content on the same site
Links are agnostic as to where they live, they simply connect documents, often pages, no matter where they are.
The Guardian, a large site with many internal references across different sections of the paper, makes no distinction between external and internal links, or between visited and unvisited links.
The BBC also treats internal and external links alike but it signals the source of external links in the text of the link, for example, 'according to the Red Cross, citing government data.' Visited links are gray rather than black but neither the difference nor reason for the difference is evident.
Some sites differentiate between internal and external links by including an icon on the link but not everyone recognises or understands these icons which can also be confused with indicators that the link will open in a new tab or window.
Should links open in a new window?
The W3C (World Wide Web Consortium) recommends that links open in the same window or tab as the current page.
Exceptions include opening a help page while completing a form, or to avoid leaving a page where the user is logged in. But opening in a new window or tab should always be signalled, e.g. (this link opens in new tab).
If the user wishes to open a new window or tab, that option remains available.
If you don't know the keyboard shortcuts, here they are:
- Mac: ⌘ + link
- Windows & Linux: Ctrl + link
On a tablet, mobile, trackpad or mouse press to focus on the link and select your preferred option.
One objection to opening external links in the same tab is that clicking the back button causes the page to reload. Since this behaviour is more sustainable (the energy required to resend the page is saved), you may choose to favour this approach over one that promotes accessibility. This website employs service workers so that, for the majority of users, the page loads from a local cache when they go back.
If you would like to read a variety of opinions on the rights and wrongs of opening links in new tabs (or windows), I recommend Why External Links Should Open in New Tabs, especially the comments section.
Web addresses and the address bar
The relationship between the web address that appears in the address bar and hyperlinks is fundamental. The source of the hyperlink is the web address.
According to a report on what drives web traffic from the data analytics company Alexa, between 30% and 50% of website visits come about by users entering the address they want in the address bar. The figure is at the higher end for business websites, and sectors where trust is important such as personal finance.
When visible web addresses provide useful information and should be human readable and screen-reader friendly.
They provide insight on the structure of the web site and where breadcrumbs are used there should be consistency between the two.
Fitts's law
Hyperlinks should be recognisable for all readers and on all devices. They should also be easy to click or tap.
Fitts's law is a function of the ratio between the distance to a target and the width of that target. In other words, clicking on or tapping a link should not require dexterity. As well as being large enough, this requires links to be sufficiently spaced.
Summing up
The BBC and The Guardian use different colours across their sites, including blue, black and red. But their links are always underlined, and the line is always below the bottom of descenders.
The conventions around links have shifted. But underlined text that doesn't interfere with the text is a prerequisite.
Differentiating between visited links and unvisited links depends on how useful this information is to the reader.
Some sites use an icon to indicate that the source of a link is external. The website GOV.UK removed them because they found that the icon is obscure and ambiguous.
Hyperlinks lead us from one document to another irrespective of the site to which they belong. They link ideas, opinions, people, and stories in order to explain, contradict and clarify. The links themselves should be clear, accessible and consistent, not only within a site but across sites.