Results / Headless UI

Headless UI accordion

96% against @headlessui/react@2.2.10. Every check below cites the clause it measures, and every failure carries the command that reproduces it.

Reproduce this whole run

Serve the adapter from a clone of the repository, then:

npx @railing-dev/runner run --target headlessui --component accordion \
  --repeat 3 \
  --base-url http://localhost:5180

Or replay it without running anything: download the Playwright trace and open it with npx playwright show-trace.

One or more header controls are not contained in a heading.

Check

accordion.header-is-heading

Status

fail

Severity

moderate

Why it matters

Screen reader users navigate documents by heading. If accordion headers are not headings, an entire page structure disappears from the shortcut that most users rely on to move around it.

Expected

each control inside an h1–h6 or role=heading element

Measured

hr-header-1, hr-header-2, hr-header-3 have no heading ancestor

Measured against

APG pattern · WCAG 1.3.1 Info and Relationships

Reproduce

npx @railing-dev/runner run --target headlessui --component accordion \
  --only accordion.header-is-heading \
  --base-url http://localhost:5180

Each header control exposes role=button

Check: accordion.trigger-is-button
Status: pass
Severity: serious
Why it matters: The control that expands a section must be announced as a button, or the user is not told it can be operated at all.
Measured against: APG pattern · WCAG 4.1.2 Name, Role, Value

Each header control has an accessible name

Check: accordion.trigger-has-accessible-name
Status: pass
Severity: serious
Why it matters: An unnamed control cannot be chosen deliberately from a list of them.
Measured against: APG pattern · WCAG 4.1.2 Name, Role, Value

Collapsed sections expose aria-expanded=false

Check: accordion.collapsed-state-communicated
Status: pass
Severity: serious
Why it matters: Without it the user is not told the control expands anything, so a collapsed accordion reads as a list of inert buttons.
Measured against: APG pattern · WCAG 4.1.2 Name, Role, Value

The header control references its panel with aria-controls

Check: accordion.trigger-controls-panel
Status: pass
Severity: moderate
Why it matters: The relationship is what lets assistive technology move from the control to the content it reveals.
Measured against: APG pattern · WCAG 1.3.1 Info and Relationships

Collapsed panels are hidden from assistive technology

Check: accordion.collapsed-panel-not-exposed
Status: pass
Severity: serious
Why it matters: A sighted user sees nothing. If the content is still in the accessibility tree, a screen reader user reads sections that appear closed, with no way to tell where one ends and the next begins.
Measured against: APG pattern · WCAG 4.1.2 Name, Role, Value

Enter expands the focused section

Check: accordion.enter-expands
Status: pass
Severity: blocker
Why it matters: The primary activation key. Without it the content is unreachable by keyboard.
Measured against: APG pattern · WCAG 2.1.1 Keyboard

Space expands the focused section

Check: accordion.space-expands
Status: pass
Severity: serious
Why it matters: The APG requires both Enter and Space on the header. Space is routinely missed by implementations that attach a click handler to a non-button element.
Measured against: APG pattern · WCAG 2.1.1 Keyboard

An expanded panel is exposed and reveals its content

Check: accordion.expanded-panel-exposed
Status: pass
Severity: blocker
Why it matters: A header reporting itself expanded while its content stays hidden from assistive technology is worse than one that does nothing, because the announcement and the reality disagree.
Measured against: APG pattern · WCAG 4.1.2 Name, Role, Value

Tab moves between accordion headers

Check: accordion.headers-are-tab-stops
Status: pass
Severity: serious
Why it matters: Accordion headers are each a stop in the tab sequence, the opposite of a tablist, which is a single stop navigated with arrows. Implementations that copy tab behaviour here strand the user on the first header.
Measured against: APG pattern · WCAG 2.4.3 Focus Order

Activating an expanded header collapses it

Check: accordion.collapses-again
Status: pass
Severity: serious
Why it matters: A section that opens and cannot be closed leaves the user unable to get back to a scannable list, which is the whole reason for using an accordion.
Measured against: APG pattern · WCAG 2.1.1 Keyboard

What this cannot tell you

A high score means no violations were detected by automated testing. It does not mean the component is accessible. Automated tests cannot judge whether a label is meaningful, whether a reading order makes sense, or whether the experience is usable with a screen reader. Those need human judgement and disabled users. This is a floor, not a ceiling.