Test results
Pick a model to see how accessible its components are, with the accessibility skill off and on.
GPT-6.1 Sol
Skill version 2.3
| Measure | Skill off | Skill on |
|---|---|---|
| Failed acceptance criteria | 54 | 0 |
| of which WCAG | 33 | 0 |
| of which Best practice | 21 | 0 |
| Total cost (US dollars) | $1.39 | $5.16 |
| Input tokens | 132,928 | 6.2 million |
| Output tokens | 113,688 | 215,334 |
Toggle button
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.06
- Skill on
- $0.21
Efficiency, average per generation
Input tokens include cache reads.
Input tokens
- Skill off
- 1,688 tokens
- Skill on
- 93,505 tokens
Output tokens
- Skill off
- 1,508 tokens
- Skill on
- 2,393 tokens
Turns
- Skill off
- 2 turns
- Skill on
- 8 turns
Time
- Skill off
- 23 seconds
- Skill on
- 48 seconds
Cost
- Skill off
- $0.02
- Skill on
- $0.07
Prompt given to the model
Build a toggle button in a single self-contained HTML file (inline CSS and JS, no build step, no external libraries). It is a Mute button: activating it switches muting on and off, and it stays labelled "Mute" in both states. Output the complete code in one HTML code block.
Generated code
Show
Showing 15 of 15 criteria
Labels and messaging1 criterion
- The button has a visible label.WCAG 3.3.2AutomatedSkill off
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
Skill on3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
Semantic markup6 criteria
- The button's role is included in the accessibility tree.WCAG 4.1.2AutomatedSkill off
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
Skill on3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
- The toggle button's accessible name is included in the accessibility tree.WCAG 4.1.2AutomatedSkill off
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
Skill on3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
- The button's accessible name contains the text of its visible label.WCAG 2.5.3AutomatedSkill off
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
Skill on3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
- The button's accessible name matches its visible label exactly, or at least starts with the exact text of the visible label.Best practiceAutomatedSkill off
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
Skill on3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
- The button's pressed and not pressed state is included in the accessibility tree (aria-pressed).WCAG 4.1.2AutomatedSkill off
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
Skill on3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
- Activating the toggle flips its pressed state while the accessible name stays the same.WCAG 4.1.2BrowserSkill off
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
Skill on3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
Keyboard4 criteria
- The button is focusable using a keyboard.WCAG 2.1.1BrowserSkill off
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
Skill on3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
- The button is activated by pressing the Space or Enter keys on the keyboard.Best practiceBrowserSkill off
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
Skill on3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
- The button has a focus style when it receives focus using a keyboard.WCAG 2.4.7BrowserSkill off
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
Skill on3/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 practiceBrowserSkill off
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
Skill on3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
Visual design4 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.3AutomatedSkill off
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
Skill on3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
- If the button uses a custom focus style, the focus indicator has a contrast ratio of at least 3:1 against its background colour.WCAG 1.4.11BrowserSkill off
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
Skill on3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
- Visual information needed to identify the button's pressed state has a contrast ratio of at least 3:1 against adjacent colours.WCAG 1.4.11BrowserSkill off
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
Skill on3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
- The button's pressed state does not rely on colour alone to show that it is pressed.WCAG 1.4.1BrowserSkill off
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
Skill on3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
