Test results

Pick a model to see how accessible its components are, with the accessibility skill off and on.

Gemini 4 Argon

Skill version 2.3

Results for 22 components, each generated 3 times.Each acceptance criterion is counted once per component if it fails in any generation.
Measure	Skill off	Skill on
Failed acceptance criteria	22	0
of which WCAG	15	0
of which Best practice	7	0
Total cost (US dollars)	$4.84	$10.85

Accordion

Results, totals across all generations

Failed acceptance criteria

Each acceptance criterion is counted once per component if it fails in any generation.

Skill off

0 fails

WCAG: 0 fails
Best practice: 0 fails

Skill on

0 fails

WCAG: 0 fails
Best practice: 0 fails

Efficiency, average per generation

Input tokens include cache reads.

Cost in USD

Input tokens

Skill off: 9,996 tokens
Skill on: 86,433 tokens

Output tokens

Skill off: 4,694 tokens
Skill on: 5,040 tokens

Turns

Skill off: 4 turns
Skill on: 7 turns

Time

Skill off: 86 seconds
Skill on: 87 seconds

Cost

Skill off: $0.06
Skill on: $0.11

Generated components

Prompt given to the model

Build a Frequently Asked Questions section in a single self-contained HTML file (inline CSS and JS, no build step, no external libraries). It has three questions, each shown as a clickable heading; clicking a heading shows or hides that question's answer. All three answers are hidden when the page first loads. Use these exact questions and answers: 1. Question: "How do I reset my password?" Answer: "Select Forgotten password on the sign-in page and follow the link we email you." 2. Question: "Can I change my delivery address after ordering?" Answer: "Yes, until the order is dispatched. Edit it under Orders in your account." 3. Question: "Do you ship internationally?" Answer: "We ship to the UK, Ireland, and the EU. Other regions are coming soon." Output the complete code in one HTML code block.

Skill off: Generation 1, skill off (opens in a new tab)
Generation 2, skill off (opens in a new tab)
Generation 3, skill off (opens in a new tab)
Skill on: Generation 1, skill on (opens in a new tab)
Generation 2, skill on (opens in a new tab)
Generation 3, skill on (opens in a new tab)

Acceptance criteria

Showing 16 of 16 criteria

Semantic markup7 criteria

The accordion header's role of button is included in the accessibility tree.WCAG 4.1.2Automated
Skill off
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
Skill on
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
The accordion header's accessible name is included in the accessibility tree.WCAG 4.1.2Automated
Skill off
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
Skill on
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
The accordion header's label has a role of heading in the accessibility tree.WCAG 1.3.1Automated
Skill off
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
Skill on
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
The accordion header's expanded or collapsed state is included in the accessibility tree.WCAG 4.1.2Automated
Skill off
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
Skill on
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
The accordion header's button has aria-controls set to the ID of the element containing the accordion panel content.WCAG 1.3.1Automated
Skill off
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
Skill on
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
When the accordion is collapsed, the content in the accordion panel is removed from the accessibility API.WCAG 1.3.2Automated
Skill off
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
Skill on
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
The content in the accordion panel comes directly after the accordion header in the accessibility tree.WCAG 1.3.2Browser
Skill off
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
Skill on
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass

Keyboard6 criteria

The accordion header is focusable using a keyboard.WCAG 2.1.1Browser
Skill off
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
Skill on
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
The accordion header has a focus style when it receives focus using a keyboard.WCAG 2.4.7Browser
Skill off
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
Skill on
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
The keyboard focus style still renders in forced-colours mode (e.g. Windows High Contrast Mode).Best practiceBrowser
Skill off
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
Skill on
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
When focus is on a collapsed accordion header, pressing Enter expands the panel and all its content is included in the accessibility API.WCAG 1.3.2Browser
Skill off
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
Skill on
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
When focus is on an expanded accordion header, pressing Enter collapses the panel and all its content is removed from the accessibility API.WCAG 1.3.2Browser
Skill off
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
Skill on
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
When the accordion header is activated, focus stays on the accordion header.WCAG 2.4.3Browser
Skill off
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
Skill on
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass

Visual design2 criteria

All text meets the minimum contrast ratio of 4.5:1 against the background colours, or 3:1 for large-scale text.WCAG 1.4.3Automated
Skill off
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
Skill on
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
If the accordion header uses a custom focus style, the focus indicator has a contrast ratio of at least 3:1 against its background colours.WCAG 1.4.11Browser
Skill off
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
Skill on
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass

Adaptive UI1 criterion

The accordion can be viewed at smaller screen widths (320px) without loss of content or functionality. The user does not have to scroll horizontally to use it.WCAG 1.4.10Browser
Skill off
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
Skill on
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass