affaan-m/frontend-a11y

针对 React 和 Next.js 的可访问性模式——语义化 HTML、ARIA 属性、表单标签、键盘导航、焦点管理以及屏幕阅读器支持。适用于构建任何交互式 UI 组件或表单时使用。

编程协作开发 Agent Agent 技能代码审查调研 skill agent-skill frontend a11y affaan-m ECC ai-agent

技术栈: cursor24万+许可证: MIT开发者: affaan-m

Skill 介绍Skill 文件

重要提示：本站仅作 Skill 资源导航与收录，正文以 GitHub 原仓库为准，版权归原项目所有。

在 GitHub 查看 ↗

原文译文

以下为摘要预览，完整内容请查看 GitHub 原文。

Frontend Accessibility Patterns

Practical accessibility patterns for React and Next.js. Covers the issues most commonly flagged in code review: missing form labels, incorrect ARIA usage, non-semantic interactive elements, and broken keyboard navigation.

When to Activate

Building or reviewing form components (<input>, <select>, <textarea>)
Creating interactive elements (modals, dropdowns, tooltips, tabs)
Using <div> or <span> with onClick
Adding aria-* attributes to any element
Implementing keyboard navigation or focus management
Receiving accessibility feedback from code review tools (CodeRabbit, ESLint a11y)
Building components that must support screen readers

Form Accessibility

Missing htmlFor / id pairing and disconnected error messages are the most common issues flagged in code review.

Label Connection

// BAD: label has no connection to input — screen readers cannot associate them
<label>Email</label>
<input type="email" />

// GOOD: htmlFor matches input id
<label htmlFor="email">Email</label>
<input id="email" type="email" />

Required Fields

// BAD: visual-only asterisk conveys nothing to screen reader…

以下为摘要预览，完整内容请查看 GitHub 原文。

前端可访问性模式

针对 React 和 Next.js 的实用可访问性模式。涵盖代码评审中最常被标记的问题：缺失的表单标签、不正确的 ARIA 用法、非语义化的交互元素，以及失效的键盘导航。

何时激活

构建或评审表单组件（<input>、<select>、<textarea>）
创建交互元素（模态框、下拉菜单、工具提示、标签页）
在 <div> 或 <span> 上使用 onClick
为任何元素添加 aria-* 属性
实现键盘导航或焦点管理
收到来自代码评审工具（CodeRabbit、ESLint a11y）的可访问性反馈
构建必须支持屏幕阅读器的组件

表单可访问性

htmlFor / id 配对缺失以及错误消息未关联，是在代码评审中最常见的问题。

标签关联

// BAD：标签与输入框未关联——屏幕阅读器无法将它们关联起来
<label>Email</label>
<input type="email" />

// GOOD：htmlFor 与 input 的 id 匹配
<label htmlFor="email">Email</label>
<input id="email" type="email" />

必填字段

// BAD：仅靠视觉上的星号，对屏幕阅读器毫无意义
<label htmlFor="email">Email *</label>
<input id="email" type="email" />

// GOOD：required 启用浏览器原生校验；aria-required 向屏幕阅读器标识必填
<label htmlFor="email">
  Email <span aria-hidden="true">*</span>
</label>
<input id="email" type="email" required aria-required="true" />

错误消息

// BAD：错误文本仅在视觉上存在，未与输入框关联
<input id="email" type="email" />
<span className="error">Invalid email address</span>

// GOOD：aria-describedby 将输入框与其错误消息关联起来
// aria-invalid 向屏幕阅读器标识无效状态
<input
  id="email"
  type="email"
  aria-describedby="email-error"
  aria-invalid={!!error}
/>
{error &&…

重要提示：源文件不在本站托管，请通过 GitHub 查看与下载。

索引更新于 8/25/2026, 9:18:05 PMGitHub ↗

SKILL.md12.4 KB在 GitHub 查看 ↗

相关资源

按类型、任务、场景与标签加权推荐

yair4Data/mcp-security-analyzer

MCP · 安全审计 · 配置扫描 · 权限分析 · 开发工具

Comprehensive security testing framework for Model Context Protocol (MCP) server

itsPremkumar/mcptest

MCP · Model · Context · Protocol · 测试工具 · 调试 · 开发框架

Automated MCP Server Testing Framework

Harden

AI代理 · 安全加固 · 完整性 · 开发工具 · 代码审查

Harden AIF 是一款免费的本地 AI 编码代理安全工具。它采用后训练模型，利用您的请求和会话上下文，在工具调用运行前对其进行检查。在关键的代理安全基准测试中，它超越了前沿模型，同时将您的代码库和工具输出保留在您的本地计算机上。

Web Search Agents by Nimble

web · search · real-time · data · AI · agent · scraping · structured

网络搜索代理是针对您特定领域（例如公司信息丰富、法规研究等）的专业网络爬虫和研究代理。它们会自主学习您的使用场景，深入挖掘对您最重要的资源，从而为您的 AI 提供更深入、更相关的网络上下文

counterparty-channel-discipline

研究分析 · agent-governance · multi-agent · 渠道纪律 · rule-enforcement · workflow-policy

面向共享渠道中与外部交易方共处的代理，按渠道分级的严格提示、提及门控、静默观察以及通信自治策略。当代理加入群聊、共享渠道或私信，外部人员能够读取每条消息，并且你…

25万+

Demovanta

AI · Agent · 演示平台 · 评测 · 开发工具

。只需粘贴URL，一个真实浏览器就会打开你的网页，模拟浏览操作，并用你的母语旁白讲解屏幕上的内容