Friday, December 28, 2012

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.

2 comments:

only show translated menu items into current language (Drupal 8)

function MY_THEME_preprocess_menu(&$variables) {   if ($variables['menu_name'] == 'brancott-header-menu') {    $langu...