improve-accessibility-of-a-read-more-link.md

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:

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:

• Blog post on this topic
• W3C's Accessibility Guidelines on links and content