Results / Chakra UI

Chakra UI tabs

100% against @chakra-ui/react@3.36.1, @emotion/react@11.14.0. 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 chakra --component tabs \
  --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.

The tab container exposes role=tablist

Check: tabs.tablist-has-role
Status: pass
Severity: serious
Why it matters: The tablist role is what tells assistive technology these are tabs rather than a row of buttons, and enables the navigation that goes with them.
Measured against: APG pattern · WCAG 4.1.2 Name, Role, Value

Each tab exposes role=tab

Check: tabs.tabs-have-tab-role
Status: pass
Severity: serious
Why it matters: Without it a screen reader cannot announce position within the set or offer tab navigation.
Measured against: APG pattern · WCAG 4.1.2 Name, Role, Value

Each tab has an accessible name

Check: tabs.tab-has-accessible-name
Status: pass
Severity: serious
Why it matters: An unnamed tab is announced as an empty tab and cannot be chosen deliberately.
Measured against: APG pattern · WCAG 4.1.2 Name, Role, Value

The selected panel exposes role=tabpanel

Check: tabs.panel-has-tabpanel-role
Status: pass
Severity: serious
Why it matters: The tabpanel role is what associates the revealed content with the tab that revealed it, rather than leaving it as loose content on the page.
Measured against: APG pattern · WCAG 4.1.2 Name, Role, Value

Exactly one tab is marked selected

Check: tabs.selected-tab-communicated
Status: pass
Severity: serious
Why it matters: aria-selected is the only way a screen reader user knows which tab they are on. Marking none, or several, makes the set unreadable.
Measured against: APG pattern · WCAG 4.1.2 Name, Role, Value

The panel takes its accessible name from its tab

Check: tabs.panel-labelled-by-tab
Status: pass
Severity: moderate
Why it matters: On entering the panel, a screen reader announces its name. Taking it from the tab is what tells the user which panel they are in.
Measured against: APG pattern · WCAG 1.3.1 Info and Relationships

The tab references its panel with aria-controls

Check: tabs.tab-controls-panel
Status: pass
Severity: moderate
Why it matters: The relationship lets assistive technology move from a tab straight to the content it reveals, rather than hunting for it.
Measured against: APG pattern · WCAG 1.3.1 Info and Relationships

Unselected panels are hidden from assistive technology

Check: tabs.unselected-panels-not-exposed
Status: pass
Severity: serious
Why it matters: A sighted user sees one panel. If the others remain in the accessibility tree, a screen reader user reads content that is visually hidden and has no way to tell which panel they are in.
Measured against: APG pattern · WCAG 4.1.2 Name, Role, Value

Tab moves focus to the selected tab

Check: tabs.tab-key-reaches-selected-tab
Status: pass
Severity: blocker
Why it matters: If Tab does not reach the tablist, a keyboard user cannot change tabs at all.
Measured against: APG pattern · WCAG 2.1.1 Keyboard

The tablist is a single stop in the tab sequence

Check: tabs.tablist-is-one-tab-stop
Status: pass
Severity: serious
Why it matters: Tabs are navigated with arrow keys, not the Tab key. Leaving every tab in the tab sequence forces a keyboard user to step through all of them to reach the page content, and is the usual result of building tabs out of a row of buttons.
Measured against: APG pattern · WCAG 2.4.3 Focus Order

Right Arrow moves focus to the next tab

Check: tabs.arrow-moves-between-tabs
Status: pass
Severity: blocker
Why it matters: Arrow keys are how the APG pattern navigates a tablist. Without them a keyboard user can reach the selected tab and no other.
Measured against: APG pattern · WCAG 2.1.1 Keyboard

Keyboard navigation can select a different tab

Check: tabs.activation-selects-tab
Status: pass
Severity: blocker
Why it matters: Selecting a tab is the point of the component. Accepts either activation model the APG permits.
Measured against: APG pattern · WCAG 2.1.1 Keyboard

Selecting a tab reveals its panel

Check: tabs.activation-reveals-panel
Status: pass
Severity: blocker
Why it matters: A tab that reports itself selected while the wrong content is showing is worse than one that does nothing, because the announcement and the content disagree.
Measured against: APG pattern · WCAG 4.1.2 Name, Role, Value

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.