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
| Comment | File | Size | Author |
|---|---|---|---|
| #9 | 3228613-9.patch | 4.19 KB | gauravvvv |
Issue fork drupal-3228613
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
Comment #2
Breesy commentedComment #4
cilefen commentedIt looks as though this was supposed to have been a bug report.
Comment #8
mgiffordAs 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
Comment #9
gauravvvv commentedI have provided the patch, please review
Comment #11
zeeshan_khan commented#9 - works fine!
Thanks @Gauravvvv for the fix.
Comment #13
prabuela commentedComment #14
prabuela commentedComment #15
prabuela commentedComment #16
prabuela commentedComment #19
mgifford@PrabuEla moving the H4 to a span isn't improving the accessibility.
Comment #24
liam morlandThe solution in the merge request uses
@aria-label, which is the preferred way to provide a hidden label.Comment #25
liam morland