Skip to content
Switch branches/tags
Go to file
Cannot retrieve contributors at this time

title: Improve accessibility of a read more link

version: 1.0.0

authors: marcus

tags: a11y, accessibility, templates

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:

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

foreach($news as $teaser): ?>

        <!-- 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>

<?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;