Pagination for smaller numbers of pages does not show current page number

[CharlotteDowns]

This issue is from May 2023 external accessibility audit report.

Usability issue

Issue ID: DAC_Usability_Pagination_01

URLs: https://govuk-frontend-pr-3503.herokuapp.com/full-page-examples/search-three-pages

Screen shots

The pagination method used does not indicate to users which page they are currently on and relies on the user to decipher this information from the context of the previous and next links, which some users may not be able to do with ease.

Current code ref(s)

#main-content > form > div.govuk-grid-row > div.govuk-grid-column-two-thirds > nav

Low vision user comments

“While viewing this page I found it difficult to determine which page I am currently viewing because there is no number being displayed at the bottom of the page therefore, I cannot determine which page I am on. I found the ‘Navigational page’ buttons that is displayed on journey 5 to be clearer for me to determine which page I am currently viewing; this would also help me to navigate between each page with ease.”

Cognitive user comments

"It was difficult for me to understand exactly what page I’m on with this style of pagination, as it doesn’t explicitly state what page the user is on. Others encountering this may find it just as confusing to use and understand. The pagination in Journey 5 is a much better design choice for finding pages you’re on and what ones you can navigate to.”

Solution

Consider using the pagination method which indicates the current page for users and not just the next and previous pages.

[querkmachine]

I think the ismplest way of doing this would be a visually-hidden element with info on the current page in it and aria-current="page". Existing implementations would need updating to add this previously unnecessary information, however.

[dav-idc]

@querkmachine do you know if this would be a 'breaking change' for existing implementations of the 'previous / next' pagination variant?

[querkmachine]

@davidc-gds Assuming we would only be adding in new 'stuff', rather than changing or removing what's already there, then this wouldn't be a breaking change, no.

[36degrees]

Rather than making a code change, this could also be an argument for not using the previous / next style of pagination for numbered pages of results.

I think the primary use case for this style of navigation is for linking between e.g. pages of guidance designed to be read sequentially, where the previous and next page are identified by their title rather than a number (such as in this example).

Although there are other examples of using the previous / next style for numbered pages (like in GOV.UK's publishing component guide) I'm not sure how often it's used in practise, nor whether we've done any research on it.

So my suggestion would be to instead explore:

• restructuring the guidance to remove the example using previous / next for numbered pages, and tell users to use the 'numbered' pagination for pages of results, regardless of the number of pages.
• replacing the example in the review app with an example of guidance with pagination (similar to https://www.gov.uk/renew-lorry-bus-coach-licence)

If we were to make a change to the component, I think we should be doing so with 'navigating sequential pages of guidance' as the primary use case in mind.

[calvin-lau-sig7]

Just weighing in that @36degrees's suggestions sound sensible to slightly adjusting the use case for prev/next pagination.

With guidance, the page numbers feel like a less-useful placeholder for descriptive labels since a) it's not supposed to be used for linear journeys and b) templates that use this like the mainstream guide example has a table of contents.

And subjectively from me, it does look a bit odd to me in the search results example.

[querkmachine]

@CharlotteDowns We've now merged a change to the guidance to clarify the expected use case for this kind of pagination, based on the previous two comments. https://github.com/alphagov/govuk-design-system/pull/2964

As the component no longer explicitly numbers the pages, we don't think it needs to include what the current page is either. Do you feel this satisfies the problem originally raised in the audit?

[dav-idc]

Hey all, for what it's worth, I did stumble across a version of the pagination component in the wild last week, and that one did use the 'Page 1 of X' style. I think it could also be argued that even with the current "next page" and "previous page" stuff, it might be good to have the current page info available? I have no idea how that would work in practice though.

Should we perhaps add even stronger guidance discouraging the use of numbers in the 'bloc' pagination style though? And say something like:

"The text under 'next' and 'previous' needs to describe the content it links to. Ideally, it should be the page's title."

[CharlotteDowns]

I agree, I think this does satisfy the problem originally raised in the audit.

I also agree with the point that David raises to make stronger guidance to discourage numbers. Maybe we should collect these 'in the wild' examples somewhere so we can really identify why the pagination component is being used in that way and whether there is in fact a need to reference the current page number in those cases.