accessibility

Identify and fix accessibility gaps in web applications to meet WCAG 2.1 AA standards.

Updated Jan 26, 2026

Search Tags:#accessibility #a11y #wcag #aria #keyboard-navigation #inclusive-design

Ready to run

npx skills add https://github.com/theofernandezz/ai-library --skill accessibility-theofernandezz

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: accessibility
Source: https://github.com/theofernandezz/ai-library/tree/main/.opencode/skills/accessibility
Command: npx skills add https://github.com/theofernandezz/ai-library --skill accessibility-theofernandezz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The guidance outlines how to build inclusive web applications that meet WCAG 2.1 AA standards, focusing on semantic HTML, ARIA attributes, keyboard navigation, and screen reader compatibility.

Core Features & Use Cases

WCAG-aligned patterns for interactive components, forms, and navigational structures.
Practical examples demonstrating correct semantics, accessible labels, and live regions.
Real-world use cases include building accessible buttons, modals, and form validation experiences.

Quick Start

Learn and apply the core accessibility patterns by auditing your components for semantic correctness and keyboard operability.

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 app meet WCAG 2.1 AA accessibility standards?▼

To meet WCAG 2.1 AA accessibility standards, audit your web app for semantic HTML correctness, implement required ARIA patterns, and ensure full keyboard operability for interactive components, forms, and navigation.

When do I need ARIA attributes for interactive components?▼

You need ARIA attributes when semantic HTML alone cannot convey the role, state, or properties of interactive components like modals or form validation. ARIA patterns provide the necessary context for assistive technologies to interpret these elements correctly.

How do I implement keyboard navigation for accessible web applications?▼

Implement keyboard navigation by ensuring all interactive elements are operable without a mouse, using skip navigation links, and specifying keyboard interactions for components. Focus management must be logical and visible for screen reader compatibility.

What is the best way to fix accessibility gaps in forms and modals?▼

The best way to fix accessibility gaps in forms and modals is to apply correct semantic HTML, provide accessible labels, and use live regions for dynamic validation. This ensures screen readers can announce content changes accurately.

Does semantic HTML alone satisfy screen reader compatibility requirements?▼

Semantic HTML provides the foundational structure for screen reader compatibility, but complex interactive components often require additional ARIA attributes and live regions to communicate dynamic state changes and ensure inclusive design.

Why does my web application fail keyboard operability checks during an accessibility audit?▼

Your web application fails keyboard operability checks when interactive elements lack proper focus management, skip navigation is missing, or custom components do not follow established keyboard interaction patterns required by assistive technologies.