How to create a valid link?

A link like read more or a link around an entire content block is still surprisingly common. In this article I will show you how to solve this in a good way according to the W​C​A​G guidelines, without compromising your design.

Some users navigate a website based on a list of links from a page. This is particularly common among users of screenreader software. If all you have is a list of links with click here it says nothing about the destination of those links.

Also a link around a block of content is not a good idea. All content will then be included as link text which of course is not desirable either.

Actually it is very simple. The text of a link should express where someone ends up. Let’s take the example in this article that we want to create a link that goes to a page that is about web accessibility. A good link text to this page would then be: about web accessibility.

The text of a link should represent where a user will end up

Show text only to screenreader software

Do you want to show a short link text like read more on the frontend of your web site, but make the link descriptive enough for reading software? Then this is certainly possible. With C​S​S and H​T​M​L we can hide some of the text on the frontend of the website, but still keep it accessible for reading software.

The C​S​S

Do you use a C​S​S framework like I do? Then it often already contains a class that shows text only to reading software. On this website I use Tailwind. Tailwind comes standard with the sr-only class.

Do you write your own C​S​S? Then use the C​S​S below to show an element on screenreader software, while hiding it on the frontend of your website.

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

The H​T​M​L

To create a good link using the above C​S​S code, you can use the following H​T​M​L. 
<a href="about-web-accessibility.html">
    Know more<span class="sr-only"> about web accessibility</span>
</a>

The result

Making full block of content clickable

Want to make an entire block of content clickable, such as a news item in a feed? Then don’t use a anchor element (<a>) that wraps an entire block. In this case, the entire content within this element will in fact be used as link text.

Make sure that you use a descriptive link within a block and make sure that the clickable part of this link covers the entire block. You can do this in several ways, for example, by placing the entire link with a position: absolute over a block.

Pseudo element

My favorite way to make an entire block of content clickable is to use a ::before or ::after pseudo element.

The principle is that you give the area you want to be clickable a position: relative. The ::before or ::after of the <a> element within this area should be postioned with position: absolute over the entire block. This way the link maintains the descriptive text and the entire block is clickable.

Scroll to top