Posted by jwilson3 on August 13, 2015 at 4:02pm
I'm currently working on a university project that wants to improve their #a11y support on their library website.
One of the main concerns found is that the site is chock full of one-word links like "view all" "read more" etc, that are totally impossible to interpret when taken out of context. (WCAG 2.0, section 2.4.9)
One really good example of poor accessibility support is the Drupal 7 pager. Links in the pager read by a screen reader, when taken out of context, lose all meaning (E.g. "one" "two" "three" "next" "last").
The pager in Drupal 8 largely fixes this issue, so I've just written a backport to Drupal 7.
Comments and code critiques welcome on the gist found here:
Comments
Testing
Very nice! I will try to test. Thank you jwilson3.
Official core backport issue
I've created an issue to get this officially backported to Drupal 7 core.
https://www.drupal.org/node/2550929
The gist needs a bit of HTML cleanup work to be core-ready, so that it doesn't adversely affect existing themes.
Awesome!
I specifically don't use the pager in Drupal 7 for this reason! Great work!
Hi jwilson3,I found what
Hi jwilson3,
I found what pager.tpl.php has wrong CSS classes and it is displayed in the vertical position, I did fix that and now works as it was intended.
<?php
// Place this file your theme's "templates" folder.
/**
* @file
* Theme override to display a pager.
*
* This is a backport of pager.html.twig from Drupal 8 to Drupal 7, which add
* accessibility support for WCAG 2.0 section 2.4.9.
*
* Available variables:
* - items: List of pager items.
* The list is keyed by the following elements:
* - first: Item for the first page; not present on the first page of results.
* - previous: Item for the previous page; not present on the first page
* of results.
* - next: Item for the next page; not present on the last page of results.
* - last: Item for the last page; not present on the last page of results.
* - pages: List of pages, keyed by page number.
* Sub-sub elements:
* items.first, items.previous, items.next, items.last, and each item inside
* items.pages contain the following elements:
* - href: URL with appropriate query parameters for the item.
* - attributes: A keyed list of HTML attributes for the item.
* - text: The visible text used for the item link, such as "‹ previous"
* or "next ›".
* - current: The page number of the current page.
* - ellipses: If there are more pages than the quantity allows, then an
* ellipsis before or after the listed pages may be present.
* - previous: Present if the currently visible list of pages does not start
* at the first page.
* - next: Present if the visible list of pages ends before the last page.
*
* @see template_preprocess_pager()
*/
?>
<?php if (count($items)) : ?>
<nav class="item-list item-list--pager" role="navigation" aria-labelledby="pagination-heading">
<h4 id="pagination-heading" class="element-invisible"><?= t('Pagination') ?></h4>
<ul class="pager">
<?php // Print first item if we are not on the first page. ?>
<?php if ($items['first']) : ?>
<li class="pager__item pager-first">
<a href="<?= $items['first']['href'] ?>" title="<?= t('Go to first page') ?>"<?= $items['first']['attributes'] ?>>
<span class="element-invisible"><?= t('First page') ?></span>
<span aria-hidden="true"><?= t('« first') ?></span>
</a>
</li>
<?php endif; ?>
<?php // Print previous item if we are not on the first page. ?>
<?php if ($items['previous']) : ?>
<li class="pager__item pager-previous">
<a href="<?= $items['previous']['href'] ?>" title="<?= t('Go to previous page') ?>" rel="prev"<?= $items['previous']['attributes'] ?>>
<span class="element-invisible"><?= t('Previous page') ?></span>
<span aria-hidden="true"><?= t('‹ previous') ?></span>
</a>
</li>
<?php endif; ?>
<?php // Add an ellipsis if there are further previous pages. ?>
<?php if ($ellipses['previous']) : ?>
<li class="pager__item pager__item--ellipsis" role="presentation">…</li>
<?php endif; ?>
<?php // Now generate the actual pager piece. ?>
<?php foreach($items['pages'] as $key => $item) : ?>
<li class="pager__item<?= $current == $key ? ' pager-current' : '' ?>">
<?php if ($current == $key) : ?>
<?php $title = t('Current page'); ?>
<?php else : ?>
<?php $title = t('Go to page @key', array('@key' => $key)); ?>
<?php endif; ?>
<a href="<?= $item['href'] ?>" title="<?= $title ?>" class="<?= $current == $key ? ' active' : '' ?>">
<span class="element-invisible">
<?= $current == $key ? t('Current page') : t('Page'); ?>
</span><?= $key ?>
</a>
</li>
<?php endforeach; ?>
<?php // Add an ellipsis if there are further next pages. ?>
<?php if ($ellipses['next']) : ?>
<li class="pager__item pager__item--ellipsis" role="presentation">…</li>
<?php endif; ?>
<?php // Print next item if we are not on the last page. ?>
<?php if ($items['next']) : ?>
<li class="pager__item pager__item--next">
<a href="<?= $items['next']['href'] ?>" title="<?= t('Go to next page') ?>" rel="next"<?= $items['next']['attributes'] ?>>
<span class="element-invisible"><?= t('Next page') ?></span>
<span aria-hidden="true"><?= t('next ›') ?></span>
</a>
</li>
<?php endif; ?>
<?php // Print last item if we are not on the last page. ?>
<?php if ($items['last']) : ?>
<li class="pager__item pager__item--last">
<a href="<?= $items['last']['href'] ?>" title="<?= t('Go to last page') ?>"<?= $items['last']['attributes'] ?>>
<span class="element-invisible"><?= t('Last page') ?></span>
<span aria-hidden="true"><?= t('last »') ?></span>
</a>
</li>
<?php endif; ?>
</ul>
</nav>
<?php endif; ?>
Views Litepager
I'm guessing this would also apply to the Views Litepager project as well.
Charles Belov
Webmaster
San Francisco Municipal Transportation Agency (SFMTA)