accessibility-wcag

korallis's avatarfrom korallis

Build accessible web applications following WCAG 2.1/2.2 guidelines with proper semantic HTML, ARIA attributes, keyboard navigation, screen reader support, and inclusive design. Use when implementing ARIA labels and roles, ensuring keyboard navigation, supporting screen readers, providing text alternatives for images, managing focus, creating accessible forms, building inclusive UI components, testing with accessibility tools, meeting WCAG compliance levels, or designing for users with disabilities.

⭐49stars🔀6forks📁View on GitHub🕐Updated Nov 26, 2025
[Testing and QA]

When & Why to Use This Skill

This Claude skill provides expert guidance for building and auditing accessible web applications that comply with WCAG 2.1/2.2 standards. It assists developers in implementing semantic HTML, ARIA roles, and keyboard navigation, ensuring an inclusive digital experience for users with disabilities and those using assistive technologies like screen readers.

Use Cases

  • WCAG Compliance Auditing: Systematically evaluate web components to ensure they meet WCAG 2.1/2.2 AA or AAA standards, helping organizations meet legal and ethical accessibility requirements.
  • Inclusive UI Component Development: Build accessible forms, navigation menus, and interactive elements that are fully functional via keyboard and compatible with screen readers like NVDA or VoiceOver.
  • Accessibility Remediation: Identify and refactor non-semantic 'div soup' or inaccessible legacy code into robust, accessible structures using proper ARIA attributes and semantic tags.
  • Focus and Navigation Management: Implement logical tab orders, focus traps for modals, and skip links to enhance the browsing experience for users with motor or visual impairments.
nameaccessibility-wcag
descriptionBuild accessible web applications following WCAG 2.1/2.2 guidelines with proper semantic HTML, ARIA attributes, keyboard navigation, screen reader support, and inclusive design. Use when implementing ARIA labels and roles, ensuring keyboard navigation, supporting screen readers, providing text alternatives for images, managing focus, creating accessible forms, building inclusive UI components, testing with accessibility tools, meeting WCAG compliance levels, or designing for users with disabilities.

Accessibility (WCAG) - Building Inclusive Web Applications

When to use this skill

  • Implementing ARIA labels, roles, and properties
  • Ensuring full keyboard navigation support
  • Supporting screen readers (NVDA, JAWS, VoiceOver)
  • Providing text alternatives for images and media
  • Managing focus and focus indicators
  • Creating accessible forms with proper labels
  • Building inclusive, usable UI components
  • Testing with axe DevTools or similar tools
  • Meeting WCAG 2.1/2.2 AA or AAA compliance
  • Designing for color blindness and low vision
  • Implementing skip links and landmarks
  • Ensuring sufficient color contrast ratios

When to use this skill

  • Designing UIs, implementing components, ensuring compliance with accessibility standards (WCAG 2.1/2.2).
  • When working on related tasks or features
  • During development that requires this expertise

Use when: Designing UIs, implementing components, ensuring compliance with accessibility standards (WCAG 2.1/2.2).

Core Principles (POUR)

  1. Perceivable - Information available to all senses
  2. Operable - Interface elements functional for all users
  3. Understandable - Content and interface are clear
  4. Robust - Works across technologies including assistive devices

Essential Patterns

Semantic HTML

<!-- ✅ Proper semantic structure -->
<header><nav><ul><li><a></a></li></ul></nav></header>
<main><article><h1></h1><p></p></article></main>
<footer></footer>

<!-- ❌ Div soup -->
<div class="header"><div class="nav"></div></div>

ARIA Labels & Roles

<button aria-label="Close dialog">×</button>
<nav aria-label="Main navigation"></nav>
<input aria-describedby="email-error" />
<div role="alert" aria-live="polite">Success</div>

Keyboard Navigation

function Modal({ onClose }: { onClose: () => void }) {
  useEffect(() => {
    const handleEscape = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose();
    };
    document.addEventListener('keydown', handleEscape);
    return () => document.removeEventListener('keydown', handleEscape);
  }, [onClose]);
  
  return <div role="dialog" aria-modal="true" tabIndex={-1}>...</div>;
}

Focus Management

const firstFocusableElement = dialogRef.current?.querySelectorAll(
  'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
)[0];
firstFocusableElement?.focus();

Resources