skills.rest
MARUCIE
MARUCIECOMMUNITY
Explore all skills by this author →
GitHub

accessibility

Build and audit UI components for WCAG AA conformance with semantic HTML, ARIA, and keyboard support.

1|Updated Mar 18, 2026
Search Tags:#accessibility#screen reader#keyboard navigation#wcag#contrast ratio#aria#axe
One-click install
npx skills add https://github.com/MARUCIE/openclaw-foundry --skill accessibility-marucie
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility
Source: https://github.com/MARUCIE/openclaw-foundry/tree/main/web/public/packs/spellbook-frontend-engineer/skills/accessibility
Command: npx skills add https://github.com/MARUCIE/openclaw-foundry --skill accessibility-marucie

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? UI components often fail keyboard users, screen reader users, and low-vision users because developers skip semantic HTML, misuse ARIA, or never test contrast and focus management. This Skill provides concrete patterns and checklists to build accessible interfaces and pass WCAG AA audits. ## Core Features & Use Cases - Semantic HTML and ARIA guidance: Rules for landmarks, heading hierarchy, roles, states, and common ARIA anti-patterns to avoid. - Keyboard and focus management: Key patterns per widget type plus TypeScript implementations of focus trapping and focus restoration for modal dialogs. - WCAG conformance and testing: Contrast ratio targets, form labeling patterns, image alt-text rules, and automated testing with axe, pa11y, and Playwright. - Use Case: When building a custom dropdown menu, apply the listbox role pattern with arrow-key navigation, aria-expanded state, and Escape handling, then verify it with an axe scan and a manual keyboard walkthrough. ## Quick Start Review this modal dialog component for WCAG AA accessibility and fix any keyboard navigation, ARIA, or contrast issues.

Frequently Asked Questions about accessibility

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

FAQPage Schema
How do I make a modal dialog accessible for keyboard users?▼

Move focus into the modal when it opens, trap Tab and Shift+Tab within its focusable elements, close it with Escape, and return focus to the trigger element on close. Use role="dialog" with aria-modal="true" and aria-labelledby pointing to the title.

When should I use ARIA attributes instead of native HTML?▼

Use ARIA only as a last resort when native HTML cannot express the semantics. Prefer native elements like button, input, and select first, then native attributes like disabled or required, and only then ARIA roles and states for custom widgets.

What contrast ratio does WCAG AA require for text?▼

WCAG AA requires 4.5:1 for normal text under 18pt, 3:1 for large text of 18pt or 14pt bold, and 3:1 for UI components and icons. AAA raises these to 7:1 and 4.5:1 respectively.

Can automated tools like axe catch all accessibility issues?▼

No, automated scans like axe and pa11y catch roughly 30% of WCAG issues. Focus order, reading order, and screen reader announcements require manual verification with keyboard navigation and tools like NVDA or VoiceOver.

Why is using placeholder text as a form label a problem?▼

Placeholder text disappears when the input is focused and typically fails contrast requirements. Every input needs an associated visible label element linked via for and id attributes, with errors connected through aria-describedby.

Related Skills

Explore More Software Engineering Skills→
UnicornUnicorn

ui-design-agent

Design UI patterns, components, and design systems for web and mobile applications.

Official
Advanced
hopeoverturehopeoverture
6

a11y-checker-ci

Automate WCAG accessibility checks in CI/CD pipelines and generate PR reports.

Community
Advanced
juricamigac-from-hrjuricamigac-from-hr

testing-blocks

Validate AEM Edge Delivery code changes with browser-based checks and linting.

Official
Advanced
dasherswdashersw
1.2k

gea-ui-components

Assemble accessible Tailwind-styled UI components with Zag.js state machines.

Community
Intermediate