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 WCAG guidelines, without compromising your design.
Why create a valid link?
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.
What is a good link?
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 CSS and HTML we can hide some of the text on the frontend of the website, but still keep it accessible for reading software.
The CSSDo you use a CSS 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
Do you write your own CSS? Then use the CSS below to show an element on screenreader software, while hiding it on the frontend of your website.
clip: rect(0, 0, 0, 0);
The HTMLTo create a good link using the above CSS code, you can use the following HTML.
Know more<span class="sr-only"> about web accessibility</span>
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.
My favorite way to make an entire block of content clickable is to use a
::after pseudo element.
The principle is that you give the area you want to be clickable a
position: relative. The
::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.