Post excerpts for an archive template

Excerpt block Excerpt block

In an archive template it is common to have a list of posts with the following elements for each post:

  • the post title
  • a thumbnail
  • the excerpt
  • a read more link

Top ↑

Issues Issues

There are a few things to watch out for to make this usable for everyone.

  • avoid multiple / duplicate links to the same location (see examples below)
  • avoid meaningless link texts (see examples below)
  • avoid too many tab stops per block (see examples below)
  • make sure that the thumbnail has an appropriate link text

A screen reader user can call a list of links to quickly navigate a site. Then duplicate and meaningless links are annoying and time consuming.

How many links per block will go to the same location? Is the post title, the thumbnail and the read more all linked to the same destination? That will cause a great deal of link clutter on your page.  If you have, for example, 3 links to the same destination, consider removing 2 from the link list by adding the attribute aria-hidden=”true”. Then the link is removed from the screen readers link list.

But adding aria-hidden="true" alone might be confusing because you can tab into it, but it doesn’t announce anything for the screen reader users.

So: take the link also out of the tab order by using tabindex="-1":

<a href="your-url" aria-hidden="true" tabindex="-1">link text</a>

Top ↑

Link text like “Read more…” or “Continue reading…” are meaningless, especially in a link list for screen reader users. Read more about what? It’s best to give context to links. Include the post title for your “read more” links so screen readers understand what’s being linked to, and optionally hide this by using the CSS class screen reader text.

For example:

<a href="your-url">Continue reading
    <span class="screen-reader-text"> Your post title</span>
</a>

Top ↑

Three tabs stops per block? Three tabs stops per block?

A keyboard only user has to tab three times per block though the archive page. Consider removing two from the link list by adding the attribute tabindex="-1". Then the link is removed from the tab order.

For example:

<a href="your-url" tabindex="-1">Your post title</a>

Top ↑

The alt text of the thumbnail The alt text of the thumbnail

If the thumbnail is placed inside a link, the alt attribute serves as the link text. So it’s important that the alt text is not empty and contains the post title of the post it’s linking to.

For example:

<a href="your-url"><img src="img-url" alt="Your post title"></a>

Top ↑

Proposed solution Proposed solution

Putting this all together, the following code will have one link in the link list and one tab stop per block.

Note: this HTML/PHP is only basic, without the styling that a theme may need.

Top ↑

In HTML In HTML

<h2><a href="your-url">Your post title</a></h2>
<a href="your-url" tabindex="-1" aria-hidden="true">
  <img src="img-url" alt="Your post title">
</a>
<?php the_excerpt(); ?>
<a href="your-url" tabindex="-1" aria-hidden="true">Continue reading
   <span class="screen-reader-text"> Your post title</span>
</a>

Top ↑

In PHP In PHP

For example for the Twenty Seventeen theme we can remove one tab stop:

<?php the_title( '<h2><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' ); ?>
<a href="<?php the_permalink(); ?>"tabindex="-1" aria-hidden="true">
    <?php the_post_thumbnail( 'twentyseventeen-featured-image', [ 'alt' => get_the_title() ] ); ?>
</a>
<?php
the_content( sprintf(
    __( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),
    get_the_title()
) );
?>

Top ↑

Discussion Discussion

Removing a visible link from the tab order could be confusing for keyboard users.

Adding a link inside a heading is open to debate. But the link will show up in the headings list too this way, so that’s probably not a bad thing. As we are all used to the heading being a link, it has become a WordPress convention. Removing the “continue reading” link could be an option to cleanup the link clutter.

The “continue reading” link is hidden for screen readers, but it has screen reader text. This is useful because, if a user has her own stylesheet, or watches the sites without stylesheet, the link text is still understandable. Also adding the screen-reader-text class improves the quality of the link text, important for SEO (search engine optimization).