Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support.
SkillScore95Maintained
Automatic
◆Frontend / UI pack
Last verified 8/9/2026
What it changes
Passed 21 of 22 test cases with the skill, and 19 of 22 without it.
Without skill86%
With skill95%
Checks it passed that the model alone missed
Name NoCoffee as a vision impairment simulator tool.
Require an explicit label element associated with the input.
2 fixed19 passed either way1 still failing0 broke
Pass-rate lift
+9 pp
Tokens
+20%
Agent turns
0%
Response time
-6%
Model gemini-3.6-flashMeasured 8/9/2026v121 of 22 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 search input field that currently uses `placeholder="Search items..."` as its only descriptive text to keep the UI minimal. What is the standard accessible markup to ensure screen readers properly identify this input field?
What was checked, without and with the skill
Checked
Without skill
With skill
Require an explicit label element associated with the input.
Missed
Passed
case-06 · gemini-3.6-flash · 8/9/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md46 linessingle file
Accessibility Compliance
Master accessibility implementation to create inclusive experiences that work for everyone, including users with disabilities.
When to Use This Skill
Implementing WCAG 2.2 Level AA or AAA compliance
Building screen reader accessible interfaces
Adding keyboard navigation to interactive components
Implementing focus management and focus trapping
Creating accessible forms with proper labeling
Supporting reduced motion and high contrast preferences
Building mobile accessibility features (iOS VoiceOver, Android TalkBack)
Conducting accessibility audits and fixing violations
Detailed patterns and worked examples
Detailed pattern documentation lives in references/details.md. Read that file when the navigation tier above is insufficient.
Best Practices
Use Semantic HTML: Prefer native elements over ARIA when possible
Test with Real Users: Include people with disabilities in user testing
Keyboard First: Design interactions to work without a mouse
Don't Disable Focus Styles: Style them, don't remove them
Provide Text Alternatives: All non-text content needs descriptions
Support Zoom: Content should work at 200% zoom
Announce Changes: Use live regions for dynamic content
Respect Preferences: Honor prefers-reduced-motion and prefers-contrast
Common Issues
Missing alt text: Images without descriptions
Poor color contrast: Text hard to read against background
Keyboard traps: Focus stuck in component
Missing labels: Form inputs without associated labels
Auto-playing media: Content that plays without user initiation
Adversarial code review using the opposite model. Spawns 1–3 reviewers on the opposing model (Claude spawns Codex, Codex spawns Claude) to challenge work from distinct critical lenses. Triggers: "adversarial review".