Accessible pagination with ARIA

Using native HTML elements has positive effects on web content accessibility. Elements can be read properly by screen readers according to their function or role. For instance, a button written using the markup below will be announced as: “Refresh Button” by screen readers.

<button id="refresh">Refresh</button>

Nice and easy. However, web development isn’t always this straight forward. We often need to write more complex widgets using a combination of native elements. And in some cases, we use frameworks to tap into well-defined/designed patterns to fulfill this need. That’s largely due to the deficient nature of the HTML spec. But can you imagine for a second a richer HTML standard? A standard encompassing all the well-established widgets that we’ve been inventing, re-inventing and using for years?

Let’s consider a paging toolbar widget … I imagine a markup (in its simplest form) to be something like this:

<pagingtoolbar numPages="10" recsPerPage="10" totalRecords="100"/>

Obviously this is a simple case. There are certainly more complex use cases for paging toolbars. But the point is, we have been using this pattern for years, yet HTML hasn’t caught up to provide an API for it. So, since the example above doesn’t exist in the HTML standard, we use frameworks such as Bootstrap or Foundation or we roll our own. A common markup for pagination is one that Bootstrap provides:

There is nothing wrong with this markup. In fact, it’s perfectly valid, and well-structured. Now, let’s consider how it will be announced by screen readers (VoiceOver on my Mac):

Link. Left pointing double arrow.
List 7 items
Link 1
Link 2
Link 3
…

Screen reader users will gather the context by the time screen reader announces the 5th or 6th line (Link 2 or Link3). The context is gathered by the way things are ordered and where objects are located in the DOM. But wouldn’t it be better if we can announce the context as soon as the user lands on the pagination widget itself?

Here is an example of how one might improve on Bootstrap’s pagination widget:

Now, the widget name/type is announced immediately, making the context much more understandable for screen reader users. This immediate announcement happens because we’re using ARIA (Accessible Rich Internet Application) roles and labels. The ARIA standard helps developers provide additional context to composite/complex widgets and can describe the various states (disabled, checked, busy, etc.) on these widgets.

We can improve this widget even further by introducing a few tweaks. The full, improved markup for this widget can be found here

Following the ARIA spec is instrumental in making web applications more accessible. For more information on ARIA, visit the W3C website