Test results
Pick a model to see how accessible its components are, with the accessibility skill off and on.
Claude Haiku 5.5
Skill version 2.3
| Measure | Skill off | Skill on |
|---|---|---|
| Unique failed acceptance criteria | 56 | 4 |
| of which WCAG | 36 | 2 |
| of which Best practice | 20 | 2 |
| Total cost (US dollars) | $0.14 | $0.69 |
Icon button
Results, totals across all generations
Unique failed acceptance criteria
- Skill off
- 2 fails
- WCAG
- 1 fail
- Best practice
- 1 fail
- 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
- 3,159 tokens
- Skill on
- 79,014 tokens
Output tokens
- Skill off
- 2,327 tokens
- Skill on
- 8,344 tokens
Turns
- Skill off
- 1 turn
- Skill on
- 5 turns
Time
- Skill off
- 8 seconds
- Skill on
- 34 seconds
Cost
- Skill off
- $0.0015
- Skill on
- $0.0077
Prompt given to the model
Build an icon button in a single self-contained HTML file (inline CSS and JS, no build step, no external libraries). The button shows only an icon (for example a magnifying-glass search icon) with no visible text label. Include one enabled icon button and one disabled icon button. Output the complete code in one HTML code block.
Generated code
Show
Showing 9 of 9 criteria
Labels and messaging1 criterion
- The icon button has a programmatic accessible name (aria-label, aria-labelledby, or title) and no visible text label.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
Semantic markup3 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 icon 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
- If the button is disabled, the button's disabled state 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
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 failed
- Generation 1: Fail
- Generation 2: Fail
- Generation 3: Fail
Skill on3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
Visual design1 criterion
- 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 failed
- Generation 1: Fail
- Generation 2: Fail
- Generation 3: Fail
Skill on3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass