What standards does this skill reference?

It references WCAG 2.1 AA as the minimum, with WCAG 2.2 where applicable, along with ARIA best practices and W3C/WAI documentation.

Which frameworks are considered for accessibility checks?

The skill accounts for Lit, React, and Vue implementations, ensuring ARIA is applied correctly across each rendering path and that keyboard events work consistently.

What happens if fixes are required?

The tool reports issues with severities, provides remediation steps and code examples, links to current documentation, and WAITs FOR USER APPROVAL before applying any changes.

check-accessibility

Scanned

npx machina-cli add skill AgnosticUI/agnosticui/check-accessibility --openclaw

Files (1)

SKILL.md

2.5 KB

Usage: /check-accessibility COMPONENT_NAME

Examples:

/check-accessibility button
/check-accessibility alert
/check-accessibility v2/lib/src/components/Button.ts

Check accessibility for: $ARGUMENTS

Setup:

Read .claude/PROJECT_CONTEXT.md for AgnosticUI structure and accessibility principles

Process:

Search for latest standards:
- Use WebSearch for "WCAG 2.2 [component-type] accessibility"
- Use WebSearch for "ARIA [specific-pattern] best practices"
- Fetch W3C WAI-ARIA documentation if needed for specific patterns
Locate component files:
- Core component: v2/lib/src/components/$ARGUMENTS*
- Framework implementations if relevant: v2/playgrounds/*/src/stories/*$ARGUMENTS*
- Check PROJECT_CONTEXT for AgnosticUI's accessibility standards location
Analyze against current standards:
- Semantic HTML: Proper element usage for meaning and structure
- ARIA attributes: Correct, necessary, and following latest specs
- Keyboard navigation: Tab order, focus management, keyboard shortcuts
- Focus indicators: Visible focus styles meeting contrast requirements
- Screen reader support: Meaningful labels, descriptions, live regions
- Color contrast: WCAG 2.2 AA requirements (4.5:1 text, 3:1 UI)
- Touch targets: Minimum 44x44px for interactive elements
- Motion/animation: Respects prefers-reduced-motion
Framework-specific considerations:
- Check if accessibility differs across Lit, React, Vue implementations
- Verify ARIA is applied correctly in each framework's rendering
- Test that events work with keyboard in all frameworks
Report findings:
- List issues with severity (Critical/High/Medium/Low)
- Reference specific WCAG 2.2 success criteria
- Provide remediation steps with code examples
- Link to current W3C/MDN documentation
- Note AgnosticUI-specific patterns to follow
If fixes requested:
- Propose changes that work across all frameworks
- Ensure fixes align with AgnosticUI's CSS-first approach
- WAIT FOR USER APPROVAL before implementing

AgnosticUI Accessibility Requirements:

WCAG 2.1 AA compliance minimum
Framework-agnostic solutions preferred
CSS custom properties for focus indicators
Consistent behavior across Lit, React, Vue

Source

git clone https://github.com/AgnosticUI/agnosticui/blob/master/.claude/skills/check-accessibility/SKILL.mdView on GitHub

Overview

This skill audits a UI component for accessibility issues, aligned with WCAG 2.1 AA and AgnosticUI standards. It evaluates semantic HTML, ARIA usage, keyboard navigation, focus indicators, screen reader support, color contrast, touch targets, and motion preferences across Lit, React, and Vue implementations.

How This Skill Works

It starts by reading the project context from .claude/PROJECT_CONTEXT.md to understand structure and accessibility principles. Then it searches for current standards (WCAG 2.2, ARIA best practices) and locates component files under v2/lib/src/components/$ARGUMENTS*, plus relevant framework stories. It analyzes semantic HTML, ARIA attributes, keyboard flow, focus indicators, screen reader labels, color contrast, touch targets, and motion preferences, then reports findings with severities and remediation steps, referencing WCAG and MDN docs. If fixes are requested, it will propose cross-framework changes and WAIT FOR USER APPROVAL before implementing, favoring CSS-first focus styles per AgnosticUI patterns.

When to Use It

Auditing a newly built component for accessibility
Updating an existing component to fix WCAG issues
Ensuring accessibility across Lit, React, and Vue implementations
Performing a quick accessibility smoke test before release
Verifying focus management and keyboard navigation in interactive controls

Quick Start

Step 1: Read .claude/PROJECT_CONTEXT.md to understand AgnosticUI structure and accessibility principles
Step 2: Use WebSearch/WebFetch to fetch WCAG 2.2 and ARIA guidance and locate component files (v2/lib/src/components/COMPONENT_NAME*)
Step 3: Analyze against current standards, generate a findings report with remediation steps, and await user approval for fixes

Best Practices

Anchor decisions in WCAG 2.1 AA and document the criteria addressed
Prefer semantic HTML and meaningful labels before resorting to ARIA
Ensure keyboard navigation and visible focus indicators with adequate contrast
Verify color contrast and maintain 44x44px touch targets for interactive elements
Provide framework-agnostic remediation steps and obtain user approval before applying fixes

Example Use Cases

Button component missing aria-label and lacks visible focus ring
Modal dialog missing aria-labelledby and aria-modal attributes
Custom dropdown with no keyboard navigation or focus trapping
Image used as an icon without meaningful alt text
State changes conveyed by color alone without screen reader description

Frequently Asked Questions

Add this skill to your agents