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.

Typical news teaser listing

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.

Return of the erratically published link list

Oh my. No blog post for more than a year now. Let's end this by restarting my blog with something spectacular, never-seen-before and groundbreakingly new - a link list. Buckle up, Reeder's Digest is back ('though I dropped the name):

  • pa11y - automated accessibility testing : A handy little tool for fast a11y testing of your (or someone else's) website and gaining awareness of accessability, via one line in your terminal: pa11y bigger-on-the-inside.net. A webservice and a dashboard are available as well. (via @janl and @davatron500 on Twitter)
  • yellowled.de Live Relaunch (German): Matthias Mees conducts a live redesign of it's blog, allowing us to look over his shoulder regarding design, coding, workflow and intermediate states in the process. I find these oppurtinities to be highly interesting.
  • ProcessWire on TutsPlus: Installation and reasoning: With ProcessWire 3 around the corner and brand, documentation and organisational changes ahead I really do believe 2016 will be a great year for an equally great CMS/CMF.
  • A new mobile navigation menu for PlayStation.com: Very fascinating new approach to solve a deep nested and complex navigation on mobile.
  • New rubyonrails.org: Although I share the criticism towards the somehow sloppy typography in the logo I really like the new approach to the front-page. It feels both very un-techy and basecamp-y (in the 37signals-y philosophy sense).
  • toggleAria: The last one is a shameless plug and a little jQuery-Plugin for toggling WAI-ARIA states like  aria-busy,  aria-disabled ,  aria-expanded , and  aria-hidden. Imagine it as the counterpart to jQuery's toggleClass. Nothing spectacular, but a classic scratched-my-own-itch thingie.

It's about time

Today a discussion on twitter arose, started by this tweet from Sara Soueidan (Read the full discussion):

And yes, I do fully agree. It happened more than once that I was researching some particular web development topic and was being confronted with timeless articles, speaking of timeless "Internet Explorer", "Firefox" or "Opera". No indication on what version could have said bug, if said workarounds is either still necessary or obsolete all along. Both additionally and ironically, even the blog design page itself sometimes does not serve as a clue - thanks to the concept of theming.

But what's sometimes even worse in my opinion - incomplete time stamps. So your post was published on March, 20th. Congratulations. But what year?

Fellow bloggers (cough) and web developers (cough with self esteem): We're all in the same boat. A boat that's on a very fast stream, with new information, tools and approaches around every corner. And this industry's willingness to share knowledge is really awesome and helping us all. So please go the extra mile (which is no extra mile at all, because shorten or hide a timestamp should be more work than just outputting it) and get a date put a date on it. Thanks!