Pagination - Githubissues

Proposed accessible pagination component and search results pattern. The pattern was added to the HMRC backlog by the working group after a presentation by Dan Lacey (10/09/21). The majority of the information below is taken from that presentation...

Overview

Many of our services have required a search results pagination component & pattern that is intuitive, recognisable to users and accessible to users of assistive technology.

There are already a variety of pagination patterns and implementations across different GOV and HMRC services. There is little consistency within these patterns, although they all have their merits and drawbacks.

While some of these patterns use some good concepts in terms of visual design and accessibility, there doesn’t seem to be a recognised pattern that fulfils most or all of the requirements in terms of accessibility.

Component requirements based on user needs

Provide a recognisable pagination pattern that users will feel comfortable to use with familiar controls and visual elements
Provide a consistent experience across a range of services
Allow keyboard navigation and other assistive technology tools to meet accessibility needs
Provide a non-intrusive screen-reader experience to meet the needs of partially sighted and blind users

Implementation examples

Register of fair rents

https://www.tax.service.gov.uk/check-register-fair-rents/search

Uses HTML lists
Number of results not a table caption
Overuse of aria on navigation items

Ministry of Justice

https://design-patterns.service.justice.gov.uk/components/pagination/

Number of results not in table caption
List items used
Side by side layout (pagination and number of items)

HMCTS

https://hmcts-design-system.herokuapp.com/components/pagination

Number of results not in table caption
List items used
Side by side layout (pagination and number of items)

Some examples of HMRC services using pagination

CDS Financials
UK Trade Info
Protect Intellectual Property Rights (cited as future improvement)
Advance Tariff Rulings

Existing patterns

There is a number of patterns available already within different GOV.UK services as well as within the HMRC itself. The work on this proposed HMRC pattern extends the work already undertaken by two teams:

Her Majesty’s Courts & Tribunal Service (HMCTS) Design System

https://hmcts-design-system.herokuapp.com/components/pagination

Ministry of Justice (MoJ) Design System

https://design-patterns.service.justice.gov.uk/components/pagination/

The MoJ / HMCTS pattern

Proposed component/pattern

There isn’t much of a visual change to the MoJ & HMCTS pattern, however:

To improve readability, the pagination and the number of results are vertically stacked.
The number of results includes the search term to add context.
The number of results (and the search term) is a part of the table caption.

Almost all of the improvements to these patterns is to the underlying HTML code structure.

Code improvements

To enhance accessibility, there has been a number of changes to the HTML and semantic structure of the code.

Number of results: provide context using the table caption

The advantage of vertically stacking the pagination and the number of results information is that the latter can be placed into the table’s caption element.

Provides context to users to understand the relationship between the search and the table of results
Meets WCAG requirement: https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation.html

Use aria-label to describe the pagination navigation element to screen-reader users

In previous iterations of this component, hidden paragraph text is used with an aria label (aria-labelledby) to describe the component as ‘Search results pagination’.

In the proposed version, the paragraph text is removed and the aria control placed directly on the navigation component, streamlining the code:

Pagination: enhancing the HTML for accessibility

In the MoJ / HMCTS pattern, list items are used for each page number and link. For links to pages, list items

have been replaced with span tags.

Screen-readers users do not have to listen to repeated list items and only the pagination number in the link is voiced for each page link.

Current page described by aria-label

Previous iterations have the current page listed outside of an anchor tag, with no description to tell users of assistive technologies that the number is the current active page of results.

An aria-control has been added to the current page to add context for screen-reader users.

Add aria controls to ellipses that indicate a gap in pages

In previous iterations, ellipses were used to indicate a gap between pages, where a large number of pages is displayed.

Aria controls and visually hidden text have been added to the ellipses to indicate the gap in pages to screen-reader users.

Use aria-controls for previous / next pages

In previous iterations, the ‘previous’ and ‘next’ links to pages had hidden-from-screen text for screen-reader users (‘previous set of pages’), but still read out the words ‘previous’. Screen readers would therefore read “Previous previous set of pages”.

Added aria-controls to the previous and next links and made it clear that the previous and next link move to the next page, not the next set, and shortened the number of words declared.