Skills
.Work. You
Rest

frontend-accessibility-best-practices

Community

Build inclusive web interfaces.

Software Engineering#accessibility#a11y#web development#frontend#react#wcag
Authorsergiodxa
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill helps developers create more accessible web interfaces by providing best practices and code examples for ensuring compliance with WCAG standards, making applications usable by everyone, including those with disabilities.

Core Features & Use Cases

  • Semantic HTML: Guides the use of proper HTML elements for structure and meaning.
  • Screen Reader Support: Details how to implement ARIA attributes and hidden text for assistive technologies.
  • Keyboard Navigation: Ensures all interactive elements are navigable and operable via keyboard.
  • User Preferences: Addresses respecting user settings like prefers-reduced-motion.
  • Touch Targets: Provides guidelines for adequate sizing and spacing of interactive elements on touch devices.
  • Use Case: When developing a new React component for a form, use this Skill to ensure all form fields have proper labels, error messages are announced, and the entire form is keyboard-navigable.

Quick Start

Review the frontend accessibility best practices for React components to improve your UI's inclusivity.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: frontend-accessibility-best-practices
Download link: https://github.com/sergiodxa/agent-skills/archive/main.zip#frontend-accessibility-best-practices

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.