Permalink
Branch: master
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
70 lines (46 sloc) 1.51 KB

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:

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