Pseudo-element link overlay
- Written by Florian Schroiff
The pseudo-element link overlay is a great accessible pattern when you need to make an entire complex component clickable. At Level Level we like to use it for article-excerpts on overview pages.
Demo
A heavy footfall in the passageLink to Level Level website, opens in new window
Whether that mattress was stuffed with corn-cobs or broken crockery, there is no telling, but I rolled about a good deal, and could not sleep for a long time.
This entire teaser is clickable and accessible to users of assistive technology. The title (not the entire teaser) gets an outline when the link is focused via keyboard. The tags are also links and are separately focusable. Nice and clear.
Motivation
Wrapping flow content in an anchor tag is valid HTML5 (see the “changes” section of the hyperlink spec), so why not do the following?
<!-- BAD EXAMPLE, DO NOT DO THIS! -->
<a href="https://example.com" class="teaser">
<div class="teaser-content">
<h2>Lorem ipsum</h2>
<p>Nulla porttitor accumsan tincidunt. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</p>
</div>
<ul class="teaser-tags">
<li>Lorem</li>
<li>Ipsum</li>
</ul>
</a>
Interactive content is not allowed inside an a tag, so we would have to get rid of the links in <ul class="teaser-tags">.
And although this is valid HTML this pattern is not deemed accessible. The link-text will become very long and will not be descriptive enough. It violates Web Content Accessibility Guidelines (WCAG) 2.1 Success Criterion 2.4.4: Link Purpose (In Context) which states:
Link text that is as meaningful as possible will aid users who want to choose from this list of links. Meaningful link text also helps those who wish to tab from link to link. Meaningful links help users choose which links to follow without requiring complicated strategies to understand the page.
A violation of this success criterion would fail Level A, the most basic set of requirements in the WCAG 2.1.
How can we make the entire component clickable while staying accessible?
:after to the rescue!
The man article-link is a child of the heading. When necessary additional context can be given via screen-reader-only text. You should avoid repetition of “read complete article” in lists of teasers where the context is clear.
<div class="teaser">
<h2 class="teaser-title">
<a href="https://example.com">
Lorem ipsum
<!-- optional extra context -->
<span class="screen-reader-only">
- read the complete article on example.com
</span>
</a>
</h2>
<p>Nulla porttitor accumsan tincidunt. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</p>
<ul class="teaser-tags">
<li><a href="https://example.com/#lorem">Lorem</a></li>
<li><a href="https://example.com/#ipsum">Ipsum</a></li>
</ul>
</div>
We can then use CSS to make the entire teaser clickable. We can also ensure that the secondary links, the tags, are clickable by positioning them relatively.
.teaser {
position: relative;
}
.teaser-title a:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.teaser-tags {
position: relative;
}
Side-note: What is screen-reader-only?
The screen-reader-only class visually hides text, but keeps it accessible to users of screen readers. Read more about this handy technique on the WebAIM site.
Finishing up
We have now built
- a semantically sound component
- that fulfills basic accessibility requirements
- and offers a pleasant user experience for everyone
A heavy footfall in the passageLink to Level Level website, opens in new window
Whether that mattress was stuffed with corn-cobs or broken crockery, there is no telling, but I rolled about a good deal, and could not sleep for a long time.
Credits
This pattern was developed by my colleagues Kevin and Willemijn, inspired by Heydon Pickering. Thank you to my colleagues Caitlin and Rian for providing accessibility-expertise. Whale photo by Silas Baisch on Unsplash.
