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

Accessibility (a11y)

Apply WCAG-compatible patterns and ARIA semantics to web interfaces.

Updated Jan 26, 2026
Search Tags:#accessibility#a11y#wcag#semantic-html#aria#keyboard-navigation#focus-management
One-click install
npx skills add https://github.com/theofernandezz/ai-library --skill accessibility-a11y-theofernandezz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Accessibility (a11y)
Source: https://github.com/theofernandezz/ai-library/tree/main/.opencode/skills/generic/accessibility
Command: npx skills add https://github.com/theofernandezz/ai-library --skill accessibility-a11y-theofernandezz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Accessibility patterns help developers build inclusive web applications that meet WCAG 2.1 AA, support screen readers, keyboard navigation, and semantic markup, reducing usability gaps.

Core Features & Use Cases

  • WCAG 2.1 AA compliance and ARIA attributes guidance for interactive components, forms, and navigation.
  • Keyboard navigation patterns, focus management, and semantic HTML recommendations for assistive tech.
  • Real-world scenario: applying accessibility guidelines during UI composition, forms, and navigation updates to improve user reach and compliance.

Quick Start

Start by applying semantic HTML, proper ARIA attributes, and keyboard interactions to a new component.

Frequently Asked Questions about Accessibility (a11y)

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

FAQPage Schema
How do I make my web components meet WCAG 2.1 AA compliance?▼

To meet WCAG 2.1 AA compliance, apply semantic HTML, proper ARIA attributes, and keyboard interactions to your interactive components, forms, and navigation during UI composition.

What's the best way to implement keyboard navigation and focus management for screen readers?▼

Keyboard navigation and focus management for screen readers are implemented by applying semantic HTML structures, correct ARIA attributes, and testing hooks to ensure interactive widgets are fully operable without a mouse.

Can I use ARIA semantics and accessibility patterns across different web frameworks?▼

ARIA semantics and accessibility patterns apply across frameworks for component libraries, forms, and interactive widgets, ensuring consistent screen-reader and keyboard-accessibility support in production code.

When do I need semantic HTML and ARIA attributes for assistive technology?▼

Semantic HTML and ARIA attributes are needed whenever building interactive UI components, forms, or navigation updates to reduce usability gaps and ensure proper screen-reader support and compliance.

Does accessibility compliance require specific testing hooks for interactive widgets?▼

Accessibility compliance requires testing hooks alongside semantic HTML, focus management, and ARIA attributes to validate keyboard-accessibility and screen-reader behavior in production interactive widgets.

Why does my component library fail keyboard accessibility even with ARIA attributes?▼

Keyboard accessibility fails without proper focus management and semantic HTML, making ARIA attributes insufficient alone; applying WCAG-compatible patterns ensures interactive widgets remain fully operable.

Related Skills

Explore More Design & Creative Skills→
mouayadakelmouayadakel

accessibility-checker

Check UI components and forms for accessibility attributes and markup suggestions.

Community
Intermediate
FoundationForgeFoundationForge

accessibility-review

Identify WCAG 2.1 AA accessibility issues in Figma designs or live pages.

Official
Intermediate
ryan-nguyen-01ryan-nguyen-01
4

skill-ui-accessibility

Analyze web UI structure, semantics, and ARIA usage for accessibility gaps.

Community
Advanced
ariesanhthuariesanhthu

accessibility-expert

Audits WCAG 2.1/2.2 compliance and fixes accessibility violations in web projects.

Community
Advanced