This post is over a year old, its content may be outdated.

Matt Wilcox

Web Development

Tutorials Jun 30th 2015

Responsive and Accessible 'Read more...' links

My trick for creating 'read more' links that work well for everyone.

'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.