Test results
Pick a model to see how accessible its components are, with the accessibility skill off and on.
Grok 4.7
Skill version 2.3
| Measure | Skill off | Skill on |
|---|---|---|
| Failed acceptance criteria | 90 | 9 |
| of which WCAG | 60 | 8 |
| of which Best practice | 30 | 1 |
| Total cost (US dollars) | $7.93 | $51.79 |
| Input tokens | 2.6 million | 35.3 million |
| Output tokens | 805,511 | 3.1 million |
Icon 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.23
- Skill on
- $1.74
Efficiency, average per generation
Input tokens include cache reads.
Input tokens
- Skill off
- 16,832 tokens
- Skill on
- 261,267 tokens
Output tokens
- Skill off
- 8,085 tokens
- Skill on
- 32,204 tokens
Turns
- Skill off
- 3 turns
- Skill on
- 9 turns
Time
- Skill off
- 89 seconds
- Skill on
- 507 seconds
Cost
- Skill off
- $0.08
- Skill on
- $0.58
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 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
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 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
Skill on3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass