frontend-accessibility

Apply WCAG 2.1 AA accessibility patterns across web applications.

3|Updated Jan 25, 2026
One-click install
npx skills add https://github.com/ai-enhanced-engineer/aiee-team --skill frontend-accessibility-ai-enhanced-engineer
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-accessibility
Source: https://github.com/ai-enhanced-engineer/aiee-team/tree/main/skills/frontend-accessibility
Command: npx skills add https://github.com/ai-enhanced-engineer/aiee-team --skill frontend-accessibility-ai-enhanced-engineer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web accessibility in modern web apps is often inconsistently implemented across components and frameworks. This skill provides reusable patterns and guidance to meet WCAG 2.1 AA requirements, enabling inclusive design with minimal guesswork.

Core Features & Use Cases

  • ARIA essentials for semantic markup and assistive technology compatibility.
  • Keyboard navigation patterns and focus management across custom components.
  • Screen reader support through live regions, labels, and descriptive error messaging.
  • Framework-agnostic implementations with examples for Angular and other ecosystems.
  • Use cases include accessibility audits, implementing accessible components, and ongoing inclusive design practice.

Quick Start

Audit a web page for WCAG 2.1 AA patterns and implement accessible components using the provided guidance.

Frequently Asked Questions about frontend-accessibility

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

FAQPage Schema
How do I make custom web components keyboard navigable for screen readers?

Keyboard navigation for screen readers requires proper focus management and ARIA roles across custom components. This skill provides framework-agnostic patterns to manage focus, implement logical tab order, and ensure interactive elements are fully operable via keyboard.

How do I audit a web page for WCAG 2.1 AA compliance?

Auditing a web page for WCAG 2.1 AA compliance involves checking ARIA semantics, keyboard access, and screen reader compatibility. This skill provides practical guidelines and implementation examples to verify conformance and identify accessibility gaps.

What is the best way to implement ARIA essentials for modern web applications?

ARIA essentials for modern web applications involve adding semantic markup to ensure assistive technology compatibility. This skill provides reusable patterns to correctly apply ARIA attributes, live regions, and descriptive error messaging for inclusive UI.

Does this accessibility skill work with Angular and other frameworks?

This accessibility skill works with Angular and other frameworks through framework-agnostic implementations. It provides reusable patterns and examples tailored for Angular and similar ecosystems to ensure consistent WCAG 2.1 AA conformance.

Why does my screen reader not announce dynamic UI updates?

Screen readers fail to announce dynamic UI updates when ARIA live regions are missing or misconfigured. This skill provides patterns to implement live regions, labels, and descriptive error messaging to ensure dynamic content changes are properly communicated.

When do I need ARIA attributes for accessible UI patterns?

You need ARIA attributes for accessible UI patterns when native HTML elements cannot convey the required semantics. This skill guides developers through ARIA essentials, keyboard navigation, and screen reader support to ensure inclusive design with minimal guesswork.