技能 frontend-accessibility
📦

frontend-accessibility

内容修订 r1 安全 ⚙️ 外部命令📁 文件系统访问

改进前端无障碍访问

前端团队可能会遗漏键盘、语义化和屏幕阅读器相关要求。此技能可指导 AI agents 构建无障碍 UI 组件。

支持: Claude Codex Code(CC)
🥉 78 青铜

使用我的智能体安装

将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。

智能体请求
Review the Skillstore skill "frontend-accessibility" from https://skillstore.io/skills/devanb-frontend-accessibility.md and its manifest at https://skillstore.io/api/skills/devanb-frontend-accessibility/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

你的智能体仍应展示其计划，并按安全策略请求必要确认。

Agent 可读资源

当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。

Markdown 详情 GET /skills/devanb-frontend-accessibility.md 已签名 manifest GET /api/skills/devanb-frontend-accessibility/manifest 已签名 lockfile GET /api/skills/devanb-frontend-accessibility/lockfile

测试它

正在使用“frontend-accessibility”。 一个只有 placeholder 标签和内联验证消息的 React 表单。

预期结果:

审查会识别缺失标签、错误播报不清晰、焦点状态较弱，并建议使用明确标签和无障碍验证文本。

正在使用“frontend-accessibility”。 一个点击后打开并包含多个操作的自定义菜单组件。

预期结果:

响应会解释所需的键盘行为、焦点移动、无障碍名称，并且仅在原生元素不足时使用 ARIA 角色。

正在使用“frontend-accessibility”。 一个标题级别跳跃且 landmarks 不清晰的页面布局。

预期结果:

审计建议采用逻辑化的标题顺序、改进 landmarks，并为屏幕阅读器用户提供更清晰的导航结构。

安全审计

安全
v10 • 2026/7/9 打开版本化报告

The inline-code backticks on line 12 are a false positive because they only mark file extensions. The relative path on line 29 is confirmed because it points outside the skill directory. No prompt injection or data exfiltration intent was found.

1
已扫描文件
30
分析行数
1
复核项
0
已忽略误报
能力复核项 (1)

这些是真实的本地能力，对此技能可能是预期行为，因此需要复核，但不会按已确认恶意行为计分。

高
SKILL.md:29
Path traversal sequence
[frontend accessibility](../../../agent-os/standards/frontend/accessibility.md)
Line 29 points to ../../../agent-os/standards/frontend/accessibility.md, a path outside the skill directory. This creates a path traversal and packaging-boundary risk.

风险因素

⚙️ 外部命令 (1)
SKILL.md:12
📁 文件系统访问 (1)
SKILL.md:29
审计者: codex 查看审计历史 →
分享与引用此报告

分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。

打开版本化报告
安全评估

复制报告链接

https://skillstore.io/skills/devanb-frontend-accessibility/audits/10?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 徽章

[![Skillstore security assessment](https://skillstore.io/badges/skills/devanb-frontend-accessibility/security.svg)](https://skillstore.io/skills/devanb-frontend-accessibility?utm_source=security_passport_badge)

HTML 徽章

<a href="https://skillstore.io/skills/devanb-frontend-accessibility?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/devanb-frontend-accessibility/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/devanb-frontend-accessibility.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>
学术引用 (APA · BibTeX · CFF)

APA 引用

DevanB. (2026). frontend-accessibility security audit report (audit version 10) [Author version unspecified]. Skillstore. https://skillstore.io/skills/devanb-frontend-accessibility/audits/10

BibTeX 引用

@techreport{devanb-devanb-frontend-accessibility-2026, author = {DevanB}, title = {frontend-accessibility security audit report (audit version 10)}, institution = {Skillstore}, year = {2026}, number = {10}, url = {https://skillstore.io/skills/devanb-frontend-accessibility/audits/10}, note = {Author version unspecified} }

CITATION.cff

cff-version: 1.2.0 message: "If you use this Skill, cite its author and this versioned security audit report." title: "frontend-accessibility security audit report (audit version 10)" version: "unspecified" type: report authors: - name: "DevanB" date-released: "2026-07-09" url: "https://skillstore.io/skills/devanb-frontend-accessibility/audits/10" identifiers: - type: other value: "skillstore:devanb-frontend-accessibility:audit:10" description: "Skillstore immutable audit report identifier"

比较变体

2 个可安装变体

每位作者的技能都保持为独立的可安装项。推荐变体按 Skillstore 证据排序。

为什么此变体排名第一

Skillstore 评分最高
EIS-ITS 推荐

eis-its-frontend-accessibility

Skillstore 评分 79
证据置信度 高
Skillstore 使用量 64
已更新

2026-09-09

DevanB 当前

devanb-frontend-accessibility

Skillstore 评分 78
证据置信度 高
Skillstore 使用量 27
已更新

2026-09-09

Skillstore 评分

评分依据 证据置信度: 高
55
架构
85
可维护性
87
内容
69
社区
83
规范符合性

你能构建什么

审查 React 组件

在发布前发现组件标记、标签、焦点状态和 ARIA 使用中的无障碍缺口。

构建无障碍表单

创建具有清晰标签、验证消息、键盘支持和屏幕阅读器友好结构的表单。

审计交互式 UI

评估对话框、菜单、按钮和动态内容的焦点控制与键盘行为。

试试这些提示

检查一个组件 
审查此组件的无障碍问题。重点关注语义化 HTML、标签、键盘支持、对比度和屏幕阅读器行为。
改进一个表单 
改进此表单的无障碍访问。确保每个输入都有标签，验证信息会被播报，并且键盘用户可以完成整个流程。
修复一个模态框流程 
审计此模态框或对话框流程。检查焦点捕获、初始焦点、escape 行为、焦点返回、播报以及键盘交互。
端到端审查一个功能 
审查此前端工作流中的 WCAG 无障碍风险。针对语义、焦点、对比度、标题、ARIA 和辅助技术支持提供按优先级排序的修复建议。

最佳实践

  • 在添加 ARIA 角色或自定义交互模型之前，优先使用原生 HTML 控件。
  • 使用仅键盘导航和至少一种屏幕阅读器测试重要流程。
  • 验证文本、控件、焦点指示器、禁用状态和错误状态的对比度。

避免

  • 当 button 或 link 才是正确控件时，不要使用可点击的 div 元素。
  • 不要隐藏焦点指示器，也不要只依赖指针交互。
  • 不要在没有匹配行为和无障碍名称的情况下添加 ARIA 属性。

常见问题

此技能会运行自动化无障碍测试吗？
不会。它提供可补充自动化测试的实现和审查指导。
它能帮助满足 WCAG 要求吗？
可以。它会提示检查常见 WCAG 关注点，例如对比度、语义、键盘访问和焦点可见性。
它支持 React 项目吗？
可以。该指导专为 TSX 和 JSX 文件中的 React 组件设计。
它可以审查表单吗？
可以。它重点关注标签、输入关系、验证消息以及键盘用户能否完成流程。
它能取代屏幕阅读器测试吗？
不能。对于重要流程和辅助技术行为，手动测试仍然是必要的。
为什么审计会警告文件路径？
该技能引用了其自身目录之外的文件，因此作者应内联该指导或以安全方式打包它。

开发者详情

作者

DevanB

许可证

MIT

Skillstore 修订

r1

版本提示

作者未声明版本。

仓库

https://github.com/DevanB/lucidlog/tree/master/.claude/skills/frontend-accessibility

引用

0519034dad657fb1f7706e0550e962beeda73fdf

维护新鲜度

2026/7/18

使用量

4 次下载 · 155 次浏览

文件结构

📄 SKILL.md

DevanB 的更多技能

查看全部

相关技能

查看全部