Test results

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

GPT-6 Luna

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	143	12
of which WCAG	100	7
of which Best practice	43	5
Total cost (US dollars)	$0.09	$0.36
Input tokens	199,442	6.2 million
Output tokens	132,160	369,858

Toggletip

Results, totals across all generations

Cost in USD

Failed acceptance criteria

Skill off

9 fails

WCAG: 3 fails
Best practice: 6 fails

Skill on

1 fail

WCAG: 1 fail
Best practice: 0 fails

Total cost

Skill off: $0.0018
Skill on: $0.02

Efficiency, average per generation

Input tokens include cache reads.

Input tokens

Skill off: 1,510 tokens
Skill on: 104,189 tokens

Output tokens

Skill off: 883 tokens
Skill on: 6,915 tokens

Turns

Skill off: 2 turns
Skill on: 7 turns

Time

Skill off: 9 seconds
Skill on: 72 seconds

Cost

Skill off: $0.00059
Skill on: $0.0066

Prompt given to the model

Build a short section of a sign-up page in a single self-contained HTML file (inline CSS and JS, no build step, no external libraries). It shows the text "Referral code" next to a small round button labelled with a question mark ("?"). Activating the button shows a short note next to it with this exact text: "Optional. Enter the code a friend gave you to get a discount on your first order. Read our referral terms for details.", where "referral terms" is a link to a Referral terms page. The note is hidden when the page first loads. After the button, the page also has a separate link with the text "Continue", leading to the next step of sign-up. 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 20 of 20 criteria

Labels and messaging1 criterion

The toggletip button has a visible label.WCAG 2.4.6Automated
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 markup6 criteria

The toggletip button'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 toggletip button'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 toggletip button'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
If the toggletip is a custom button/content pair, the toggletip button has aria-controls set to the ID of the element containing the toggletip 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 toggletip content is collapsed, it is not included in the accessibility tree.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 toggletip content comes directly after the toggletip button 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

Keyboard9 criteria

The toggletip button is focusable using the 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
When the content is collapsed and the toggletip button is pressed, the content is expanded and it is included 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
When the content is expanded and the toggletip button is pressed, the content is collapses and it is not included 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
When the toggletip button is activated, focus stays on the toggletip button.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
The toggletip button 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).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
When the toggletip content is expanded, it can be collapsed by pressing the Escape key.Best practiceBrowser
Skill off
3/3 failed
- Generation 1: Fail
- Generation 2: Fail
- Generation 3: Fail
Skill on
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
When the toggletip content is collapsed by pressing the Escape key, focus returns to the toggletip button.WCAG 2.4.3Browser
Skill off
3/3 failed
- Generation 1: Fail
- Generation 2: Fail
- Generation 3: Fail
Skill on
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
The toggletip content is collapsed when keyboard focus moves away from the button and its content.Best practiceBrowser
Skill off
3/3 failed
- Generation 1: Fail
- Generation 2: Fail
- Generation 3: Fail
Skill on
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass

Visual design3 criteria

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 toggletip button uses a custom focus style, the focus style has a contrast ratio of 3:1 against the background colours.WCAG 1.4.11Browser
Skill off
0/3 passed
- Generation 1: Not applicable
- Generation 2: Not applicable
- Generation 3: Not applicable
Skill on
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
The toggletip content appears visually when the button is activated.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

Adaptive UI1 criterion

The toggletip content can be viewed at smaller screen widths (320px) without loss of content or functionality, and without requiring horizontal scrolling.WCAG 1.4.10Browser
Skill off
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
Skill on
1/3 failed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Fail