accessibility

Audit web UI accessibility gaps with WCAG-aligned patterns for ARIA and keyboard navigation.

53|1|Updated Dec 18, 2025

Search Tags:#accessibility #a11y #ARIA #WCAG #screen-reader #keyboard-navigation

Ready to run

npx skills add https://github.com/cosmix/claude-code-setup --skill accessibility-cosmix

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: accessibility
Source: https://github.com/cosmix/claude-code-setup/tree/main/skills/accessibility
Command: npx skills add https://github.com/cosmix/claude-code-setup --skill accessibility-cosmix

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web accessibility patterns and WCAG compliance guidelines ensure products are usable by everyone, including people with disabilities. This skill covers semantic HTML, ARIA, keyboard navigation, and automated testing considerations.

Core Features & Use Cases

WCAG 2.1 POUR: Perceivable, operable, understandable, robust principles.
Semantic HTML & ARIA: Proper landmark roles, labels, and accessible widgets.
Keyboard & Screen Reader Readiness: Ensuring full functionality via keyboard and assistive tech.

Quick Start

Audit the UI for keyboard navigation gaps and add ARIA labels where missing.

Frequently Asked Questions about accessibility

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I make my web UI accessible to keyboard and screen reader users?▼

Keyboard and screen reader accessibility requires semantic HTML, ARIA labels, and proper keyboard navigation. Audit your UI for missing focus management, add landmark roles and labels, ensure all interactive elements are keyboard-operable, and test with screen readers to verify content is announced correctly.

What is WCAG 2.1 and do I need to meet it?▼

WCAG 2.1 is the Web Content Accessibility Guidelines standard defining how to make web content accessible. It organizes requirements into POUR principles (Perceivable, Operable, Understandable, Robust) across three conformance levels: A, AA, and AAA. Most organizations target Level AA compliance.

How do I audit my website for accessibility gaps?▼

Start by testing keyboard navigation—tab through all interactive elements and verify focus is visible. Add missing ARIA labels and roles to components. Check color contrast ratios against WCAG standards. Use automated testing tools to identify semantic HTML issues, then manually verify screen reader compatibility with assistive technologies.

Can I use ARIA to fix accessibility without changing my HTML structure?▼

ARIA attributes enhance accessibility but cannot fully replace semantic HTML. Use ARIA to add labels, descriptions, and roles where semantic elements don't exist, but prioritize proper semantic HTML first—use `<button>` instead of `<div role="button">`, and `<nav>` for navigation landmarks. ARIA works best as a supplement, not a replacement.

What's the difference between WCAG Level A, AA, and AAA conformance?▼

Level A is the baseline (e.g., alt text for images). Level AA adds stricter requirements (e.g., 4.5:1 color contrast, clear language). Level AAA demands the highest standard (e.g., 7:1 contrast, sign language for video). Most organizations target AA; AAA is reserved for specialized contexts like government or healthcare.

How do I test if my accessible components actually work with screen readers?▼

Manual testing with real screen readers (NVDA, JAWS, VoiceOver) is essential—automated tools catch structural issues but miss announcement quality. Verify all content is announced, interactive elements are discoverable and operable via keyboard, form fields have labels, and landmarks guide navigation. Testing requires hands-on use of assistive technology.