skills.rest
I2olanD
I2olanDCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

accessibility-design

Implements WCAG 2.1 accessibility standards in web interfaces.

Updated Dec 28, 2025
Search Tags:#accessibility#ARIA#semantic-html#keyboard-navigation#focus-management#WCAG-2.1
One-click install
npx skills add https://github.com/I2olanD/dotfiles --skill accessibility-design-i2oland
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility-design
Source: https://github.com/I2olanD/dotfiles/tree/main/.config/opencode/skill/accessibility-design
Command: npx skills add https://github.com/I2olanD/dotfiles --skill accessibility-design-i2oland

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides comprehensive guidance for implementing WCAG 2.1 AA compliance across digital products, establishing patterns for semantic markup, assistive technology compatibility, and inclusive interaction design.

Core Features & Use Cases

  • POUR framework: Perceivable, Operable, Understandable, and Robust design as the foundation for accessible UI.
  • Semantic HTML and ARIA: Use native HTML elements where possible; ARIA only when necessary to enhance accessibility.
  • Keyboard and focus: Ensure full keyboard operability and proper focus management, including skip links and trapping focus in modals.
  • Testing and auditing: Guidance for manual and automated WCAG checks, screen reader testing, and color contrast validation with references to WCAG resources.
  • Use Case: Apply these patterns during UI development, code reviews, or accessibility audits to produce inclusive interfaces.

Quick Start

Review the WCAG patterns and apply them to your UI components. Start by auditing semantic markup, focus management, and keyboard navigation, then implement POUR principles and ARIA patterns to improve accessibility.

Frequently Asked Questions about accessibility-design

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

FAQPage Schema
How do I make my web interface WCAG 2.1 AA compliant?▼

To achieve WCAG 2.1 AA compliance, apply the POUR framework by implementing semantic HTML, ARIA roles, proper color contrast, and full keyboard navigation across your digital product interfaces.

When should I use ARIA instead of semantic HTML for accessibility?▼

Use semantic HTML for accessibility whenever possible, and apply ARIA only when necessary to enhance native elements. This approach ensures robust markup and maintains compatibility with assistive technologies.

How do I manage keyboard navigation and focus in accessible modals?▼

Manage keyboard navigation and focus in modals by trapping focus within the dialog, ensuring full keyboard operability, and providing skip links to bypass repetitive content for screen reader users.

What is the best way to test for WCAG compliance and screen reader compatibility?▼

The best way to test WCAG compliance involves combining manual and automated checks, validating color contrast, and performing screen reader testing to ensure your semantic markup and ARIA patterns function correctly.

How do I apply POUR principles to make UI components accessible?▼

Apply POUR principles to UI components by ensuring they are Perceivable, Operable, Understandable, and Robust, using explicit patterns like live regions and form accessibility guidelines during UI development.

Does this accessibility guidance cover form accessibility and live regions?▼

Yes, this accessibility guidance covers form accessibility guidelines and live regions, providing explicit patterns to ensure dynamic content updates and form inputs are fully accessible to assistive technologies.

Related Skills

Explore More Design & Creative Skills→
Hack23Hack23
9

html-accessibility

Audit static HTML/CSS sites and implement WCAG 2.1 AA accessibility improvements.

Official
Intermediate
nimadorostkarnimadorostkar
25

accessibility

Audit web interfaces for WCAG 2.2 AA conformance.

Community
Advanced
pelcherspelchers

ensuring-accessibility

Implement WCAG 2.1 AA-compliant accessibility patterns for web interfaces.

Community
Advanced
haabehaabe

a11y-check

Audits web interfaces for WCAG 2.1 AA accessibility compliance.

Community
Intermediate