Pagination
Opened this issue · 1 comments
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
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.
GDS are now actively working on a pagination pattern, so we’ve paused work on the HMRC version. Comparison of the current draft GDS/HMRC patterns:
paginationComparison.pdf
Our version was almost ready for release, but it makes more sense for a pagination pattern to be part of the main design system.
Improvements made since our last post:
- Recoded to be suitable for use as a pattern across many services (including further refinements for accessibility and device responsiveness)
- If search results are less than 2 pages, the pagination summary is shown but pagination links are not
- Truncation logic enhanced (included in pattern so this won’t need to be redeveloped by service teams)
Prototype
Link: https://hmrc-pagination-prototype.herokuapp.com/
Username: pagination
Password: pagination
Basic:
Truncated:
First page active:
Last page active:
Even number of result pages:
Code: https://github.com/hmrc/hmrc-frontend/compare/pagination