Why are “click here” and “by this link” poor choices? And is it acceptable to use “read more”?

All these phrases have become so common that many people don’t see any problems with them. How many times have you encountered or composed the following on websites, in emails, or on intranets? In this article, I’ll explain popular wording and formatting mistakes and will show more accessible and informative alternatives.

A baroque painting of biblical character Daniel in a den of lions — If something is widely spread, it doesn’t mean it’s right.

1. Meaningful links

First things first. What exactly is a hyperlink? It’s a combination of a web address (URL) and a clickable element (oftentimes a word or phrase, sometimes an image). While this is a vast topic, we’ll focus on text links, namely their usability and accessibility.

Thoughtfully composed links express respect to readers, whereas jumbled-up ones cause confusion and suspicion. When a link is presented as “here” or “this,” it’s harder to aim it with a cursor or finger. Also, it lacks transparency. What is hidden behind it: a page or file, an article or web form? One should re-read the whole sentence or paragraph to guess.

Examples of bad and good uses of hyperlinks in UI — Links embedded into meaningful phrases are more comprehensible.

On the contrary, URLs attached to concise self-explanatory phrases inform people about the destination and are more convenient targets for clicking or tapping. Moreover, a well-composed link makes sense out of context and typically combines a topic (for example, security, brand, marketing) and format (questionnaire, request form, guideline, policy, and so on).

Examples of hyperlinked text in context and out of context — A well-composed link text usually makes sense out of context.

2. Exposing URLs

If a web address is short and doesn’t look like “M$c0P88%X4LHr&dxQ1A,”then exposing it right away will work quite well, too, especially if the audience is supposed to copy it and paste it somewhere else.

Examples of hyperlinked text versus short link display — In many cases, there is nothing wrong with exposing short URLs; however, it won’t be the most elegant solution from a visual standpoint.

And if you’ve got a long indecipherable chain of symbols, exposing it isn’t a great idea in most situations. In this case, consider embedding a URL into a succinct phrase or shortening the address in tools like Bitly or Cuttly.

However, these tools aren’t silver bullets: you do get a shorter link, but its meaningful parts will be replaced with random symbols, which are suspicious and not informative. Customizing shortened URLs is possible, but it’s typically a paid feature. Compare the following examples:

bit.ly/30SjUa4y (suspicious and unreadable);
bit.ly/smashing-books (readable topic);
smash.ing/30SjUa4y (recognizable domain);
smash.ing/books (fully transparent).

Example of short url versus long url displayed in UI — Long “gibberish” URLs occupy much space and are hard to memorize. However, they might become a non-fancy yet practical solution for copy-pasting.

3. Download links

A link that guides to some downloadable resource needs a slightly different treatment. Besides embedding it into a meaningful phrase, you should also inform users about the file format and size:

The format gives clues to what you can do with this data (e.g. if the information is read-only or editable);
The file size is crucial for people with costly internet, slow connection, or limited local storage.

Download link bad and good examples — A good practice for download links is to show the file format and size.

When you share a bunch of files (let’s say in different formats or versions), it’s not enough to design each link correctly. The whole series should be well-scannable and easy to use.

Examples of download links. On the left, the examples are more wordy. On the left they're less wordy. — More with less: try to edit out repeated words and keep the list compact.

As you might notice in the picture above, repeated elements are not part of hyperlinks. Although this practice makes links look cleaner for sighted users, it may be harmful to blind people. In chapter 6 of this article, I explain how you can keep blocks of links visually minimalistic, but at the same time leave enough guidance for assistive technology users.

4. “Buttonizing” important links

Not all links on a page or in an email are equally important. Authors often want their audience to click on the primary link, whereas other links can be skipped. If you’re going to draw people’s attention to the main action, think of presenting it as a button: “Subscribe to the newsletter,” “Buy tickets,” “Get the whitepaper,” or “Download the recording.”

Key link displayed as button example. — The key link deserves to be a well-noticeable button.

And since I don’t want to be beaten by my accessibility colleagues for this advice, beware of confusing buttons and links semantically, in the HTML code. What I’m talking about here is the visual “buttonizing” of the key links, which makes sense to sighted people whose attention you want to attract. However, people who use assistive technology (namely screen readers) will be very confused to encounter a button instead of a link.

Here is a simple distinction of these HTML elements:

<button> = a button; executes an action on the current page (for example, save, submit, refresh, duplicate).
<a> = a link; directs you to another page, or a file outside of this page, or to a different section within the page (anchor links).

If you cannot create a “button” because of technical or time constraints, go for a quick-and-dirty solution: put that link in a separate line, make it bold, add spacing above and below, and so on.

Key link as button on left side of the image. Key link in bold and underlined on the right side of the image. — The main link can also be located on a separate line with spacing from the rest of the text.

Of course, “button” text should follow corresponding patterns:

Be concise (up to 4–5 words);
Ideally, start with a verb (get, buy, download, apply for, etc.);
Call the action honestly (avoid hushing up unpleasant steps like watching ads, registration, submitting personal data, etc.).

Compare “Download the whitepaper,” which assumes that downloading starts immediately after clicking, and “Get the whitepaper,” when a user downloads the file in exchange for their name and contact details.

Example of prominent buttons. On the left, a button with too much text. On the left, a good example with a short call to action. — Prominent buttons are suitable until they turn into aggressive banners.

5. Link-rich texts

Links enable the functioning of the internet; however, vigorously pumping URLs into each sentence isn’t a good practice (of course, unless you contribute to a Wikipedia-like knowledge base that is cross-connected by nature).

Step zero is to make sure you really need all the links. If you can edit something out, there won’t be a problem to solve. Otherwise, try to group the links: as a bulleted list, on the side of related paragraphs, or under a suitable title (for example, “Recommended materials,” “Resources”).

On the left, text with scattered links. On the right column, links are organised in bullet points instead. — Link-crowded texts overwhelm the audience with too many options. Moreover, it’s challenging to formulate links when as part of a sentence.

Grouping the links helps a lot, but if the goal is to trigger action, the primary link should stand out.

On the left, links organised in standard bullet points. On the right, links organised in bullet points with the first post highlighted as a button. — The more eye-catching a link is, the more it encourages clicking/tapping on it.

In the previous sections, we figured out how descriptive links increase usability. At the same time, such links are longer, and consequently, can appear divided in a paragraph, when the first part of a link remains at the end of the previous line, and the second part jumps to the next line. It seems trivial compared to bigger flaws, but distorted links feel a bit annoying in link-crowded texts.

On the left, the text shows links split into different lines. On the right, links are intact, no split. — Split links are a bit harder to perceive than the ones that fit into corresponding lines.

If a paragraph width is fixed, compose text the way all links fit into lines, for example, try to start a paragraph with a link. However, browsers and devices render content differently, and links will still shift for some users. That’s why lists are a safer option for a set of links.

A painting called "Cholmondeley Ladies". Two ladies nurse two children. Speech bubbles next to their faces read "Read more..." — Cholmondeley Ladies: a contemporary version.

6. Link accessibility

Accessible links are not only the ones that look tidy and clear; they should also be properly working. Web Content Accessibility Guidelines (WCAG), the world’s most famous digital accessibility standard, includes recommendations about hyperlinks, including some non-visual features.

Distinction

One of the WCAG requirements is not to rely on color only when you want to distinguish a button or link from the rest of the text. Painting links in blue or another color doesn’t suffice since it still might not be visible for people with color blindness. The most typical method is underlining links; they can also appear in bold font.

Three columns of text in which the first displays links highlighted by a color change only (bad WCAG), the second shows underlined links, the third shows links underlined and in bold (best approach). — Links should differ from the rest of the text by at least one more feature except for color.

Color contrast

Links are essential interactive elements and have to comply with contrast recommendations. WCAG has two levels of contrast compliance:

AA: medium, used by many websites for a mass audience;
AAA: high, primarily applied on governmental sites and by communities of people with disabilities.

For example, the AA level requires maintaining a contrast between a link and background of at least 4.5:1 for normal font size and 3:1 for large text.

Note: You can always check your colors with the help of the online Contrast Checkeror Figma’s Contrast plugin.

Colour contrast examples in hyperlinks. — Measuring contrast by the eye doesn’t always work: for example, green should be darker and more saturated than blue to pass the requirement.

Focus state

Like all interactive components, links should have a visible keyboard focus. All popular browsers have an embedded accessible focus by default (you might have seen this bold blue frame around input fields, dropdowns, buttons, and links in Google Chrome).

Unfortunately, on some sites, focus gets manually removed or customized so that a focused link looks even less noticeable, for example, faded out.

Unfocused, standard focus and custom focus examples. — If you don’t have inspiration for creating a custom focus state, at least keep the standard one.

Optimization for screen readers

Blind users don’t see the web — they listen to it by means of “screen readers,” assistive programs that transform a written text into fast robotic speech. They navigate with a keyboard and remember dozens of handy shortcuts to jump between headings, buttons, or links instead of obediently listening to the entire content on a page.

So, when you remove wordiness for sighted people (for example, in the lists of different language versions or formats), it’s important to keep links clear for screen reader users, too. Otherwise, blind visitors will hear the following:

“Ukrainian — link, English — link, German — link…”

The self-explanatory should be heard instead:

“Download project plan template in Ukrainian — link, download project plan template in English — link…”

And probably the most annoying thing on a news website is to hear this:

“Read more — link, read more — link, read more — link…”

'Read more' versus link as title examples. — There are two main ways to put a link on a news page: make each title a link or add auxiliary phrases like “Read more…”

Sighted people can guess that “Read more…” relates to the nearest title, and blind people need individualized read-mores. Fortunately, the HTML attribute aria-label comes in handy here; it enables attaching explanatory text for screen reader users.

In small and medium teams without a separate accessibility function, It’s often a designer’s responsibility to compose accessibility-related text and collaborate with a developer around optimal implementation, so here is a simplified code example:

<h4>News</h4>
<p>Eleks Design Team will 
participate in the Space Hackathon.
<a href="aerospace-hackathon.html" 
aria-label="Read more about Eleks 
participation in the 
Space Hackathon">
Read more...
</a>
</p>
<p>
Projector Tech and Creative 
Institute launches five 
courses on web accessibility 
this year.
<a href="new-courses.html" 
aria-label="Read more about 
new courses on accessibility 
by Projector Institute">
Read more...
</a>
</p>

As you can see, each “Read more” has an extended explanation for screen readers. However, you won’t need to take care of article links with aria-labelif each title is a link itself.

<h4>News</h4>
<h5>
<a href="aerospace-hackathon.html">
Eleks Design Team will participate 
in the Space Hackathon
</a>
</h5>
<h5>
<a href="new-courses.html">
Projector Tech and Creative 
Institute launches five 
courses on web accessibility 
this year
</a>
</h5>

Duplicated links

Multiple identical links are yet another widespread controversial practice. For example, on a web page, it means that the same web address is attached to an article title, hero image, and intro sentence. At first glance, nothing’s wrong: wherever you click — you get to the article. But for blind users, it means repeating the same information thrice, which extends the time they need to sift through content to what they are interested in.

On the left, a card with image, title and text linked. On the right, a "Better" example, where only the image is linked. — It’s better to make the whole block a link rather than create multiple links that guide to the same destination.

Note: we are now talking about identical destinations, but a card can include different ones, for instance, a link to the article, author’s profile, and tags. In this case, minor links can appear “wrapped” in the main one.

The click area of the primary link “wraps” the auxiliary ones (author’s profile and tags).

Now, emails. Let’s say we have an invitation to some online event, where a Zoom link repeats several times. In the event description, “what-when-where” section, and closing part. Not only will it create an impression of mess for sighted users, but also visually impaired users will be troubled with jumping between duplicated links.