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:

  1. Numbered (1, 2, 3, …) links;
  2. Previous page and Next page links;
  3. 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:

  1. Without dependencies: keyboard-pagination.js; (2kb when minified);
  2. 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:

Demo

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.

Newsletter

In case you want to be informed about my blog posts.

RSS Feed

You can also subscribe to my RSS feed in order to follow my blog. Not using any RSS reader? You can try Readerrr.