Screen reader test: headings inside <summary>

This page tests whether assistive tech announces an <h2> nested inside <summary>, and whether a <button> inside the same <summary> is perceived as a separate, focusable control.

Plain section heading (control)

This h2 sits in normal flow with no <summary> wrapper. Use it as a baseline for how your screen reader announces an h2 on this page.

Accordions

Each accordion below tests a different combination.

Case A — h2 inside summary

The summary contains only an h2. Question: does your screen reader announce both the heading level and the disclosure (expanded/collapsed) state? Or does one swallow the other?

Case B — plain text in summary (no heading)

Baseline: a normal disclosure with no heading. Compare announcement against Case A.

Case C — h2 and button both inside summary

The summary holds an h2 and an inline button. Questions:

  • Is the button reachable as its own focusable element (Tab key)?
  • When focused, is it announced as a button distinct from the disclosure?
  • Does activating the button (Enter/Space) toggle the details, fire the button, or both?
Case D — button inside summary, no heading

Same nested-button question as Case C, but without the heading, to isolate the heading variable.

Sample form (extra context)

A tiny form so the page has a few more landmarks to navigate.