standards-accessibility_skill

Overview

This skill helps you build accessible user interfaces by prioritizing semantic HTML, correct ARIA usage, keyboard navigation, color contrast, and screen reader compatibility. It applies to templates and components (HTML, JSX/TSX, React, Vue, Svelte) and codifies practical checks and patterns to meet WCAG standards. Use it to ensure UI features are usable by people with diverse abilities.

How this skill works

The skill inspects component markup and UI code for semantic element use, label associations, ARIA attributes, focus management, keyboard handlers, alt text, heading structure, and color contrast rules. It flags common mistakes (e.g., divs acting as buttons, missing labels, improper ARIA) and suggests concrete fixes: replace nonsemantic elements, add ids/for, implement tabindex and key handlers, set aria-live regions, and restore focus when dialogs close. It emphasizes testing with keyboard and screen readers plus automated tools.

When to use it

• Creating or refactoring frontend components, templates, or JSX/TSX markup
• Implementing forms, inputs, and validation messages
• Building interactive elements: menus, modals, custom controls, and dialogs
• Adding images, icons, or decorative graphics that need alt text or roles
• Verifying keyboard navigation, focus management, and heading hierarchy
• Checking color contrast and avoiding color-only status indicators

Best practices

• Prefer native semantic elements (button, a, nav, main, header) before ARIA
• Ensure every input has an associated label (id + for) or use aria-label/aria-labelledby
• Make custom controls keyboard accessible with tabindex=0 and Enter/Space handlers
• Maintain visible focus indicators; never remove outlines without an alternative
• Use aria-live for dynamic announcements and restore focus after modal close
• Verify contrast ratios: 4.5:1 for normal text, 3:1 for large text and UI components

Example use cases

• Convert a clickable div into a semantic button and add keyboard handlers
• Add id/for labels and aria-describedby for form error messages
• Implement focus trap and restore focus inside modal dialogs
• Provide descriptive alt text for charts and aria-describedby for complex diagrams
• Replace color-only status badges with text labels and accessible icons