Avoid “read more” Links in your WordPress Blog

This post originally appeared on the Yahoo! Accessibility Blog.

No Read More linksno-read-more

WordPress makes it easy to display a truncated version of each article on home and archive pages. Unfortunately, the default presentation will insert a simple link that says "(read more)", which is not helpful to screen reader users who are faced with a list of repetitive links. It's much better to insert the article's title in the link text.

This article will show you how to easy to accomplish by slightly modifying the archive.php file in your blog's theme.

Basic functionality of the_content() in WordPress

WordPress allows you to display a truncated version of a post when it is displayed in an archive section. This is accomplished by adding a quicktag that defines where a post should be truncated. WordPress will crop the article and insert a "read more" link to see the full post

If the quicktag <!--more--> is used in a post to designate the "cut-off" point for the post to be excerpted, the_content() tag will only show the excerpt up to the quicktag point on non-single/non-permalink post pages. By design, the_content() tag includes a parameter for formatting the <!--more--> content and look, which creates a link to "continue reading" the full post.
Function Reference/the content WordPress Codex

This is the basic usage of the_content() function.

<?php the_content(); ?-->

Extending the_content for better accessibility

Fortunately we can pass a new link text pattern to the_content function. It will add the article title to the link. This gives screen reader users unique links for each article.

<!--?php the_content("Continue reading --> " . the_title('', '', false) . ""); ?>

Optional CSS to hide the article title

Many sites prefer to display a shorter link. The following CSS will hide the content within the span from the visual presentation. Screen reader users will still see the full text. However, this will make it more difficult for visitors using voice recognition software.

/*Make the links stand out via bold and right align*/
.more-link {
/*hide the article title */
.more-link span {
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px,1px,1px);

Use ARIA on your read more links

You can also use ARIA to solve this in a more elegant pattern. This involves two steps.

  1. Add an id to the article headline
  2. Connect the readmore link to the headline with aria-describedby

This is a headline for an article

Read More

The user will hear "read more" and "This is a headline for an article".

This is pretty easy to do with WordPress. Grab the post id and prepend it with a letter to make it valid. You can then use it in the headline link and readmore link. The following code would run within the loop of posts.

$linkurl = get_permalink($posts[$i]->ID);
$title = $posts[$i]->post_title;
$linkid = 'y'.$posts[$i]->ID;
print "$title";
print "Read More";

What you can do

  • Avoid duplicate links on your web site. Each link should have unique text and tell the user what they can expect at the target page.
  • Voice recognition software, such as Dragon Naturally Speaking, can be blocked from recognizing the link when the visible text is inconsistent. This can happen when portions of a text link are hidden or an image's alt text doesn't match the text in the image.
  • You can find more information at Word Press: Function Reference: the_content()