Habilidades accessibility-fundamentals
♿

accessibility-fundamentals

Seguro

审查 JSX 无障碍性

许多开发者在无意中为残障用户制造了障碍。此技能提供了一个系统化的检查清单,用于根据 WCAG 指南审查 JSX 组件,确保您的代码具有包容性并符合法律要求。

Suporta: Claude Codex Code(CC)
📊 69 Adequado
1

Baixar o ZIP da skill

2

Upload no Claude

Vá em Configurações → Capacidades → Skills → Upload skill

3

Ative e comece a usar

Testar

A utilizar "accessibility-fundamentals". <div onClick={handleSubmit} className="submit-btn">Submit</div>

Resultado esperado:

此元素存在无障碍问题:
1. 不支持键盘访问 - div 元素不响应 Enter/Space 键
2. 屏幕阅读器不会将其播报为按钮
3. 缺少语义角色

修复:使用 <button> 元素:
<button onClick={handleSubmit} className="submit-btn">Submit</button>

A utilizar "accessibility-fundamentals". <input type="email" placeholder="Enter your email" />

Resultado esperado:

此输入缺少无障碍性:
1. 没有可见标签 - 输入时占位符会消失
2. 屏幕阅读器无法播报其用途

修复选项:
<label>
Email
<input type="email" placeholder="Enter your email" />
</label>

或:
<label htmlFor="email">Email</label>
<input id="email" type="email" placeholder="Enter your email" />

A utilizar "accessibility-fundamentals". <button><TrashIcon /></button>

Resultado esperado:

纯图标按钮需要无障碍名称:
1. 屏幕阅读器仅播报为"按钮"而没有上下文

修复:添加 aria-label:
<button aria-label="Delete item">
<TrashIcon aria-hidden="true" />
</button>

Auditoria de Segurança

Seguro
v6 • 1/21/2026

All 63 static findings are false positives. The scanner misinterpreted markdown code block delimiters as shell execution, ARIA attributes as cryptographic patterns, and CSS color hex values as IP addresses. This is a legitimate accessibility documentation skill containing only static guidance and code examples.

2
Arquivos analisados
982
Linhas analisadas
0
achados
6
Total de auditorias
Nenhum problema de segurança encontrado
Auditado por: claude Ver Histórico de Auditoria →

Pontuação de qualidade

38
Arquitetura
100
Manutenibilidade
85
Conteúdo
20
Comunidade
100
Segurança
91
Conformidade com especificações

O Que Você Pode Construir

React 组件代码审查

在合并拉取请求之前,调用此技能来验证新的交互组件是否符合无障碍标准。捕获诸如缺少标签、div-as-button 反模式和焦点管理不当等问题。

学习包容性设计模式

新团队成员使用此技能来了解无障碍要求。该技能提供了可访问与不可访问代码模式的具体示例及解释。

功能无障碍性审计

在发布新功能之前,使用此技能验证是否符合无障碍要求。涵盖模态框、表单、导航菜单和动态内容更新。

Tente Estes Prompts

快速组件检查 
审查此 JSX 组件的无障碍问题。检查键盘无障碍性、适当的表单标签、语义化 HTML 和屏幕阅读器支持。
表单无障碍性审查 
审查此表单组件。检查每个输入是否有标签,错误消息是否使用 aria-describedby 关联,以及必填字段是否有适当的标记。
模态对话框审计 
检查此模态组件。验证焦点捕获是否有效,Escape 键是否能关闭它,键盘焦点是否被管理,以及是否有适当的 ARIA 属性。
导航菜单审查 
审查此导航组件。检查键盘导航是否有效,活动状态是否被播报,以及菜单结构是否语义化。

Melhores Práticas

  • 使用原生语义元素(<button>、<a>、<input>)而不是带有事件处理器的 div
  • 每个表单输入必须有一个可见的、关联的标签
  • 所有交互元素必须支持键盘访问并具有可见的焦点状态

Evitar

  • 使用 <div onClick> 而不是 <button> - 破坏键盘和屏幕阅读器支持
  • 移除 outline: none 而不提供替代方案 - 使键盘用户失去方向
  • 仅使用颜色来传达信息 - 对色盲用户无效

Perguntas Frequentes

文本的最小颜色对比度是多少?
普通文本需要与背景的对比度至少为 4.5:1。大文本(18px 加粗或 24px 常规)需要 3:1 的对比度。
如何使模态框具有无障碍性?
在模态框打开时将焦点捕获在其中,关闭时将焦点返回到触发元素,包括 Escape 键关闭功能,并添加 aria-modal="true"。
ARIA 的第一条规则是什么?
没有 ARIA 比错误的 ARIA 更好。首先使用原生语义化 HTML。只有在 HTML 无法表达您需要的内容时才添加 ARIA。
如何在没有工具的情况下测试无障碍性?
仅使用 Tab 键和键盘导航整个页面。验证您可以完成所有操作,焦点始终可见,并且您不会被困住。
什么是 focus-visible,何时应该使用它?
focus-visible 仅在通过键盘导航时显示焦点指示器,对鼠标用户则隐藏。使用 :focus-visible 可以兼顾两者。
如何使错误消息具有无障碍性?
使用 aria-describedby 将错误与输入关联,在无效输入上设置 aria-invalid="true",并使用 role="alert" 或 aria-live 进行播报。

Detalhes do Desenvolvedor

Licença

MIT

Repositório

https://github.com/DanielPodolsky/mentor-spec/tree/main/.claude/skills/fundamentals/accessibility

Referência

main

Estrutura de arquivos

📄 SKILL.md