skills.rest
theofernandezz
theofernandezzCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/theofernandezz/ai-library --skill accessibility-theofernandezz
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
EdWrldEdWrld

web-design-guidelines

Audit HTML, CSS, and JS UI code against Web Interface Guidelines.

Community
Intermediate
vecearvecear

accessibility-auditor

Audit web applications for WCAG 2.1 accessibility issues.

Community
Advanced
mae616mae616
9

accessibility-engineer

Enforce accessible UI with semantic HTML and minimal ARIA.

Community
Basic
naporin0624naporin0624
3

seo-a11y-analyzer

Analyze HTML, JSX, and TSX files for SEO and accessibility issues.

Community
Advanced