skills.rest
korallis
korallisCOMMUNITY
Explore all skills by this author →
GitHub

accessibility-wcag

Ensure web applications comply with WCAG 2.1/2.2 accessibility guidelines.

90|10|Updated Nov 8, 2025
Search Tags:#accessibility#web development#keyboard navigation#wcag#semantic html#aria
One-click install
npx skills add https://github.com/korallis/Droidz --skill accessibility-wcag-korallis
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility-wcag
Source: https://github.com/korallis/Droidz/tree/main/droidz_installer/payloads/droid_cli/default/skills/accessibility-wcag
Command: npx skills add https://github.com/korallis/Droidz --skill accessibility-wcag-korallis

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers build web applications that are usable by everyone, regardless of their abilities, by adhering to Web Content Accessibility Guidelines (WCAG).

Core Features & Use Cases

  • Semantic HTML: Ensures proper structure for screen readers and assistive technologies.
  • ARIA Implementation: Adds necessary ARIA attributes for dynamic content and custom components.
  • Keyboard Navigation: Guarantees all interactive elements are accessible via keyboard.
  • Focus Management: Manages focus order and visibility for users navigating with keyboards or assistive devices.
  • Use Case: When developing a new modal dialog, use this skill to ensure it's properly announced by screen readers, can be closed with the Escape key, and that focus is trapped within the dialog.

Quick Start

Implement semantic HTML and ARIA attributes for the main navigation menu.

Frequently Asked Questions about accessibility-wcag

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

FAQPage Schema
How do I make my web application compliant with WCAG 2.1 and 2.2 guidelines?▼

To make your web application compliant with WCAG guidelines, ensure your interfaces are perceivable, operable, understandable, and robust by implementing semantic HTML, ARIA roles, keyboard navigation, and focus management for inclusive design.

What is the best way to implement keyboard navigation and focus management for a modal dialog?▼

The best way to implement keyboard navigation for a modal dialog is to use semantic HTML and ARIA attributes, trap focus within the dialog, and allow users to close it using the Escape key.

When do I need to add ARIA labels and roles to my dynamic web content?▼

You need to add ARIA labels and roles to dynamic web content when native semantic HTML is insufficient to convey state, relationships, or identity to assistive technologies like screen readers.

Does semantic HTML alone guarantee accessible web development for screen readers?▼

Semantic HTML provides the foundational structure for screen readers, but accessible web development also requires ARIA implementation for dynamic content and proper focus management for custom components.

How do I ensure focus management for custom interactive elements meets accessibility standards?▼

To ensure focus management meets accessibility standards, manage focus order and visibility explicitly so users navigating with keyboards or assistive devices can interact with custom elements effectively.

Related Skills

Explore More Software Engineering Skills→
SAPSAP
294

a11y-audit

Audit UI components for WCAG AA accessibility compliance.

Official
Advanced
calcosmiccalcosmic
9

accessibility

Audit frontend components for WCAG 2.2 AA accessibility compliance.

Community
Advanced
raybargasraybargas

Frontend Accessibility

Enforce frontend accessibility compliance in web UI code.

Community
Basic
Nickalus12Nickalus12
2

a11y-audit

Audit Loom-style applications for WCAG violations and ARIA usage.

Community
Advanced