USWDS v3 - Pagination - Accessibility review

[caw310]

Issue Description

We need to conduct a full accessibility review of the Pagination component. The component can be viewed here: https://design.va.gov/components/pagination

USWDS https://designsystem.digital.gov/components/pagination/

Tasks

• [x] Full accessibility review of the component is completed
• [x] Add descriptions of any issues found to this ticket
  • [x] If any problems are found, add screen recordings and/or screenshots to comments on this ticket that show the problem.
• [x] If necessary, discuss any accessibility issues found with the engineer who developed the component
• [x] Re-review any fixes the developer makes to the component

Acceptance Criteria

• [ ] Component has been reviewed for accessibility issues
• [ ] Any accessibility issues have been addressed

[laflannery]

I was investigating an axe issue flagged for pagination and was routed to this ticket so I wanted to note the issue and possible solution as it does relate to accessibility:

Issue: The ellipsis that is currently being used for presentation to truncate the pagination is done using <li role=presentation> in the code. This is being flagged in axe for

<ul> and <ol> must only directly contain <li>, <script> or <template> elements.

After investigating I found that this seems to be a common pattern, we do it here, it is done in the USWDS component and it is done in Drupal. and they all get flagged for the same issue.

Besides the axe issue, using role presentation in this way could cause confusion for 2 reasons when screen reader users are reading through the navigation (not tabbing through but reading through):

1. At the start of the list, the number of items in the list will be read out and the ellipsis item will not be counted in the total which may be confusing as there is now 1 more element than they were expecting when going through.
2. When reading through, the ellipsis element is blank, it’s silent. If the user is reading one item at a time, they may wonder what has happened if they are on an item and nothing is being announced.

Proposed solution:

1. Remove the role presentation from the <li> containing the ellipsis
2. Within that same <li>, add a <span> that can be visually hidden, with text that says “Skipping pages X to XX” (whichever page numbers have been truncated).

[mgifford]

There are some parallel efforts going on with the USWDS and now Drupal — thanks @laflannery 

uswds/uswds#5022

Would be good to prioritize this and come up with a common solution that not only addresses axe's concerns, but those of users as well.

[caw310]

This will carry over into sprint 36 due to sick leave.

[rsmithadhoc]

Issues

I labeled each as Must, Should, Consider to rank the severity of the issue.

Axe Scan

• Must List element has direct children that are not allowed: [role=presentation]
  • Related Node

    <li class="usa-pagination__item usa-pagination__overflow" aria-label="ellipsis indicating non-visible pages" role="presentation"><span>...</span></li>

  • 
  • Recommendation: Remove role=presentation. The presentation attribute hides that element's semantics from assistive technology. For this <li>, it would no longer be considered a list item. I believe it should be a list item, so those using assistive technology are able to see that there is a gap in page numbers. See ARIA: presentation role and axe-core 4.6 for more information.

Visual, Color and Color Contrast

• Consider: The ellipsis uses three periods ". . ." instead of the ellipsis character "…".
  • 
  • Recommendation: Use the ellipsis character. This could also help with screen readers to avoid reading out "period period period".
• Should: For the Previous and Next links, they are only distinguished as links by their color.
  • 
  • Recommendation: The source code looks like there should be an icon showing. We should either get that to show or work with design and consider adding an underline to these links.

Zoom and Window Size

• Should: When zoomed in and on a smaller screen, the Previous and Next link gets hidden.
  • 
  • Recommendation: Do not hide the links on smaller screens.

Screen Reader

• Must: Navigation landmark does not have a name. When multiple <nav> elements are on the same page, they should be given a unique name for accessibility.
  • Recommendation: Add an aria-label="pagination" to the <nav> element.
• Consider: Pages are just read out as numbers, "1, 2, 3", etc.
  • Recommendation: Add text that is visually hidden before the number that says "Page".
• Consider: First and last pages are not indicated.
  • Recommendation: Add text that is visually hidden after the page number for the first page that says "(first page)" and the last page that says "(last page)".

[rsmithadhoc]

I created the following tickets to address these issues:

• https://app.zenhub.com/workspaces/platform-design-system-5f8de67192551b0012ebb802/issues/gh/department-of-veterans-affairs/vets-design-system-documentation/2111
• https://app.zenhub.com/workspaces/platform-design-system-5f8de67192551b0012ebb802/issues/gh/department-of-veterans-affairs/vets-design-system-documentation/2112
• https://app.zenhub.com/workspaces/platform-design-system-5f8de67192551b0012ebb802/issues/gh/department-of-veterans-affairs/vets-design-system-documentation/2113
• https://app.zenhub.com/workspaces/platform-design-system-5f8de67192551b0012ebb802/issues/gh/department-of-veterans-affairs/vets-design-system-documentation/2114
• https://app.zenhub.com/workspaces/platform-design-system-5f8de67192551b0012ebb802/issues/gh/department-of-veterans-affairs/vets-design-system-documentation/2115