Quantcast
Channel: Issues for Drupal core
Viewing all articles
Browse latest Browse all 294681

H4 in page.html.twig Causes Accessibility Error

$
0
0

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


Viewing all articles
Browse latest Browse all 294681

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>