'Read More' links are bad.
Designers love to add 'Read more...' links onto sites, regardless of how often developer's say "Please don't; that's not accessible - use something that reads correctly out of context!". Developers know that users of screen reader software often have all the links on a page read out, so they can navigate quickly - we know hearing 'Read more, read more, read more' isn't useful.
Designers also love it if users are able to click anywhere on the associated block to activate such a link, no matter how developers say "Hey, that behaviour is no good on mobile when the block fills the screen and the user wants to scroll!". Developers know that a large hit area is good - as long as it isn't taking up the majority of the screen or interfering with other interactions.
I thought I'd share my solution that keeps designers, developers, and users happy.
Here's the HTML
<div class="block">
<h2>Block Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda consequuntur debitis perspiciatis totam commodi iusto mollitia inventore molestias hic quis corrupti neque recusandae ullam.</p>
<p class="more-link"><a href="/"><span>Learn more about Block Title</span></a></p>
</div>And here's the CSS
.block {
position: relative;
}
.block .more-link a:after {
content: "Read more...";
}
.block a > span { // accessible hiding of text
position: absolute; left: -999em;
}
@media screen and (min-width: 640px) { // replace this with whatever works for you
.block .more-link a:before {
content: "";
position: absolute; top: 0; bottom: 0; left: 0; right: 0;
}
}What we end up with is a solution where:
- Users of screen readers will hear the real link text; which makes sense out of context because it's a proper sentence.
- Users on smaller devices, where the block is likely to fill a screen, get a standard looking inline text link that says 'Read more...', and they must click on those words to activate the link.
- Users of larger devices, where the block won't be taking up the whole screen, will get to click anywhere on the block to activate the link.
Neat.