skills.rest
sergiodxa
sergiodxaCOMMUNITY
Explore all skills by this author →
Website𝕏@sergiodxaGitHub

frontend-accessibility-best-practices

Apply WCAG accessibility best practices to React components.

93|9|Updated Jan 27, 2026
Search Tags:#accessibility#a11y#web development#frontend#react#wcag
One-click install
npx skills add https://github.com/sergiodxa/agent-skills --skill frontend-accessibility-best-practices
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-accessibility-best-practices
Source: https://github.com/sergiodxa/agent-skills/tree/main/skills/frontend-accessibility-best-practices
Command: npx skills add https://github.com/sergiodxa/agent-skills --skill frontend-accessibility-best-practices

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

Frequently Asked Questions about frontend-accessibility-best-practices

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

FAQPage Schema
How do I make my React components accessible to screen readers?▼

Make React components accessible to screen readers by using semantic HTML elements and implementing proper ARIA attributes to convey structural meaning and dynamic content changes to assistive technologies.

What are the WCAG best practices for keyboard navigation in web interfaces?▼

WCAG keyboard navigation best practices require ensuring all interactive elements are fully operable via keyboard, meaning users can navigate, focus, and activate UI components without relying on a mouse.

How do I handle prefers-reduced-motion in frontend web development?▼

Handle prefers-reduced-motion in frontend web development by detecting this user preference via CSS media queries or JavaScript and disabling or minimizing non-essential animations and transitions accordingly.

What is the minimum touch target size for accessible mobile web design?▼

The minimum touch target size for accessible mobile web design provides adequate spacing and dimensions for interactive elements, ensuring users can accurately activate buttons and links on touch devices.

How do I build an accessible form with proper error announcements in React?▼

Build accessible React forms by ensuring all fields have proper labels and associating error messages with inputs using ARIA attributes so screen readers announce validation feedback to users.

Related Skills

Explore More Software Engineering Skills→
duanbiao2000duanbiao2000
3

accessibility-compliance

Implement WCAG 2.2 compliant accessibility patterns for UI components.

Community
Advanced
pacphipacphi
6

accessibility-testing

Perform WCAG 2.2 accessibility testing on web applications with axe-core.

Community
Advanced
hospitaljobsinhospitaljobsin
7

frontend-design

Create production-grade frontend interfaces with React, Vue, Svelte, or vanilla HTML/CSS/JS.

Official
Advanced
airoweairowe
14

Accessibility Audit Skill

Audit web projects for WCAG 2.1 violations using axe-core and eslint-plugin-jsx-a11y.

Community
Advanced