Accessible Pagination for Single-Page Applications

This is an example of accessible pagination, adapted for non-navigating content.

See Accessible Pagination for the original page-navigating example this was based on.

Pagination demo

Notes about this example

This example is adapted for cases where the links load dynamic views, rather than navigating to different pages. Each of the links contains a different hash value, and the scripting uses the hashchange event to detect the changes and apply the corresponding states.

In practice, the hashchange event could also be used to load content, convey status information (such as a Loading message), and update the content view. The updated content might also require some focus management. The article Accessible Asynchronous Content describes how updates such as this can be conveyed and managed in an accessible way.

This example also demonstrates how the pagination can be additionally described with summary text, such as you might find on a page of search results. The <nav> has an [aria-describedby] attribute that associates it with an inner <p>, the text of which is dynamically updated.