empty-heading: Ensure headings have discernible text

This accessibility report flags a minor-severity violation across approximately 7% of tested pages, where certain <h3> elements are rendered without any content or programmatic labels. Empty headings create "dead ends" in a page's structure, confusing screen reader users who use heading navigation to jump between sections of content. Because the element lacks visible text, an aria-label, or an aria-labelledby attribute, it provides no information about the section it is meant to introduce. To resolve this, these headings should either be populated with descriptive text, properly labeled using ARIA attributes if the text is provided elsewhere, or removed entirely if they serve no structural purpose, ensuring a clean and meaningful document outline for all users.

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

Pattern ID: DRU-23F4C000
Rule: axe-core - empty-heading
Axe Rule URL: https://dequeuniversity.com/rules/axe/4.11/empty-heading
Severity: Low (axe impact: minor)
WCAG SC: unknown - See axe docs (Level ?)
Frequency: 32 of 452 pages (7%)
Selector: h3:nth-child(3)
XPath: //h3:nth-child(3)
Parent Context: N/A

Affected URLs (full list):

• https://drupal-core.ddev.site/dialog
• /tabs

Conditions:

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

HTML Snippet

<span class="hljs-section">&lt;h3&gt;</span><span class="hljs-section">&lt;/h3&gt;</span>

Description

Fix any of the following:
Element does not have text that is visible to screen readers
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute

Steps to Reproduce

1. This issue may require opening a dialog/off-canvas panel before running axe.
2. Go to https://drupal-core.ddev.site/dialog
3. Use the matching context from Conditions: admin (dark desktop, dark mobile, light desktop, light mobile), claro (dark desktop, dark mobile, light desktop, light mobile)
4. Open browser DevTools and run axe.run() in the Console.
5. Confirm rule empty-heading on selector h3:nth-child(3).

Expected Behaviour

Element and interaction meet the mapped WCAG success criterion.

Actual Behaviour

Fix any of the following:
Element does not have text that is visible to screen readers
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute

Impact

users with disabilities

Suggested Fix

See axe documentation.

Additional References

• Deque Axe Rule: https://dequeuniversity.com/rules/axe/4.11/empty-heading
• 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=empty-heading%20h3&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-23F4C000
• Instance IDs: INS-EBD6D1DE, INS-FF513257, INS-7B033AB7, INS-77B617FF, INS-FD01376B, INS-5E2BEBF0, INS-5577EA5A, INS-C7957CDF, INS-DE731FB7, INS-CC6C10C4, INS-3C95FFB2, INS-A8CCBEE6, INS-7E1BB7BA, INS-2B805866, INS-BD7097D8, INS-1DD9AA40, INS-C4C1AE18, INS-8B44A1E8, INS-F632ECFD, INS-B71E15EB, INS-E71175CB, INS-F4F655E7, INS-93C0777E, INS-8004C104, INS-B35FCB9C, INS-B4B1CBE2, INS-423F682C, INS-E27B1D6C, INS-BFB35709, INS-A3011FB8, INS-A4B2A699, INS-33DF35E6