Keyboard Shortcuts for Pagination
Computers have multiple input devices for easier usage. Imagine entering text without a keyboard or using a website without a mouse. Therefore we, people who make websites, should enable these devices on our products. The most basic but very useful thing would be keyboard shortcuts for pagination.
When I was developing a custom Tumblr theme for Tree House Love, I wanted to make navigating through the posts as easy as possible. I started by designing visually obvious Previous / Next buttons and ended up by applying a custom keyboard event callback via JavaScript. The latter is super-easy and should be “implanted” anywhere where this could be usable on the web. For the sake of better UX.
How it works
The custom callback function code detects which one of the two keyboard arrow keys were pressed: left or right. It then selects a corresponding pagination link and simply simulates (triggers) a click event for it.
Pagination patterns
In UI world there are a few patterns of pagination. The pattern could be a single or a combination of the following options:
- Numbered (1, 2, 3, …) links;
- Previous page and Next page links;
- First page and Last page links.
Usually, the 3rd option is only used in a combination with other options.
HTML
Let’s “illustrate” the most common pagination patterns with some accessible markup.
Numbered (1, 2, 3, …) links
<nav class="pagination" role="navigation" aria-label="Pagination">
<ul>
<li class="pagination-number pagination-current"><a href="" title="Page 1, current page" aria-label="Page 1, current page">1</a></li>
<li class="pagination-number"><a href="" title="Page 2" aria-label="Page 2">2</a></li>
<li class="pagination-number"><a href="" title="Page 3" aria-label="Page 3">3</a></li>
<li class="pagination-number"><a href="" title="Page 4" aria-label="Page 4">4</a></li>
<li class="pagination-number"><a href="" title="Page 5" aria-label="Page 5">5</a></li>
</ul>
</nav>Previous and Next links
<nav class="pagination" role="navigation" aria-label="Pagination">
<ul>
<li class="pagination-prev"><a href="" rel="prev" title="Previous page" aria-label="Previous page">Prev</a></li>
<li class="pagination-next"><a href="" rel="next" title="Next page" aria-label="Next page">Next</a></li>
</ul>
</nav>Numbered (1, 2, 3, …), Previous and Next, First and Last links
<nav class="pagination" role="navigation" aria-label="Pagination">
<ul>
<li class="pagination-first"><a href="" title="First page" aria-label="First page">First</a></li>
<li class="pagination-prev"><a href="" rel="prev" title="Previous page" aria-label="Previous page">Prev</a></li>
<li class="pagination-number pagination-current"><a href="" title="Page 1, current page" aria-label="1, current page">1</a></li>
<li class="pagination-number"><a href="" title="Page 2">2</a></li>
<li class="pagination-number"><a href="" title="Page 3">3</a></li>
<li class="pagination-number"><a href="" title="Page 4">4</a></li>
<li class="pagination-number"><a href="" title="Page 5">5</a></li>
<li class="pagination-next"><a href="" rel="next" title="Next page" aria-label="Next page">Next</a></li>
<li class="pagination-last"><a href="" title="Last page" aria-label="Last page">Last</a></li>
</ul>
</nav>JavaScript
I wrote a lightweight plugin to handle this part. You will love this – there are two versions of the plugin:
- Without dependencies: keyboard-pagination.js; (2kb when minified);
- With jQuery dependency: jquery.keyboard-pagination.js; (1kb when minified);
The plugin accepts some options:
| Name | Default value | Description |
|---|---|---|
| num | false | List items selector for numbered (1, 2, 3, …) page links |
| numCurrent | false | Currently active numbered list item selector |
| prev | false | List item selector for the previous page link |
| next | false | List item selector for the next page link |
| first | false | List item selector for the first page link |
| last | false | List item selector for the last page link |
| doublePressInt | 250 | An interval (delta) in milliseconds between two button presses. Serves as a shortcut for first and last, which must be set. The lower the value the faster the button should be pressed two times. |
| keyCodeLeft | 37 | Key code for previous page |
| keyCodeRight | 39 | Key code for next page |
// non-jQuery
keyboardPagination('.pagination', {
num: '.pagination-number',
numCurrent: '.pagination-current',
prev: '.pagination-prev',
next: '.pagination-next',
first: '.pagination-first',
last: '.pagination-last'
});
// jQuery
$('.pagination').keyboardPagination({
num: '.pagination-number',
numCurrent: '.pagination-current',
prev: '.pagination-prev',
next: '.pagination-next',
first: '.pagination-first',
last: '.pagination-last'
});The plugin has a two public methods:
| Name | Description |
|---|---|
| pause | Stops the plugin |
| resume | Resumes the plugin |
// non-jQuery
var pagination = keyboardPagination('.pagination', { /* options */ });
pagination.pause();
pagination.resume();
// jQuery
var $pagination = $('.pagination').keyboardPagination({ /* options */ });
$pagination.pause();
$pagination.resume();Tips
Only specify what is necessary. You do not have to set values for every selector option.
If your pagination consists only of Previous / Next links, you only have to set the values for prev and next, for example:
keyboardPagination('.pagination', {
prev: '.pagination-prev',
next: '.pagination-next'
});If your pagination only has numbered (1, 2, 3, …) links, you only have to set the values for num and numCurrent, for example:
keyboardPagination('.pagination', {
num: '.pagination-number',
numCurrent: '.pagination-current',
});If you have a pagination with both types of Previous / Next and 1, 2, 3, … links, you should specify only one group of options, either prev and next or num and numCurrent. There is no need for both groups.
If you have First and Last links in your pagination and prefer enabling double press shortcut for arrow buttons, specify first and last, for example:
keyboardPagination( '.pagination', {
first: '.pagination-first',
last: '.pagination-last',
num: '.pagination-number',
numCurrent: '.pagination-current'
});See how it works and study the real-life code:
Compatibility
The jQuery version of the plugin is compatible with both 1.x (IE6+) and 2.x (IE9+) library branches. The non-jQuery version functions in Internet Explorer 8+. All fine with the other browsers.