Skip to main content

Test results

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

Gemini 4 Argon

Skill version 2.3

Results for 22 components, each generated 3 times.Each acceptance criterion is counted once per component if it fails in any generation.
MeasureSkill offSkill on
Failed acceptance criteria220
of which WCAG150
of which Best practice70
Total cost (US dollars)$4.84$10.85

Modal dialog

Results, totals across all generations

Failed acceptance criteria

Each acceptance criterion is counted once per component if it fails in any generation.

Skill off
0 fails
WCAG
0 fails
Best practice
0 fails
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
5,959 tokens
Skill on
122,711 tokens

Output tokens

Skill off
4,430 tokens
Skill on
9,490 tokens

Turns

Skill off
3 turns
Skill on
8 turns

Time

Skill off
60 seconds
Skill on
148 seconds

Cost

Skill off
$0.06
Skill on
$0.17

Generated components

Prompt given to the model
Build a page with a delete-confirmation dialog in a single self-contained HTML file (inline CSS and JS, no build step, no external libraries). The page shows a short paragraph "Your monthly report is ready to download." and a button labelled "Delete file". Choosing "Delete file" opens a dialog window over the page. The dialog has the heading "Delete this file?", one sentence of body text "This will permanently remove the file from your account.", and two buttons: "Cancel" and "Delete". Both buttons dismiss the dialog (no actual deletion needs to happen). The dialog is closed when the page first loads, and while it is open the rest of the page cannot be used until it is dismissed. Output the complete code in one HTML code block.

Acceptance criteria

Show

Showing 16 of 16 criteria

  • The modal dialog has a clear, descriptive heading that identifies its purpose.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
  • The modal dialog container element has role="dialog" 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 modal dialog 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
  • Content outside the active modal dialog is programmatically inert.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 modal dialog opens, keyboard focus is moved to the modal.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
  • While the modal dialog is open, focus is trapped inside of the modal container and does not move to elements in the background.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
  • All interactive elements within the modal dialog have a focus style when they receive 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 on the dialog's controls 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
  • The modal dialog can be closed with a keyboard, such as using a close or cancel button.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 Escape key closes the modal dialog.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
  • When the modal dialog is closed, focus is returned to a logical position, such as the button that opened it.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
  • Text within the modal dialog meets the minimum contrast ratio of 4.5:1 against its background, 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 interactive elements within the modal dialog use custom focus styles, these styles have a contrast ratio of 3:1 against the background colour.WCAG 1.4.11Browser
    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
  • Content outside an active modal dialog is dimmed or blurred to indicate its inert state.Best practiceJudgement
    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 modal dialog 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
  • The modal 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

    0/3 passed

    • Generation 1: Unmeasured
    • Generation 2: Unmeasured
    • Generation 3: Unmeasured
    Skill on

    0/3 passed

    • Generation 1: Unmeasured
    • Generation 2: Unmeasured
    • Generation 3: Unmeasured

Back to top