accessibility-patterns

Review user interfaces for WCAG compliance, semantic HTML, keyboard navigation, and ARIA attributes.

161|25|Updated Oct 22, 2025
One-click install
npx skills add https://github.com/romiluz13/cc10x --skill accessibility-patterns
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: accessibility-patterns
Source: https://github.com/romiluz13/cc10x/tree/main/plugins/cc10x/skills/accessibility-patterns
Command: npx skills add https://github.com/romiluz13/cc10x --skill accessibility-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill ensures that user interfaces are accessible to everyone, including individuals with disabilities, preventing exclusion and legal compliance issues. It provides comprehensive guidance on WCAG principles, semantic HTML, keyboard navigation, and ARIA attributes, making it easier to build inclusive and compliant applications.

Core Features & Use Cases

  • WCAG Compliance: Guides adherence to Web Content Accessibility Guidelines (WCAG) standards.
  • Semantic HTML: Promotes the use of appropriate HTML elements for better structure and meaning.
  • Keyboard Navigation: Ensures all interactive elements are navigable and operable via keyboard.
  • ARIA Attributes: Provides best practices for using Accessible Rich Internet Applications (ARIA) attributes to enhance semantics.
  • Color Contrast & Focus States: Emphasizes critical visual accessibility aspects like sufficient color contrast and visible focus indicators.
  • Use Case: When developing a new form, use this skill to ensure all input fields have proper labels, error messages are announced to screen readers, and the form can be fully navigated and submitted using only the keyboard.

Quick Start

Review the new user registration form for accessibility, focusing on keyboard navigation and screen reader compatibility.