mcpField
E
experience-lwc-accessibility-validate

experience-lwc-accessibility-validate

github.com/forcedotcom测试与质量1.1k1.1k 次安装1 天前更新
代码仓库

关于 experience-lwc-accessibility-validate

用于 Web 组件无障碍审查的技能，适用于处理组件可见或交互界面的 HTML、JavaScript 和 CSS。它聚焦 WCAG 2.2 问题及可执行修复，不涉及无关的代码审查事项。

主要功能

  1. 01聚焦 WCAG 2.2 的审查
  2. 02覆盖适用的成功准则
  3. 03提供可执行的问题修复
  4. 04指导谨慎使用 WAI-ARIA
  5. 05支持基于截图的视觉审查

适用场景

  1. 01检查组件标记中的无障碍违规
  2. 02检查键盘交互与焦点行为
  3. 03评估表单、标签和错误反馈
  4. 04通过截图评估对比度与重排

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/forcedotcom/sf-skills --skill experience-lwc-accessibility-validate

安装后在 Claude Code 中输入/experience-lwc-accessibility-validate确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/reviewers/
sc-1-1-1-non-text-content.md
sc-1-3-1-i-lists.md
sc-1-3-1-ii-tables.md
sc-1-3-1-iii-form-labels.md
sc-1-3-1-iv-regions.md
sc-1-3-1-v-groups.md
sc-1-3-5-identify-input.md
sc-1-4-3-contrast.md
sc-2-1-1-keyboard.md
sc-2-4-4-link-purpose.md
sc-2-4-6-headings-labels.md
sc-2-5-1-pointer-gestures.md
sc-2-5-2-pointer-cancellation.md
sc-2-5-3-label-in-name.md
sc-2-5-7-dragging-movement.md
sc-3-2-1-on-focus.md
sc-3-2-2-on-input.md
sc-3-3-1-error-identification.md
sc-3-3-2-labels-instructions.md
sc-3-3-3-error-suggestion.md
sc-4-1-2-i-name.md
sc-4-1-2-ii-role.md
sc-4-1-2-iii-value.md
references/vision/
sc-1-1-1-non-text-content.md
sc-1-4-1-use-of-color.md
sc-1-4-10-resize-reflow.md
sc-1-4-11-non-text-contrast.md
sc-1-4-3-contrast.md
scripts/
contrast-ratio.py

详细介绍

Web 组件无障碍访问

Web 组件的无障碍访问（a11y）模式和修复指南。 在涉及组件可见或可交互界面的任何工作中（生成、修改、审查或设置 HTML、JS 或 CSS 样式），请参考本文，以应用 WCAG 2.2 标准。

审查背景

请按照 WCAG（Web 内容无障碍指南）开展审查，重点提升 Web 无障碍访问能力。

要将代码标记为违规，代码必须与所引用的 WCAG 规则直接相关，且明确违反相应标准。

主要审查标准：

  1. 仅关注无障碍访问：
  • 仅从无障碍访问角度评估组件。
  • 只考虑是否符合所引用的 WCAG 成功标准，忽略可归因于其他标准的违规问题。
  • 不要讨论一般代码风格、模式或与无障碍访问无关的问题。
  1. 确保无障碍访问达到最低且充分的要求：
  • 找出妨碍组件满足 WCAG 规定的最低要求的无障碍访问问题。
  • 除非确有必要，否则不要提出超出 WCAG 合规范围的改进建议。
  1. WAI-ARIA 的使用：
  • 仅在必须使用 WAI-ARIA 属性，且无法通过语义化 HTML 实现无障碍访问时，才使用这些属性。
  • 避免不必要的复杂性，或因 ARIA 属性使用错误或过度而导致潜在回归。
  1. 组件库的使用
  • 假设知名组件库（例如 Salesforce Lightning、Material UI、Chakra UI）在正确实现时默认具备无障碍访问能力。除非组件库的用法明确违反 WCAG，否则本次审查可忽略库提供的组件，因为这些组件在抽象层之下已按无障碍访问方式实现。

重点：提供可操作的反馈，确保组件满足必要的 WCAG 无障碍访问要求，避免提供与提示范围无关的额外反馈。仅在代码存在可立即修复的问题时才指出。你必须开展审查，随后提出能够解决问题的代码修复方案。

成功标准审查者

确定哪些成功标准适用于待审查代码，然后打开与该代码相关的参考文件。每个参考文件都是独立的审查指南，包含分析框架、示例和修复 建议。

可感知
可操作
可理解
健壮性
视觉辅助审查

当组件截图或设计稿可用时，请使用这些视觉级审查器补充源代码审查。每份参考文档都介绍了如何基于图像评估相应的成功标准——包括对比度、颜色依赖、缩放/重排行为，以及通过像素而非 DOM 识别非文本内容。

审查输出

对于评估的每项成功标准，请报告发现的违规项。如果某项标准不存在违规项，则为该标准返回空列表。

评论

支持 Markdown