Web accessibility patterns for WCAG 2.2 compliance including ARIA, keyboard navigation, screen readers, and testing
82
73%
Does it follow best practices?
Impact
95%
1.06xAverage score across 3 eval scenarios
Passed
No findings from the security scan
Fix and improve this skill with Tessl
tessl review fix ./skills/accessibility-wcag/SKILL.mdAccessible form validation with ARIA and color-independent feedback
Label association
100%
100%
aria-required on required fields
100%
100%
aria-describedby for hints
100%
100%
aria-describedby includes error id
100%
100%
aria-invalid on error
100%
100%
role=alert for errors
100%
100%
noValidate on form
100%
100%
Non-color error indicator
100%
100%
focus-visible outline
50%
100%
No stripped focus outline
100%
100%
Form aria-labelledby
0%
100%
Semantic HTML landmarks and navigation accessibility
Semantic header landmark
100%
100%
Semantic nav landmark
100%
100%
Nav aria-label
100%
100%
aria-current on active link
100%
100%
Semantic main landmark
100%
100%
Semantic article elements
100%
100%
Semantic footer landmark
100%
100%
Skip navigation link
100%
100%
Descriptive alt text
87%
100%
No div/span for interactive
100%
100%
No redundant aria-label
100%
100%
Section aria-labelledby
0%
0%
ARIA tab component and modal dialog keyboard interaction
role=tablist
100%
100%
role=tab on buttons
100%
100%
aria-selected on tabs
100%
100%
aria-controls wiring
100%
100%
role=tabpanel on panels
100%
100%
Panel aria-labelledby
100%
100%
tabIndex management
100%
100%
Arrow key navigation
75%
100%
Home/End key support
100%
100%
role=dialog on modal
100%
100%
Modal aria-labelledby
100%
100%
Escape closes modal
100%
100%
Icon button aria-label
100%
100%
Decorative icon aria-hidden
42%
42%
ebdf1d5
Table of Contents
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.