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

Totals for the whole run, across 3 generations of each of the 22 components
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

Combobox without autocomplete

Results, totals across all generations

Cost in USD

Failed acceptance criteria

Skill off

10 fails

WCAG: 9 fails
Best practice: 1 fail

Skill on

0 fails

WCAG: 0 fails
Best practice: 0 fails

Total cost

Skill off: $0.55
Skill on: $3.75

Efficiency, average per generation

Input tokens include cache reads.

Input tokens

Skill off: 35,217 tokens
Skill on: 948,938 tokens

Output tokens

Skill off: 21,748 tokens
Skill on: 60,957 tokens

Turns

Skill off: 3 turns
Skill on: 18 turns

Time

Skill off: 272 seconds
Skill on: 847 seconds

Cost

Skill off: $0.18
Skill on: $1.25

Prompt given to the model

Build a search field labelled "Destination" in a single self-contained HTML file (inline CSS and JS, no build step, no external libraries). Below the label, show the hint "Pick a recent destination or type a new one." The field currently contains the text "Melbourne". Inside the field on the right, place a downward chevron button that opens a suggestions dropdown. The dropdown lists five recent destinations — Adelaide, Brisbane, Melbourne, Perth, and Sydney. These five suggestions are always the same and do not change based on what the user types. Users can type any value into the field or pick one of the suggestions. 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 30 of 30 criteria

Labels and messaging1 criterion

The combobox 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 markup12 criteria

The combobox'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 combobox 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
The combobox'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
The combobox'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 combobox'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 combobox'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
The combobox has an accessible description (the hint) 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 list of options has the listbox role 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 option has the option role and 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
The combobox is programmatically associated with its listbox (aria-controls / aria-owns).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 option with visual focus is programmatically determinable via aria-activedescendant on the combobox.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 combobox indicates that suggestions are independent of the typed text (aria-autocomplete="none", or omitted).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

Keyboard12 criteria

The combobox 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 combobox 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 open the listbox and choose an option using only 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
Pressing the Down arrow opens the listbox and moves visual focus to the first option.Best practiceBrowser
Skill off
1/3 failed
- Generation 1: Fail
- Generation 2: Pass
- Generation 3: Pass
Skill on
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
The arrow keys move visual focus through the options while DOM focus stays on the input.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
After navigating options, people can keep editing without losing the typed value (DOM focus stays on the input).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
Pressing Escape when the listbox is open closes it without changing the value.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
Pressing Tab to move away from the combobox closes the listbox.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
A separate open (arrow) button is not in the Tab order because it duplicates the combobox's keyboard interface.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
The option with visual focus has a focus style.WCAG 2.4.7Browser
Skill off
1/3 failed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Fail
Skill on
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
The combobox 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

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
The option focus style has a contrast ratio of at least 3:1 against the option's resting appearance.WCAG 1.4.11Browser
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
If the combobox 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
2/3 failed
- Generation 1: Pass
- Generation 2: Fail
- Generation 3: Fail
Skill on
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass
The combobox'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 failed
- Generation 1: Fail
- Generation 2: Fail
- Generation 3: Fail
Skill on
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass

Adaptive UI1 criterion

The combobox 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
3/3 passed
- Generation 1: Pass
- Generation 2: Pass
- Generation 3: Pass

Notes on this run

Skill off

Generation 3 has a visual design error that is causing the listbox not to render correctly.