When using the full pager on a view and you have more than 10 pages, then the ellipsis '...' is used to show this. The markup for this is
<ul class="pager__items js-pager__items">
<li class="pager__item is-active">
<a href="?page=0" title="Current page" aria-current="page">
<span class="visually-hidden"> Current page </span>1 </a>
</li>
<li class="pager__item">
<a href="?page=1" title="Go to page 2">
<span class="visually-hidden"> Page </span>2 </a>
</li>
<li class="pager__item">
<a href="?page=2" title="Go to page 3">
<span class="visually-hidden"> Page </span>3 </a>
</li>
<li class="pager__item">
<a href="?page=3" title="Go to page 4">
<span class="visually-hidden"> Page </span>4 </a>
</li>
<li class="pager__item">
<a href="?page=4" title="Go to page 5">
<span class="visually-hidden"> Page </span>5 </a>
</li>
<li class="pager__item">
<a href="?page=5" title="Go to page 6">
<span class="visually-hidden"> Page </span>6 </a>
</li>
<li class="pager__item">
<a href="?page=6" title="Go to page 7">
<span class="visually-hidden"> Page </span>7 </a>
</li>
<li class="pager__item">
<a href="?page=7" title="Go to page 8">
<span class="visually-hidden"> Page </span>8 </a>
</li>
<li class="pager__item">
<a href="?page=8" title="Go to page 9">
<span class="visually-hidden"> Page </span>9 </a>
</li>
<li class="pager__item pager__item--ellipsis" role="presentation">…</li>
<li class="pager__item pager__item--next">
<a href="?page=1" title="Go to next page" rel="next">
<span class="visually-hidden">Next page</span>
<span aria-hidden="true">Next ›</span>
</a>
</li>
<li class="pager__item pager__item--last">
<a href="?page=16" title="Go to last page">
<span class="visually-hidden">Last page</span>
<span aria-hidden="true">Last »</span>
</a>
</li>
</ul>
On running an accessibility check using Axe, it flagged an issue which I thought was a false positive and logged and issue with them (https://github.com/dequelabs/axe-core/issues/4313). As you can see from the responses it isn't and the use of a non-list item in a list is an accessibility issue.
Create a view with a full pager and more than 10 pages.
I think this needs discussion. The GDS in the UK have a similar solution https://design-system.service.gov.uk/components/pagination/ which is essentially the same but without the role="presentation" on the <li> that contains the ellipisis.
Closed: duplicate
10.2 ✨
Last updated
It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.
Thanks for opening this, it reads like a duplicate of 🐛 Ellipsis in pager template fails accessibility tests Needs work so closing for new, feel free to reopen this if you feel this is addressing a different issue.