skills.rest
jaypaulb
jaypaulbCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

Frontend Accessibility

Identify and enforce frontend accessibility compliance in web application code.

Updated Aug 23, 2026
Search Tags:#AI guidance#inclusive design#accessibility#web development#ARIA#WCAG#frontend#UI/UX
One-click install
npx skills add https://github.com/jaypaulb/CanvusAPI-LLMDemo --skill frontend-accessibility-jaypaulb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Frontend Accessibility
Source: https://github.com/jaypaulb/CanvusAPI-LLMDemo/tree/main/.claude/skills/frontend-accessibility
Command: npx skills add https://github.com/jaypaulb/CanvusAPI-LLMDemo --skill frontend-accessibility-jaypaulb

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Ensuring web accessibility for all users, including those with disabilities, is crucial but often overlooked, leading to exclusion. This Skill guides the AI to build frontend interfaces that are usable by everyone, promoting inclusive design and reducing compliance efforts.

Core Features & Use Cases

  • ARIA Attribute Implementation: Instructs AI on correctly applying ARIA roles and properties.
  • Keyboard Navigation: Guides AI to ensure all interactive elements are navigable via keyboard.
  • Use Case: When designing a new navigation menu, activate this Skill to ensure the AI automatically includes appropriate ARIA labels, keyboard focus management, and semantic HTML, making it accessible to screen reader users.

Quick Start

Review the attached navigation_bar.html and suggest improvements for WCAG 2.1 AA accessibility compliance.

Frequently Asked Questions about Frontend Accessibility

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

FAQPage Schema
How do I ensure my website meets WCAG accessibility standards?▼

WCAG compliance requires implementing semantic HTML, ARIA labels, keyboard navigation, and sufficient color contrast. This Skill guides AI to automatically identify and enforce these requirements across React, Vue, Angular, and vanilla HTML/CSS during development and code review.

What's the best way to make a React component accessible to screen readers?▼

Apply semantic HTML elements, add ARIA roles and properties where needed, and ensure keyboard focus management. This Skill helps AI implement screen reader compatibility by enforcing proper labeling and interactive element structure in your component code.

Can I use this for keyboard navigation testing in my web application?▼

Yes. This Skill guides AI to ensure all interactive elements are keyboard-navigable and includes focus management logic. It works across modern frameworks and vanilla HTML/CSS to validate keyboard accessibility compliance.

How do I audit existing code for accessibility violations?▼

This Skill identifies and enforces accessibility compliance in web application code through automated checks and linting. It surfaces WCAG/ARIA violations in semantic HTML, ARIA labeling, color contrast, and keyboard navigation.

Why should I prioritize ARIA attributes in component libraries?▼

ARIA attributes expose component intent and state to assistive technologies, making UIs usable for disabled users. This Skill ensures AI correctly applies ARIA roles and properties to components, reducing exclusion and compliance effort.

Related Skills

Explore More Software Engineering Skills→
charlesjones-devcharlesjones-dev
34

accessibility-auditing

Audit codebases and live sites for WCAG 2.1/2.2 compliance gaps.

Community
Advanced
Ethical-AI-SyndicateEthical-AI-Syndicate
1

outcome-usage-monitor

Design production monitoring frameworks for AI capabilities with usage and risk tracking.

Official
Advanced
lexicalninjalexicalninja
2

accessibility-design-checker

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

Community
Intermediate
rajyeole6rajyeole6

agency-accessibility-auditor

Audits digital interfaces against WCAG 2.2 standards for accessibility and generates remediation reports.

Community
Advanced