Test results

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

Claude Sonnet 5.5

Skill version 2.3

Totals for the whole run, across 3 generations of each of the 22 components
Measure	Skill off	Skill on
Failed acceptance criteria	52	1
of which WCAG	33	0
of which Best practice	19	1
Total cost (US dollars)	$2.98	$10.67
Input tokens	443,859	7.4 million
Output tokens	231,117	536,693

Text field

Results, totals across all generations

Cost in USD

Failed acceptance criteria

Skill off

0 fails

WCAG: 0 fails
Best practice: 0 fails

Skill on

0 fails

WCAG: 0 fails
Best practice: 0 fails

Total cost

Skill off: $0.17
Skill on: $0.49

Efficiency, average per generation

Input tokens include cache reads.

Input tokens

Skill off: 5,240 tokens
Skill on: 105,576 tokens

Output tokens

Skill off: 4,512 tokens
Skill on: 8,595 tokens

Turns

Skill off: 2 turns
Skill on: 7 turns

Time

Skill off: 27 seconds
Skill on: 51 seconds

Cost

Skill off: $0.06
Skill on: $0.16

Prompt given to the model

Build an account details form in a single self-contained HTML file (inline CSS and JS, no build step, no external libraries). Include two text input fields, each with its label shown above the field and a short hint shown below the label: - Full name: hint "As it appears on your bank card." This field is mandatory and currently contains the value "Alex Taylor". - Email address: hint "We'll only use this to email your order confirmation." This field is mandatory and currently contains the value "alex.taylor", which is not a valid email address, so this field is in error: show the validation message "Enter an email address in the format name@example.com." for the Email address field. Output the complete code in one HTML code block.

Generated code

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)

Showing 18 of 18 criteria

Labels and messaging1 criterion

Each text field has a permanent visible label. It does not use placeholder text for its label.WCAG 3.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

Semantic markup9 criteria

The text field's role 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 text field has an accessible name 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
Each text field's accessible name contains the text of its visible label.WCAG 2.5.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
Each text field's accessible name matches its visible label, or at least starts with the text of the visible label.Best practiceAutomated
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 text field's current value 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 text field has an accessible description (a hint that helps people enter the right data) included 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 text field's required state is included 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 text field identifies its input purpose with an appropriate autocomplete token.WCAG 1.3.5Automated
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 error message is programmatically associated with the text field and is included 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

Keyboard4 criteria

The text field 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
People can enter a value into the text field 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 text field 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

Visual design4 criteria

The error state does not use colour as the only method to indicate an error.WCAG 1.4.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
All text meets the minimum contrast ratio of 4.5:1 against the background colour, 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 text field uses a custom focus style, the focus indicator has a contrast ratio of at least 3:1 against its background colour.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
The text field's visible boundary (its border, or its fill where there is no border) has a contrast ratio of at least 3:1 against the adjacent background colour.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