skills.rest
robinade
robinadeCOMMUNITY
Explore all skills by this author →
GitHub

Frontend Accessibility

Audit frontend code for semantic HTML, ARIA, contrast, and keyboard navigation.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/robinade/persona-theater --skill frontend-accessibility-robinade
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Frontend Accessibility
Source: https://github.com/robinade/persona-theater/tree/main/.claude/skills/frontend-accessibility
Command: npx skills add https://github.com/robinade/persona-theater --skill frontend-accessibility-robinade

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill guides teams to build frontend interfaces that are accessible to users with disabilities, reducing friction and ensuring inclusive experiences.

Core Features & Use Cases

  • Accessibility Audits: Check semantic HTML, ARIA roles, keyboard navigation, color contrast, and focus management.
  • Design-Code Alignment: Align components with WCAG guidelines and accessible design tokens for consistency across the app.
  • Use Case: When reviewing a new UI component, run this skill to verify semantic structure and keyboard operability before shipping.

Quick Start

Prompt the AI to audit the current frontend codebase for semantic HTML, ARIA labeling, color contrast, and keyboard navigation support.

Frequently Asked Questions about Frontend Accessibility

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

FAQPage Schema
How do I check my frontend codebase for WCAG compliance?▼

To check WCAG compliance, prompt the AI to audit your frontend codebase for semantic HTML, ARIA labeling, color contrast, and keyboard navigation support, verifying alignment with accessibility standards.

What is the best way to ensure keyboard operability and focus management in single-page apps?▼

The best way to ensure keyboard operability and focus management in single-page apps is to apply accessibility best practices during UI development, verifying keyboard navigation and focus handling before shipping components.

Can I use this to audit ARIA roles and semantic structure in a component library?▼

Yes, you can use this to audit ARIA roles and semantic structure in a component library by running the skill to verify semantic HTML and ARIA usage, ensuring inclusive experiences across standard web interfaces.

How do I align UI components with accessible design tokens and WCAG guidelines?▼

To align UI components with accessible design tokens and WCAG guidelines, apply this skill during development and review to enforce compliance, ensuring design-code alignment and consistency across the application.

What frontend accessibility issues does this skill check during a UI review?▼

During a UI review, this skill checks semantic HTML structure, ARIA roles, keyboard navigation, color contrast, and focus management to guide teams in building frontend interfaces accessible to users with disabilities.

Related Skills

BambibannersBambibanners
1

Accessibility Audit (WCAG)

Scan React/HTML source files for WCAG accessibility violations and generate line-referenced reports.

Community
Intermediate
SensLiaoSensLiao

qa-a11y-compliance

Scan web applications for WCAG 2.2 AA accessibility compliance.

Community
Advanced
launchapp-devlaunchapp-dev
38

theming-system

Design scalable theming architecture with layered tokens for runtime theme switching.

Official
Advanced
gwpjpgwpjp
3

accessibility-auditor

Audit running web applications for accessibility issues via the accessibility tree and keyboard navigation.

Community
Intermediate