skills.rest
ravnhq
ravnhqOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-accessibility

Audit frontend projects for WCAG and ARIA compliance.

16|15|Updated Jan 16, 2026
Search Tags:#accessibility#semantic HTML#ARIA#WCAG#color contrast#focus management#UI auditing
One-click install
npx skills add https://github.com/ravnhq/ai-toolkit --skill design-accessibility
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-accessibility
Source: https://github.com/ravnhq/ai-toolkit/tree/main/skills/design-accessibility
Command: npx skills add https://github.com/ravnhq/ai-toolkit --skill design-accessibility

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill guides frontend teams to meet WCAG and ARIA best practices, ensuring accessible interfaces and compliant components from design to implementation.

Core Features & Use Cases

  • Enforces semantic HTML, proper heading structure, and meaningful alt text for images.
  • Checks for accessible labels on all form controls, visible focus indicators, and keyboard navigation.
  • Useful for UI audits, component library reviews, and accessibility remediation in live projects.

Quick Start

Analyze a React UI library to identify missing ARIA attributes, labels, or color contrast issues, and propose fixes.

Frequently Asked Questions about design-accessibility

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

FAQPage Schema
How do I audit my React UI library for WCAG and ARIA compliance?▼

Auditing a React UI library for WCAG and ARIA compliance involves analyzing components to identify missing labels, semantic HTML issues, and color contrast failures, then proposing fixes to ensure accessible interfaces.

What is the best way to check color contrast and focus management for WCAG AA?▼

Checking color contrast and focus management for WCAG AA involves enforcing visible focus indicators on interactive elements and verifying that foreground and background color ratios meet WCAG AA standards across your UI.

Does this accessibility auditing work for plain HTML and Vue apps, or only React?▼

Accessibility auditing works for plain HTML/CSS apps and Vue apps, not just React. It evaluates semantic HTML structure, keyboard navigation, and form control labeling across these frontend environments to ensure WCAG-ready interfaces.

How do I fix missing ARIA attributes and semantic HTML issues in web interfaces?▼

To fix missing ARIA attributes and semantic HTML issues in web interfaces, audit your components to enforce proper heading structures, meaningful alt text for images, and accessible labels on all form controls for complete WCAG remediation.

Why does my frontend project fail keyboard navigation and form control accessibility checks?▼

Frontend projects fail keyboard navigation and form control accessibility checks when they lack visible focus indicators, proper ARIA attributes, and accessible labels on form controls, preventing compliant keyboard navigation across the UI.

Related Skills

Explore More Design & Creative Skills→
seokan-jeongseokan-jeong
8

team-shinchan:frontend

Automate frontend task delivery for UI components, styling, and accessibility in React, Vue, or HTML/CSS.

Community
Intermediate
jonnabiojonnabio
6

accessibility-audit

Audits frontend interfaces for WCAP 2.1 AA compliance and accessibility best practices.

Community
Intermediate
kennedym-dskennedym-ds
14

accessibility-wcag

Evaluate and implement WCAG 2.1 AA accessibility patterns for frontend web development.

Community
Advanced
Anuj23105Anuj23105
1

accessibility-auditing

Tests web page and UI component accessibility compliance with WCAG 2.1 AA/AAA standards.

Community
Advanced