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

See the Pen Screen reader only text by Rogier (@ikmaakt) on CodePen.

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.

See the Pen Pseudo element to make full wrapping element clickable by Rogier (@ikmaakt) on CodePen.

Scroll to top