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.
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.