heading-order: Ensure the order of headings is semantically correct

This accessibility report identifies a moderate-severity violation of WCAG 1.3.1 (Info and Relationships) found on approximately 5% of tested pages, where the heading hierarchy is broken by an invalid heading order. Specifically, the element

used for the "Datelist" form label skips one or more previous heading levels, creating a disjointed document outline. For screen reader users who rely on a logical, nested heading structure to navigate and understand the relationship between page sections, skipped levels can make the content's organization confusing or difficult to parse. To resolve this, the Drupal template markup should be audited and adjusted to ensure that headings follow a sequential, descending order (e.g., an <h3> must precede an <h4>), maintaining a clear and accessible structural map of the page.

Note: AI was used to create the scripts that created this scanner and the corresponding report.

Identified with the Form Style module. This is just a test, but where would a H4 heading be correct in the use of a date/time form?

Pattern ID: DRU-20662ED4
Rule: axe-core - heading-order
Axe Rule URL: https://dequeuniversity.com/rules/axe/4.11/heading-order
Severity: Medium (axe impact: moderate)
WCAG SC: 1.3.1 - Info and Relationships (Level A)
Frequency: 24 of 452 pages (5%)
Selector: div[data-drupal-selector="edit-test-datelist"] > h4
XPath: //div[@data-drupal-selector="edit-test-datelist"]
Parent Context: N/A

Affected URLs (full list):

• https://drupal-core.ddev.site/admin/form_style

Conditions:

• admin (dark desktop, dark mobile, light desktop, light mobile), claro (dark desktop, dark mobile, light desktop, light mobile)

HTML Snippet

<span class="hljs-tag">&lt;<span class="hljs-name">h4</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item__label"</span>&gt;</span>Datelist<span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>

Description

Fix any of the following:
Heading order invalid

Steps to Reproduce

1. Go to https://drupal-core.ddev.site/admin/form_style
2. Use the matching context from Conditions: admin (dark desktop, dark mobile, light desktop, light mobile), claro (dark desktop, dark mobile, light desktop, light mobile)
3. Open browser DevTools and run axe.run() in the Console.
4. Confirm rule heading-order on selector div[data-drupal-selector="edit-test-datelist"] > h4.

Expected Behaviour

Element and interaction meet the mapped WCAG success criterion.

Actual Behaviour

Fix any of the following:
Heading order invalid

Impact

blind, low-vision

Suggested Fix

Heading levels must not skip. Audit the page heading hierarchy and adjust template markup.

Additional References

• Deque Axe Rule: https://dequeuniversity.com/rules/axe/4.11/heading-order
• WCAG Understanding: https://www.w3.org/WAI/WCAG22/Understanding/131.html
• ACCESSIBILITY.md Trusted Sources: https://mgifford.github.io/ACCESSIBILITY.md/examples/TRUSTED_SOURCES.yaml
• WAI - Headings tutorial: https://www.w3.org/WAI/tutorials/page-structure/headings/
• Search related Drupal accessibility issues (rule + selector/template): https://www.drupal.org/project/issues/search?text=heading-order%20data-drupal-selector&projects=Drupal+core&assigned=&submitted=&project_issue_followers=&status%5B%5D=Open&issue_tags_op=%3D&issue_tags=Accessibility

Testing Environment

• Browser: Chromium (via Playwright)
• OS: macOS
• Tool: axe-core via @axe-core/playwright
• Base URL: https://drupal-core.ddev.site

Tracking IDs

• Pattern ID: DRU-20662ED4
• Instance IDs: INS-F67227FA, INS-A876FF70, INS-FD2C0F28, INS-622EF2AF, INS-6C963C7F, INS-B0239B5D, INS-E6A19988, INS-568F7E0B, INS-AB298E5F, INS-166D9CDA, INS-8E91B483, INS-A5BF27C7, INS-62CA3978, INS-2B45D5B7, INS-49F53FC9, INS-B2A30286, INS-F48714B5, INS-5C51E39F, INS-F8772D3C, INS-B696306F, INS-79516607, INS-5A88424C, INS-1940F8CC, INS-9676EF18