v136 · css

Deprecate special font size rules for H1 within some elements

The HTML spec contains a list of special rules for <h1> tags nested within <article>, <aside>, <nav>, or <section> tags: https://html.spec.whatwg.org/multipage/rendering.html#sections-and-headings These special rules are deprecated, because they cause accessibility issues. Namely, they visually reduce the font size for nested <h1>s so that they "look"

concepts

  1. H1 Rules

    Drops the UA stylesheet quirk where nested <h1>s shrink.

  2. Accessibility tree mismatch

    The actual motivation: the UA rule changed the painted size but not the heading level. Side-by-side: rendered document vs. accessibility tree, with a per-heading verdict.

  3. Sectioning Audit

    Paste any markup and the auditor flags every <h1> nested inside article/section/aside/nav — the elements whose UA-shrink rule is being removed. Live render shows what the page now looks like.

  4. Migration calculator

    Paste HTML with nested <h1> elements. The calculator shows the old computed font sizes (1.5em → 1.17em → 1em → 0.83em per nesting level) vs the flat 2em after Chrome 136, with a before/after render and auto-generated CSS to preserve the old appearance.

why it shipped

The current behavior is an accessibility problem: the font size is reduced as if an <h2> is being used, but the a11y tree still shows the item as an <h1>. By removing these special rules, we'll nudge developers to do the "better" thing of actually using an <h2>.

references