Improve accessibility of a read more link

Problem

You want to enhance (screenreader) accessibility on a "read more" link in a teaser scenario like this:

Teaser Scenario

W3C's Accessibility Guidelines on links and content

Solution

Add a visually hidden, but audible element 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, extended -->
        <a href="<?= $teaser->url ?>">Read more <span class="visually-hidden"> about <?= $teaser->title ?></a>
    </article>

<?php endforeach; ?>

Also add to your CSS:

.visually-hidden {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip-path: rect(0, 0, 0, 0);

    border: 0;

}

Resources

Version

1.0.0

View/correct recipe on GitHub

https://github.com/processwire-recipes/Recipes/blob/master/improve-accessibility-of-a-read-more-link.md

Author(s)