Accessibility with ProcessWire: Read more links

Although ProcessWire is not a blog system, but a Content Management Framework by every definition of the term, the scenario of having a teaser overview is rather common. A headline, a summary, maybe an image, and a link to the site containing the full article.

Normally, the template partial powering such an overview of teasers would look something like this:

<?php 
$news = $pages->find('template=news');

foreach($news as $teaser): ?>

    <article>
        <!-- The title -->
        <h3><a href="<?= $teaser->url ?>"><?= $teaser->title ?></a></h3>

        <!-- The excerpt or summary -->
        <p><?= $teaser->summary ?></p>

        <!-- The link -->
        <a href="<?= $teaser->url ?>">Read more</a>
    </article>

<?php endforeach; ?>

Imagine accessing the site with assistive technology, a screen reader for example. You'll learn that many "Read more" links spread accross the site has the potential to confuse users. Read more about link purpose and link contexts in W3C's Web Content Accessibility guidelines document.

The rule of thumb regarding links accessiblity is: use link texts that tell where they are linking to, give them context. Yes, link text, not their title attributes, since it doesn't serve accessibilty as you would have thought - quite in the contrary.

Luckily, giving more information on links to screen readers, but hiding it for visual browsers is very easy:

<?php 
$news = $pages->find('template=news');

foreach($news as $teaser): ?>

    <article>
        <!-- The title -->
        <h3><a href="<?= $teaser->url ?>"><?= $teaser->title ?></a></h3>

        <!-- The excerpt or summary -->
        <p><?= $teaser->summary ?></p>

        <!-- The link, extended -->
        <a href="<?= $teaser->url ?>">Read more <span class="visually-hidden"> about <?= $teaser->title ?></a>
    </article>

<?php endforeach; ?>

The corresponding CSS for class "visually-hidden" (or "readable", whatever you find suitable for yourself and your team):

.visually-hidden {
  
    position: absolute;
  
    width: 1px;
  
    height: 1px;
  
    padding: 0;
  
    margin: -1px;
  
    overflow: hidden;
  
    clip-path: rect(0, 0, 0, 0);
  
    border: 0;

}

And we're done. If you maintain a multilanguage site or need a more flexible regarding position and phrasing of "Read more", you can use ProcessWire's __() and PHP's sprintf() like this:

<?php
$readmore_linktext = sprintf(
    __("Read more %s"), 
   "<span class='visually-hidden'> about {$teaser->title}</a>"
    );

?>


    
<!-- The link, extended -->

<a href="<?= $teaser->url ?>"><?= $readmore_linktext ?></a>

Drupal 8 has this approach (among other great accessibily measures) baked into its core, regardless of the theme. At least WordPress "original" themes, the Twenty-Somethings (Twenty Fourteen, Twenty Fifteen, Twenty Sixteens) features this link a11y approvement as well.

In the end: The only thing to change regarding this issue in ProcessWire is awareness - the implementation itself is easy as pie.