Improve entity pager accessibility for screen readers

Created on 31 January 2023, about 2 years ago

Problem/Motivation

The University of Minnesota has conducted an accessibility review on the Entity Pager module.

Below are the findings:

The keyboard and visual accessibility of the component are good. There are some screen reader access issues though:

  1. The component is operable with a screen reader, but the text and links are just read as separate elements - there is no landmark, label, or container that ties them together and communicates to a screen reader user that this is part of a navigation pager.
  2. It is also not clear to a screen reader user what part of the page the pager controls - prev/next links could be opening a new page or moving through an embedded image or article carousel.

Overall, screen reader users could probably figure out how the pager works but it would introduce some degree of confusion, especially on a page with complex structure or a lot of links.

This issue has been classified as a bug, instead of a feature request per Drupal's Accessibility statement page :

The Drupal community tries to fix accessibility issues in the development process. Everything is documented in the issue queue, and tagged for accessibility. Our community has decided that accessibility is essential. In Drupal 7, the community decided to see accessibility barriers as bugs, rather than feature requests. This resulted in us raising awareness and changing the culture of the community.

Proposed resolution

  1. Wrap the Twig output in a <nav> element to indicate the proper navigation landmark.
  2. Provide either an aria-label="pagination" attribute on the nav element, or reference a heading element via aria-labelled-by attribute. The difficult part about referencing other attributes is that they require a unique ID, which introduces some complexity. Suggest referencing Drupal Core's Twig templates for pager output and/or other pager-related contrib modules for inspiration and guidance.
  3. Document ways that pages with more complex structure or lots of links can and should reduce confusion by override the Twig template in your theme layer and/or overriding the views token output in order to provide additional context on what the pager's purpose is, and/or how links inside the pagination work, eg with extra explanations wrapped in sr-only or visually-hidden classes.

Remaining tasks

Write patch.
Seek feedback from accessibility team.

User interface changes

The wrapper "<div>" will change to a "<nav>" element.

API changes

None.

Data model changes

Not applicable.

🐛 Bug report
Status

Active

Version

2.0

Component

Code

Created by

🇪🇨Ecuador jwilson3

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Production build 0.71.5 2024