frontend-accessibility-best-practices by sergiodxa/agent-skills
npx skills add https://github.com/sergiodxa/agent-skills --skill frontend-accessibility-best-practices遵循 WCAG 标准构建包容性 React 应用程序的无障碍模式。包含 4 个类别下的 7 条规则,重点关注语义化 HTML、屏幕阅读器支持、键盘导航和用户偏好设置。
在以下情况下参考这些指南:
使用语义化 HTML 元素构建页面结构。
// 错误:使用带类名的 div
<div className="header">...</div>
<div className="nav">...</div>
<div className="content">...</div>
// 正确:使用语义化元素
<header>...</header>
<nav aria-label={t("Primary")}>...</nav>
<main>...</main>
<footer>...</footer>
使用 sr-only 类为视觉上隐藏的文本提供支持。
// 纯图标按钮需要无障碍标签
<Button variant="icon" onPress={onClose}>
<XMarkIcon aria-hidden="true" />
<span className="sr-only">{t("Close")}</span>
</Button>
// 视觉上隐藏的区域标题
<section>
<h2 className="sr-only">{t("Search results")}</h2>
<SearchResultsList />
</section>
向屏幕阅读器播报动态内容变化。
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
// 错误消息 - 立即播报
{
error && (
<p role="alert" className="text-failure-600">
{error}
</p>
);
}
// 状态更新 - 礼貌地播报
<div role="status" aria-live="polite">
{t("{{count}} results found", { count })}
</div>;
使用语义化元素以获得内置键盘支持。
// 错误:带 onClick 的 div 无法通过键盘访问
<div onClick={handleClick}>Click me</div>
// 正确:按钮支持 Enter/Space 键
<button onClick={handleClick}>Click me</button>
// 正确:react-aria Button 处理所有情况
import { Button } from "react-aria-components";
<Button onPress={handlePress}>Click me</Button>
显示可见的焦点指示器,并在模态框中捕获焦点。
// 始终使用 focus-visible 设置焦点样式
<button className="focus-visible:ring-2 focus-visible:ring-teal-600">
Click me
</button>;
// react-aria Modal 自动处理焦点捕获
import { Modal, Dialog } from "react-aria-components";
<Modal isOpen={isOpen}>
<Dialog>{/* 焦点自动在此捕获 */}</Dialog>
</Modal>;
尊重 prefers-reduced-motion 设置。
import { usePrefersReducedMotion } from "~/hooks/use-prefers-reduced-motion";
// CSS 方法
<div className="animate-bounce motion-reduce:animate-none">
Bouncing content
</div>;
// JS 方法
function AnimatedCounter({ value }) {
let prefersReducedMotion = usePrefersReducedMotion();
if (prefersReducedMotion) return <span>{value}</span>;
return <CountUp target={value} />;
}
确保最小触摸目标尺寸为 44x44 像素。
// 图标按钮需要明确指定尺寸
<Button variant="icon" className="h-11 w-11">
<XMarkIcon className="h-5 w-5" />
<span className="sr-only">{t("Close")}</span>
</Button>
// 链接需要内边距以提供可点击区域
<Link to={href} className="block py-3 px-4">
{label}
</Link>
app/components/heading.tsx - Region、Heading、Main 组件app/hooks/use-prefers-reduced-motion.ts - 减少动画钩子app/components/field/field.tsx - 无障碍表单字段组件每周安装量
218
代码仓库
GitHub 星标数
80
首次出现
2026年1月28日
安全审计
已安装于
opencode193
codex191
github-copilot182
gemini-cli180
cursor167
kimi-cli156
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.
Reference these guidelines when:
Use semantic HTML elements for page structure.
// 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>
Use sr-only class for visually hidden text.
// 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>
Announce dynamic content changes to screen readers.
// 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>;
Use semantic elements for built-in keyboard support.
// 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 everything
import { Button } from "react-aria-components";
<Button onPress={handlePress}>Click me</Button>
Show visible focus indicators and trap focus in modals.
// 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 automatically
import { Modal, Dialog } from "react-aria-components";
<Modal isOpen={isOpen}>
<Dialog>{/* Focus automatically trapped here */}</Dialog>
</Modal>;
Respect prefers-reduced-motion setting.
import { usePrefersReducedMotion } from "~/hooks/use-prefers-reduced-motion";
// CSS approach
<div className="animate-bounce motion-reduce:animate-none">
Bouncing content
</div>;
// JS approach
function AnimatedCounter({ value }) {
let prefersReducedMotion = usePrefersReducedMotion();
if (prefersReducedMotion) return <span>{value}</span>;
return <CountUp target={value} />;
}
Ensure 44x44px minimum touch targets.
// 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>
app/components/heading.tsx - Region, Heading, Main componentsapp/hooks/use-prefers-reduced-motion.ts - Reduced motion hookapp/components/field/field.tsx - Accessible form field componentWeekly Installs
218
Repository
GitHub Stars
80
First Seen
Jan 28, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode193
codex191
github-copilot182
gemini-cli180
cursor167
kimi-cli156
agentation - AI智能体可视化UI反馈工具,连接人眼与代码的桥梁
5,400 周安装
AI内容流水线教程:使用inference.sh CLI构建多步骤AI创作工作流
7,400 周安装
Google Veo 视频生成教程 - 使用 inference.sh CLI 快速生成高质量AI视频
7,400 周安装
TypeSpec 智能体创建工具 - 为 Microsoft 365 Copilot 快速构建声明式 AI 助手
7,500 周安装
Ruby MCP 服务器生成器 - 快速构建生产级 MCP 服务器,支持工具、提示和资源
7,500 周安装
Power Platform MCP连接器套件 - 为Copilot Studio生成自定义连接器,集成AI与自动化
7,500 周安装
MCP服务器构建器 - 快速构建生产就绪的AI工具与交互式小部件服务器
7,500 周安装