Banja Lab / Benchmarks / Test
AYGAT-0006UI components · hard
Keyboard-operable ARIA radiogroup with roving tabindex
The same task, run on 27 models. Compare the outputs side by side, or open any one in a popup to inspect it.
Top result: claude-opus-4-8 (max reasoning) at 100.0% composite. Lowest: gemini-3.5-flash at 93.4%. 27 models compared on this task.
How it ran
- Each model was given the brief below in a fresh, isolated session with no access to our tools, and returned a single self-contained index.html (inline CSS and JS, no external requests, no build step).
- The rendered output was scored 1 to 5 on brief fidelity, visual design, craft, and impact by a four-family vision panel - Anthropic (Claude Opus 4.8), OpenAI (GPT-5.5), Google (Gemini 3.1 Pro), and xAI (Grok 4.3) - using one identical prompt so the scores compare. The published judge score is leave-one-family-out: a model is never scored by a judge of its own family, so same-family self-preference is removed.
The brief
Build a single self-contained page as one HTML file (`index.html`) that renders with no build step and no network calls (inline all CSS and JS, no external fonts or scripts). Build a custom radio group following the WAI-ARIA radiogroup pattern (do NOT use native <input type="radio">). Requirements: - A role="radiogroup" containing exactly three role="radio" options with the ids radio-standard, radio-express, radio-overnight. Exactly one option is checked on load (aria-checked="true"); only the checked option has tabindex="0" and the others have tabindex="-1" (roving tabindex, so the whole group is a single Tab stop). - When a radio has focus, ArrowDown or ArrowRight moves selection to the next option and ArrowUp or ArrowLeft to the previous (wrapping at the ends). Moving selection updates aria-checked (the newly selected option becomes "true", the previous "false"), moves tabindex, and moves DOM focus to the newly selected option. The radio group must be fully operable with the keyboard alone. Use plain, accessible markup.
