Skip to content

a11y: Fix heading-order accessibility violations in callouts and reference banners - #1598

Open
coseeian wants to merge 2 commits into
processing:mainfrom
coseeian:a11y-heading-order
Open

coseeian wants to merge 2 commits into
processing:mainfrom
coseeian:a11y-heading-order

Conversation

@coseeian

@coseeian coseeian commented Sep 14, 2026

Copy link
Copy Markdown
Collaborator

This PR clears up the heading-order accessibility violations from our a11y page tests. This only adjusts the heading structure under the hood—visual styling remains completely unchanged!

  • Callout titles: Replaced hardcoded <h5> elements with <p class="callout-title"> and added role="note" to the container. This fixes document outline skips (e.g., jumping from <h2> to <h5>) by removing callout titles from the heading tree while preserving their exact visual look.

  • "Get Started" tutorial heading skips: Fixed two instances where #### headings sat directly under ## sections (jumping from <h2> straight to <h4>). Updated both #### Default Code and #### Tip to <h3> to keep the heading hierarchy linear.

  • Reference banner titles: Updated the webgpuOnly, beta, and deprecated banners, which were using hardcoded <h5> elements directly below the page <h1>. Switched these to <p class="callout-title"> to mirror the Callout fix.

@coseeian coseeian added the Accessibility: Best Practice No obvious current impact, but which may lead to problems in the future label Sep 14, 2026
@coseeian
coseeian marked this pull request as ready for review September 14, 2026 12:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Accessibility: Best Practice No obvious current impact, but which may lead to problems in the future

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant