Accessible “Read More” Links

When there are a bunch of “read more” links on a page, it is usually fairly obvious from visual cues what the “read more” refers to. However, when screen reader users encounter a bunch of “read more” links on a page, it is not always obvious which part of the page each “read more” link refers to. A simple solution is to use a bit more descriptive text than simply “read more” and use CSS to hide the additional text. In this example the following code is used.

<p><a href="#">Read more <span class="offscreen">About NC State</span></a></p>
 
This is the CSS rule.

.offscreen {
position:absolute;
left:-999px;
width:1px;
height:1px;
top:auto;
}
 
Notes:
  • The off-screen text needs to be included in the <a> as well, otherwise it won’t be read correctly by screen readers.
  • You cannot use the CSS rule display:none or visibility:hidden as that will make the content invisible to screen reader users.
  • This code is not unique to me. It is the compilation of different examples I have seen in various accessibility forum posts. I just want to put this example in writing for others.

Comments

Post a Comment

Popular posts from this blog

Solved Drupal Interview Questions

A List of the Best Drupal SEO & Social Media Modules