Frontend Accessibility Best Practices

sergiodxa/agent-skills/skills/frontend-accessibility-best-practices

作者 sergiodxa40e21b46189d无许可证90 个星标收录于 2026年10月8日更新于 2026年10月8日仓库8个月前更新

Accessibility (a11y) best practices for React components. Use when creating UI components, forms, interactive elements, or reviewing code for accessibility compliance.

仅含说明Software Development

AI 生成的概览

面向 React UI 组件的无障碍最佳实践，涵盖语义化 HTML、屏幕阅读器、键盘焦点与动效偏好。

功能: 该技能为 React 应用提供七条无障碍规则，分为语义化 HTML 与结构、屏幕阅读器、键盘与焦点、用户偏好四类。每条规则都有独立的参考文件，并用代码示例展示不推荐与推荐写法。它只提供指导，不生成文件或产物。
适用场景: 适用于创建新的 UI 组件、构建表单和交互元素、添加动态内容或通知、实现导航模式，或审查代码的无障碍合规性时。
运行要求: 无需脚本或工具，仅为说明与参考文档。示例假定使用 React 项目，部分代码片段涉及 react-aria-components、usePrefersReducedMotion 钩子以及 Tailwind 风格的类名。

Accessibility Best Practices

Accessibility patterns for building inclusive React applications following WCAG standards. Contains 7 rules across 4 categories focused on semantic HTML, screen reader support, keyboard navigation, and user preferences.

When to Apply

Reference these guidelines when:

Creating new UI components
Building forms and interactive elements
Adding dynamic content or notifications
Implementing navigation patterns
Reviewing code for accessibility

Rules Summary

Semantic HTML & Structure (HIGH)

semantic-html-landmarks - @rules/semantic-html-landmarks.md

Use semantic HTML elements for page structure.

tsx

// Bad: divs with class names<div className="header">...</div><div className="nav">...</div><div className="content">...</div>
// Good: semantic elements<header>...</header><nav aria-label={t("Primary")}>...</nav><main>...</main><footer>...</footer>

// Bad: divs with class names<div className="header">...</div><div className="nav">...</div><div className="content">...</div>
// Good: semantic elements<header>...</header><nav aria-label={t("Primary")}>...</nav><main>...</main><footer>...</footer>

Screen Readers (MEDIUM)

screen-reader-sr-only - @rules/screen-reader-sr-only.md

Use sr-only class for visually hidden text.

tsx

// Icon-only buttons need accessible labels<Button variant="icon" onPress={onClose}>  <XMarkIcon aria-hidden="true" />  <span className="sr-only">{t("Close")}</span></Button>
// Visually hidden section headings<section>  <h2 className="sr-only">{t("Search results")}</h2>  <SearchResultsList /></section>

// Icon-only buttons need accessible labels<Button variant="icon" onPress={onClose}>  <XMarkIcon aria-hidden="true" />  <span className="sr-only">{t("Close")}</span></Button>
// Visually hidden section headings<section>  <h2 className="sr-only">{t("Search results")}</h2>  <SearchResultsList /></section>

aria-live-regions - @rules/aria-live-regions.md

Announce dynamic content changes to screen readers.

tsx

// Error messages - announced immediately{  error && (    <p role="alert" className="text-failure-600">      {error}    </p>  );}
// Status updates - announced politely<div role="status" aria-live="polite">  {t("{{count}} results found", { count })}</div>;

// Error messages - announced immediately{  error && (    <p role="alert" className="text-failure-600">      {error}    </p>  );}
// Status updates - announced politely<div role="status" aria-live="polite">  {t("{{count}} results found", { count })}</div>;

Keyboard & Focus (HIGH)

keyboard-navigation - @rules/keyboard-navigation.md

Use semantic elements for built-in keyboard support.

tsx

// Bad: div with onClick not keyboard accessible<div onClick={handleClick}>Click me</div>
// Good: button has Enter/Space support<button onClick={handleClick}>Click me</button>
// Good: react-aria Button handles everythingimport { Button } from "react-aria-components";<Button onPress={handlePress}>Click me</Button>

// Bad: div with onClick not keyboard accessible<div onClick={handleClick}>Click me</div>
// Good: button has Enter/Space support<button onClick={handleClick}>Click me</button>
// Good: react-aria Button handles everythingimport { Button } from "react-aria-components";<Button onPress={handlePress}>Click me</Button>

focus-management - @rules/focus-management.md

Show visible focus indicators and trap focus in modals.

tsx

// Always use focus-visible for focus styles<button className="focus-visible:ring-2 focus-visible:ring-teal-600">  Click me</button>;
// react-aria Modal handles focus trapping automaticallyimport { Modal, Dialog } from "react-aria-components";<Modal isOpen={isOpen}>  <Dialog>{/* Focus automatically trapped here */}</Dialog></Modal>;

// Always use focus-visible for focus styles<button className="focus-visible:ring-2 focus-visible:ring-teal-600">  Click me</button>;
// react-aria Modal handles focus trapping automaticallyimport { Modal, Dialog } from "react-aria-components";<Modal isOpen={isOpen}>  <Dialog>{/* Focus automatically trapped here */}</Dialog></Modal>;

User Preferences (MEDIUM)

reduced-motion - @rules/reduced-motion.md

Respect prefers-reduced-motion setting.

tsx

import { usePrefersReducedMotion } from "~/hooks/use-prefers-reduced-motion";
// CSS approach<div className="animate-bounce motion-reduce:animate-none">  Bouncing content</div>;
// JS approachfunction AnimatedCounter({ value }) {  let prefersReducedMotion = usePrefersReducedMotion();  if (prefersReducedMotion) return <span>{value}</span>;  return <CountUp target={value} />;}

import { usePrefersReducedMotion } from "~/hooks/use-prefers-reduced-motion";
// CSS approach<div className="animate-bounce motion-reduce:animate-none">  Bouncing content</div>;
// JS approachfunction AnimatedCounter({ value }) {  let prefersReducedMotion = usePrefersReducedMotion();  if (prefersReducedMotion) return <span>{value}</span>;  return <CountUp target={value} />;}

touch-targets - @rules/touch-targets.md

Ensure 44x44px minimum touch targets.

tsx

// Icon buttons need explicit sizing<Button variant="icon" className="h-11 w-11">  <XMarkIcon className="h-5 w-5" />  <span className="sr-only">{t("Close")}</span></Button>
// Links need padding for tappable area<Link to={href} className="block py-3 px-4">  {label}</Link>

// Icon buttons need explicit sizing<Button variant="icon" className="h-11 w-11">  <XMarkIcon className="h-5 w-5" />  <span className="sr-only">{t("Close")}</span></Button>
// Links need padding for tappable area<Link to={href} className="block py-3 px-4">  {label}</Link>

Key Files

app/components/heading.tsx - Region, Heading, Main components
app/hooks/use-prefers-reduced-motion.ts - Reduced motion hook
app/components/field/field.tsx - Accessible form field component

来源与署名

来源：sergiodxa/agent-skills位于skills/frontend-accessibility-best-practices提交40e21b4

许可证：无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

Frontend Accessibility Best Practices

Accessibility Best Practices

When to Apply

Rules Summary

Semantic HTML & Structure (HIGH)

semantic-html-landmarks - @rules/semantic-html-landmarks.md

Screen Readers (MEDIUM)

screen-reader-sr-only - @rules/screen-reader-sr-only.md

aria-live-regions - @rules/aria-live-regions.md

Keyboard & Focus (HIGH)

keyboard-navigation - @rules/keyboard-navigation.md

focus-management - @rules/focus-management.md

User Preferences (MEDIUM)

reduced-motion - @rules/reduced-motion.md

touch-targets - @rules/touch-targets.md

Key Files

来源与署名

更多来自 sergiodxa/agent-skills 的技能

Frontend React Best Practices

Frontend Testing Best Practices

Frontend Tailwind Best Practices

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices