skills.rest
hoodini
hoodiniCOMMUNITY
Explore all skills by this author →
Website𝕏@yuvalavGitHub

web-accessibility

Implement WCAG-aligned accessibility practices for web interfaces.

262|59|Updated Jan 7, 2026
Search Tags:#accessibility#screen reader#keyboard navigation#ARIA#WCAG#color contrast
One-click install
npx skills add https://github.com/hoodini/ai-agents-skills --skill web-accessibility-hoodini
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-accessibility
Source: https://github.com/hoodini/ai-agents-skills/tree/main/skills/web-accessibility
Command: npx skills add https://github.com/hoodini/ai-agents-skills --skill web-accessibility-hoodini

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Build accessible web applications that work for everyone, complying with WCAG guidelines and ensuring support for assistive technologies like screen readers and keyboard navigation.

Core Features & Use Cases

  • ARIA patterns: Implement accessible patterns for custom widgets, semantic HTML, and proper roles.
  • Keyboard navigation: Create fully navigable interfaces with logical focus order and visible focus indicators.
  • Screen reader support: Ensure semantic markup, aria-labels, and descriptive descriptions for dynamic content.
  • Use Case: When building a complex web app, use these practices to enable users with disabilities to interact with UI components and data.

Quick Start

Create an accessible web component (e.g., a modal or navigation pattern) using proper ARIA attributes, keyboard navigation, and visible focus indicators, then verify color contrast.

Frequently Asked Questions about web-accessibility

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

FAQPage Schema
How do I implement WCAG-aligned keyboard navigation and focus management for custom web components?▼

To implement WCAG-aligned keyboard navigation, use semantic HTML and proper ARIA attributes to create logical focus order and visible focus indicators for custom web components like modals. This ensures fully navigable interfaces for keyboard users.

What are the best ARIA patterns for screen reader support when building dynamic web interfaces?▼

The best ARIA patterns for screen reader support involve using semantic markup, descriptive aria-labels, and proper roles for dynamic content. These practices ensure assistive technologies accurately convey UI updates and structural changes to users.

How do I test color contrast and fix accessibility issues across web app pages?▼

To test color contrast and fix accessibility issues, verify visual elements against WCAG guidelines across all pages and components. Applying prescribed semantic HTML and accessible forms ensures compliance and readability for visually impaired users.

Do I need specific libraries to make complex web app forms accessible to screen readers?▼

You do not need specific libraries to make complex web app forms accessible to screen readers. Implementing proper labeling, semantic HTML, and ARIA patterns directly in your interface ensures assistive technologies can interact with form data.

Why does my custom widget fail keyboard navigation even with ARIA attributes added?▼

Custom widgets fail keyboard navigation when ARIA attributes are added without corresponding semantic HTML and focus management. Proper accessibility requires logical focus order, visible focus indicators, and keyboard support integrated with ARIA roles.

Related Skills

Explore More Software Engineering Skills→
theofernandezztheofernandezz

Accessibility (a11y)

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

Community
Advanced
etewiahetewiah
635

theme-evaluation

Evaluate theme palettes for WCAG contrast and accessibility compliance.

Community
Advanced
viktorbezdekviktorbezdek
10

frontend-design

Create accessible, responsive UI design systems with Tailwind CSS, Radix UI, and shadcn/ui.

Community
Advanced
zinohomezinohome
1

accessibility-auditor

Audit web pages for WCAG 2.1 compliance and implement accessibility fixes.

Community
Advanced