Problem/Motivation
The system pager template(s) contain a hardcoded h4.visually-hidden element. In some common contexts, this produces a heading in the document which does not follow heading level order. This is reported as a (best practices) accessibility issue by tools such as aXe.
- https://git.drupalcode.org/project/drupal/-/blob/9.2.x/core/modules/syst...
- https://www.w3.org/WAI/tutorials/page-structure/headings/
- https://dequeuniversity.com/rules/axe/4.3/heading-order
This was raised in Drupal Slack #accessibility channel, see there for some early discussion.
aXe's report is a best practices notification, moderate impact:
Heading levels should only increase by one.
Issue description: Ensures the order of headings is semantically correct
To solve this issue, you need to... Fix the following: Heading order invalid
Steps to reproduce
This affects all default themes in 9.2.x: Bartik, Claro, Olivero, Seven, and Stark.
- Use Devel Generate to generate 50 nodes
- View the default /node view
- Observe that the headings in the document run h1 (page title), h2 (node titles), h4 (pagination), OR
- Run aXe Devtools or other a11y checker
Proposed resolution
Remove the h4 and use a aria-label and/or role on the <nav> element
There's already an aria-labelledby on the <nav>; we could replace that with aria-label and remove the <h4> entirely. This requires that the replacement provide equivalent functionality / accessibility. Is a role also appropriate here? There may be many pagination controls on a single page.
Other options considered:
Remaining tasks
User interface changes
Hopefully, increased accessibility. Changes to HTML output.
API changes
Proposed options will change elements in default themes.
Data model changes
Release notes snippet