Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support.
SkillScore91Maintained
Automatic
◆Frontend / UI pack
Last verified 8/29/2026
What it changes
Passed 20 of 22 test cases with the skill, and 19 of 22 without it.
Without skill86%
With skill91%
Checks it passed that the model alone missed
Provides explicit screen reader text indicating required status
Recommends using CSS classes for visual styling while keeping sequential h2 tag order
2 fixed18 passed either way1 still failing1 broke
Pass-rate lift
+5 pp
Tokens
+130%
Agent turns
0%
Response time
+5%
Model gemini-3.6-flashMeasured 8/29/2026v120 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
Design an HTML email form field that is required. The mock suggests placing a red asterisk '*' next to the label text without programmatic indicators. How should the field and visual asterisk be marked up for screen reader clarity?
What was checked, without and with the skill
Checked
Without skill
With skill
Hides visual asterisk from screen readers using aria-hidden
Passed
Passed
Provides explicit screen reader text indicating required status
Missed
Passed
Includes aria-required attribute on the input element
Passed
Passed
case-09 · gemini-3.6-flash · 8/29/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md415 lines4 files
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
Core Capabilities
1. WCAG 2.2 Guidelines
Perceivable: Content must be presentable in different ways
Operable: Interface must be navigable with keyboard and assistive tech
Understandable: Content and operation must be clear
Robust: Content must work with current and future assistive technologies
2. ARIA Patterns
Roles: Define element purpose (button, dialog, navigation)
States: Indicate current condition (expanded, selected, disabled)
Properties: Describe relationships and additional info (labelledby, describedby)