Accessible Pagination
Published on:
Last updated: Monday, October 24, 2016.
If you have a suggestion or an issue please submit it on a11ymatters on Github.
Article Outline
Summary
When there is a lot of content to display, using pagination will help us to add navigation links to reveal more content on the page.
As a user
- As a user, I should be able to navigate by keyboard.
- As a user, I should be able to know that there is a pagination navigation when scanning the page with a screen reader.
- As a user, Each navigation item should be read as "Goto Page 1".
- As a user, I need to know which element is currently active.
- As a user, I need to navigate with Next and Previous links.
Ingredients
- aria-label
- aria-current
- role=navigation
- nav
- links
Things to take in consideration
1- Wrap the pagination links in a <nav> element
In order to let AT users recognize that there is a pagination, we should wrap the links in a <nav> element.
<nav>
<ul>
<!-- pagination links -->
</ul>
</nav>Also, we should add role=navigation and aria-label to make it clearer to AT users that this navigation landmark is intended for the pagination.
<nav role="navigation" aria-label="Pagination Navigation">
<ul>
<!-- pagination links -->
</ul>
</nav>2- Labeling the navigation links
<nav role="navigation" aria-label="Pagination Navigation">
<ul>
<li><a href="/page-1">1</a></li>
<li><a href="/page-2">2</a></li>
<li><a href="/page-3">3</a></li>
<li><a href="/page-4">4</a></li>
<li><a href="/page-5">5</a></li>
</ul>
</nav>For sighted users, it’s clear that the numbers will help him navigating different pages. But for an AT user, it’s completely different. We need a better way to make it clear for him.
See the below video for a test with VoiceOver:
Imagine that your screen is not working for some reason, you need to navigate between different pages. When you hear Link, 1 for a link with the number 1, do you think that you will get it? No! It’s not clear.
<nav role="navigation" aria-label="Pagination Navigation">
<ul>
<li><a href="/page-1" aria-label="Goto Page 1">1</a></li>
<li><a href="/page-2" aria-label="Goto Page 2">2</a></li>
<li><a href="/page-3" aria-label="Goto Page 3">3</a></li>
<li><a href="/page-4" aria-label="Goto Page 4">4</a></li>
<li><a href="/page-5" aria-label="Goto Page 5">5</a></li>
</ul>
</nav>By using aria-label, we can add a label to each link, so instead of hearing the screen reader saying Link, 1 it will be Link, Goto Page 1. See the below video:
To make it more dynamic, we will use JavaScript to loop through all the links and add aria-label with the corresponding value of “Goto Page X”.
3- Indicate which element is currently active
To indicate which element is active, we need to tweak the value of aria-label by something like Page 3, Current page. Also, we will use aria-selected=true for that.
Update: Using aria-selected is wrong in our case, because it should be used only with a role attribute. Instead, we will use aria-current. Thanks to David Storey and Stefan Judis for commenting about this. ❤️
<nav role="navigation" aria-label="Pagination Navigation">
<ul>
<!-- other pagination links -->
<li>
<a href="/page-3" aria-label="Current Page, Page 3" aria-current="true">3</a>
</li>
<!-- other pagination links -->
</ul>
</nav>Using JavaScript to dynamically add the aria-label
1
2
3
4
5
6
7
8
9
10
11
12
var pagItems = document.querySelectorAll('.pagination__item');
for (var i = 0; i < pagItems.length; i++) {
var counter = i + 1;
var string = "Page " + counter;
if (pagItems[i].getAttribute('aria-current')) {
string = "Page " + counter + ", Current Page";
}
pagItems[i].setAttribute('aria-label', string);
}
Line 1: Select all the pagination links and add them to an array.
Line 2: Loop through each item.
Line 7: Check if the item has an attribute of aria-current, if yes then we need to tweak the aria-label value.
Line 11: Add the attribute aria-label with a custom name for each item.
Final Demo
See the Pen a11ymatters - Pagination by Ahmad Shadeed (@shadeed) on CodePen.
Share the article:
Did you like the article? Share it on Twitter
Did you like the article? You can hire me.
I'm a UX, UI Designer and Front End Developer. I focus on building accessible and easy to use websites and apps. Get in touch by email: contact@ishadeed.com