web-accessibility_skill

Overview

This skill helps you build accessible web applications that follow WCAG 2.1 and ARIA best practices. It provides patterns, code examples, and testing guidance for keyboard navigation, screen reader support, color contrast, and accessible forms. Use it to reduce accessibility defects and improve inclusive UX.

How this skill works

I provide concrete ARIA patterns (buttons, modals, navigation), focus management examples for keyboard users, and techniques for contrast calculation and screen-reader-only content. The skill includes form semantics, validation ARIA attributes, and automated testing examples with axe. Follow the patterns to ensure assistive technologies can interact reliably with your UI.

When to use it

• Implementing ARIA roles and properties for interactive components
• Building modal dialogs, menus, or custom widgets requiring focus management
• Ensuring keyboard-only users can navigate and operate your UI
• Verifying color contrast and visual readability against WCAG ratios
• Adding accessible form labels, error messaging, and required indicators

Best practices

• Prefer native semantics before adding ARIA; use role only when needed
• Manage focus: restore previous focus on close and trap focus inside modals
• Use aria-describedby and role="alert" for clear, programmatic error messages
• Ensure contrast meets WCAG AA (4.5:1 normal text, 3:1 large text/components)
• Test with automated tools (axe) and manual assistive-tech testing (screen readers, keyboard)

Example use cases

• Create an accessible modal that traps focus, supports Escape to close, and restores prior focus
• Build a keyboard-navigable menubar with proper aria-haspopup and aria-expanded states
• Enhance form UX with aria-required, aria-invalid, and descriptive error blocks announced to screen readers
• Calculate and validate foreground/background contrast programmatically during design and CI checks
• Hide visually redundant text with a screen-reader-only class for clearer announcements