skills.rest
MonumentalSystems
MonumentalSystemsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

accessibility

Implement WCAG 2.1 accessibility guidance for web and UI content.

17|5|Updated Feb 6, 2026
Search Tags:#screen reader#keyboard navigation#wcag#semantic html#color contrast#aria#accessibility audit
One-click install
npx skills add https://github.com/MonumentalSystems/Atlas-Agent-Teams --skill accessibility-monumentalsystems
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility
Source: https://github.com/MonumentalSystems/Atlas-Agent-Teams/tree/main/teams/design-ux/skills/accessibility
Command: npx skills add https://github.com/MonumentalSystems/Atlas-Agent-Teams --skill accessibility-monumentalsystems

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Accessibility expertise helps teams prevent barriers for users with disabilities by aligning UI and content with WCAG 2.1 requirements for perception, operation, understandability, and robustness.

Core Features & Use Cases

  • WCAG 2.1 Alignment: Coverage of POUR principles and common success criteria such as text alternatives, keyboard accessibility, distinguishability, and assistive-tech compatibility.
  • Screen Reader Support: Practical guidance on semantic HTML, ARIA landmarks/labels, heading structure, focus management, and reliable announcement behavior.
  • Keyboard Navigation & Focus Control: Recommendations for logical tab order, visible focus states, skip links, focus restoration, and avoiding keyboard traps.
  • Visual Accessibility Practices: Color contrast targets, responsive text scaling, touch target sizing, motion preferences, and layout resilience.
  • Form & Component Accessibility: Labeled inputs, clear error associations, and accessible roles/states for dynamic UI patterns.

Quick Start

Use the accessibility skill to audit your page for keyboard traps, missing labels/alt text, incorrect heading order, and insufficient color contrast so it meets WCAG 2.1 Level AA.

Frequently Asked Questions about accessibility

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

FAQPage Schema
How do I make my web interface usable with a screen reader?▼

Keyboard navigation requires logical tab order, visible focus states, and skip links. You must also implement focus restoration for dialogs and actively avoid keyboard traps to ensure interfaces are fully operable without a mouse.

What WCAG 2.1 success criteria do I need to meet for Level AA compliance?▼

Visual accessibility requires meeting color contrast targets, ensuring responsive text scaling, and sizing touch targets adequately. You should also respect motion preferences and maintain layout resilience across responsive designs.

How do I fix keyboard traps and manage focus in dynamic UI dialogs?▼

Fixing keyboard traps involves implementing proper focus management and focus restoration for dynamic UI dialogs. This ensures keyboard-only users can enter, navigate, and exit component patterns without losing control of the interface.

What is the best way to associate form input errors for accessible dynamic UI?▼

The best way to handle form errors is by using labeled inputs with clear error associations. Applying accessible roles and states to dynamic UI patterns ensures form validation is understandable and properly announced to users.

Related Skills

Explore More Design & Creative Skills→
calcosmiccalcosmic
9

html-css

Enforce semantic HTML, ARIA, color contrast, and flat CSS architecture.

Community
Intermediate
wredziowredzio

accessibility

Identify and remediate WCAG 2.1 AA accessibility issues in web pages.

Community
Advanced
BRANDNEWSHVTBRANDNEWSHVT

accessibility-audit

Identify and fix WCAG 2.1 AA accessibility gaps in frontend user interfaces.

Official
Advanced
lexicalninjalexicalninja
2

accessibility-design-checker

Identify accessibility issues in UI designs, wireframes, and prototypes.

Community
Intermediate