Problem/Motivation

The core pager template has an H4 header for a visually hidden title. This occurs on line 37.

<nav class="pager" role="navigation" aria-labelledby="{{ heading_id }}">
 <h4 id="{{ heading_id }}" class="visually-hidden">{{ 'Pagination'|t }}</h4>
  <ul class="pager__items js-pager__items">

The issue is accessibility crawlers mark this as a Headings are not structured issue if an h1, h2, and h3 does not come before it.

Steps to reproduce

Proposed resolution

Is there a reason the h4 is needed? The nav tag has it's role set to navigation and the aria-labelledby is set to the heading_id. Although, the heading_id is spaced by hyphens, so that may not be ideal.
This issue, https://www.drupal.org/project/drupal/issues/1912608, initially states:
"Add a visually hidden h4 element for announcing the section title, link it to the nav wrapper element via a aria-labelledby attribute."
So if we need to keep this line, can we not change the h4 to a span tag?

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

CommentFileSizeAuthor
#9 3228613-9.patch4.19 KBgauravvvv

Issue fork drupal-3228613

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

Breesy created an issue. See original summary.

Breesy’s picture

Issue summary: View changes

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

cilefen’s picture

Category: Support request » Bug report
Issue tags: -Twig, -pager

It looks as though this was supposed to have been a bug report.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

mgifford’s picture

As this article outlines, a skipped heading is not a WCAG violation https://www.tpgi.com/heading-off-confusion-when-do-headings-fail-wcag/

It's a best practice to not skip the heading levels. It is better to have the heading above the section though to ensure that screen reader users can easily navigate to the content via headings. https://usability.yale.edu/web-accessibility/articles/headings

gauravvvv’s picture

Status: Active » Needs review
StatusFileSize
new4.19 KB

I have provided the patch, please review

zeeshan_khan made their first commit to this issue’s fork.

zeeshan_khan’s picture

Status: Needs review » Reviewed & tested by the community

#9 - works fine!
Thanks @Gauravvvv for the fix.

Status: Reviewed & tested by the community » Needs work

The last submitted patch, 9: 3228613-9.patch, failed testing. View results

prabuela’s picture

Assigned: Unassigned » prabuela
prabuela’s picture

Assigned: prabuela » Unassigned
prabuela’s picture

Assigned: Unassigned » prabuela
prabuela’s picture

Assigned: prabuela » Unassigned

mgifford’s picture

@PrabuEla moving the H4 to a span isn't improving the accessibility.

Liam Morland made their first commit to this issue’s fork.

liam morland’s picture

Status: Needs work » Needs review

The solution in the merge request uses @aria-label, which is the preferred way to provide a hidden label.

liam morland’s picture

Status: Needs review » Closed (duplicate)
Related issues: +#3333401: Pager h4 causes accessibility flag on many pages