Passed 15 of 23 test cases with the skill, and 15 of 23 without it.
Without skill67%
With skill67%
Checks it passed that the model alone missed
The author image provides descriptive alt text.
The CSS color values achieve a contrast ratio of at least 7:1.
2 fixed16 passed either way4 still failing1 broke
Pass-rate lift
0 pp
Tokens
+149%
Agent turns
0%
Response time
-4%
Model gemini-3.6-flashMeasured 8/27/2026v218 of 23 cases passed with skill
Tokens, turns and time describe resource use, not a dollar price.
See it in action
One of 2 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 2
Prompt
We have a blog post card featuring a background decorative swirl graphic and an author avatar image. How should we configure the alt attributes for both images in our HTML markup?
What was checked, without and with the skill
Checked
Without skill
With skill
The decorative graphic uses an empty alt attribute.
Passed
Passed
The author image provides descriptive alt text.
Missed
Passed
case-10 · gemini-3.6-flash · 8/27/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md622 linessingle file
Web Accessibility (A11y)
When to use this skill
New UI Component Development: Designing accessible components
Accessibility Audit: Identifying and fixing accessibility issues in existing sites
Form Implementation: Writing screen reader-friendly forms
Modals/Dropdowns: Focus management and keyboard trap prevention
WCAG Compliance: Meeting legal requirements or standards
Input Format
Required Information
Framework: React, Vue, Svelte, Vanilla JS, etc.
Component Type: Button, Form, Modal, Dropdown, Navigation, etc.
Make a React modal component accessible:
- Framework: React + TypeScript
- WCAG Level: AA
- Requirements:
- Focus trap (focus stays inside the modal)
- Close with ESC key
- Close by clicking the background
- Title/description read by screen readers