skills.rest
ianyimi
ianyimiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

Frontend Accessibility

Identify frontend accessibility issues in code and propose fixes.

1|Updated Jun 25, 2025
Search Tags:#inclusive design#accessibility#web development#WCAG#frontend#UI/UX#compliance
One-click install
npx skills add https://github.com/ianyimi/obsidian-mcp-macros --skill frontend-accessibility-ianyimi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Frontend Accessibility
Source: https://github.com/ianyimi/obsidian-mcp-macros/tree/main/.claude/skills/frontend-accessibility
Command: npx skills add https://github.com/ianyimi/obsidian-mcp-macros --skill frontend-accessibility-ianyimi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses the critical issue of websites and applications being unusable by individuals with disabilities, leading to exclusion, poor user experience, and potential legal risks.

Core Features & Use Cases

  • WCAG Compliance: Directs Claude to implement frontend code that adheres to WCAG guidelines and accessibility best practices.
  • Inclusive Design: Ensures semantic HTML, proper ARIA attributes, keyboard navigation, and screen reader compatibility.
  • Use Case: When developing a new UI component, activate this skill to guide Claude in writing accessible HTML and CSS, ensuring it's usable by all users from the start, saving costly retrofits.

Quick Start

Apply the 'Frontend Accessibility' skill to review the 'LoginButton' component in 'src/components/LoginButton.jsx' and suggest accessibility improvements.

Frequently Asked Questions about Frontend Accessibility

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

FAQPage Schema
How do I identify and fix accessibility issues in frontend code?▼

Accessibility issues in frontend code include missing ARIA labels, poor color contrast, non-semantic HTML, and broken keyboard navigation. This Skill scans your codebase to detect these problems and outputs concrete, implementation-ready fixes aligned with WCAG guidelines and your project practices.

What does WCAG compliance mean for web development?▼

WCAG (Web Content Accessibility Guidelines) are established standards ensuring websites work for all users, including those with disabilities. Compliance covers semantic HTML, screen reader compatibility, keyboard navigation, color contrast ratios, and responsive design—making your UI usable by everyone from the start.

Can I make an existing UI component accessible without rewriting it?▼

Yes. This Skill reviews your existing components—like buttons, forms, and navigation—and suggests targeted accessibility improvements: adding ARIA attributes, fixing semantic HTML, improving keyboard support, and adjusting color contrast. Changes are incremental and fit your current project structure.

How do screen readers interact with frontend code?▼

Screen readers parse semantic HTML and ARIA labels to announce content and structure to users. This Skill ensures your code includes proper heading hierarchy, alt text, ARIA roles, and labels so assistive technology can interpret and convey your UI accurately.

Why should I prioritize keyboard navigation in UI design?▼

Keyboard navigation is essential for users who cannot use a mouse, including those with mobility impairments or using assistive technology. This Skill validates that all interactive elements are reachable via Tab, Enter, and arrow keys, and that focus states are visible and logical.

Does this work with different frontend frameworks?▼

Yes. This Skill applies to any frontend codebase regardless of framework—React, Vue, Angular, or vanilla JavaScript. It reviews accessible UI components, semantic HTML, ARIA labeling, and responsive design patterns universally, outputting guidance tailored to your project practices.

Related Skills

Explore More Software Engineering Skills→
whilpwhilp

tests

Audit GitHub repository test suites for coverage gaps and fixes.

Community
Intermediate
telum-aitelum-ai
2

visual-testing

Validate UI components against design tokens and WCAG AA standards.

Official
Advanced
sanky369sanky369
29

accessibility-excellence

Audit web applications for WCAG compliance and accessibility gaps.

Community
Basic
bomberoxenviosdosruedasbomberoxenviosdosruedas

agency-accessibility-auditor

Audit digital interfaces for WCAG 2.2 AA compliance with assistive technologies.

Community
Advanced