A11Y

当用户想检查无障碍性、添加 ARIA 标签、修复键盘导航或对比度问题时使用 — 检查并修复网站无障碍性问题

lightpointventures 7b24de0 1.2 KB Updated

File contents

无障碍检查

帮用户检查并修复网站的无障碍性问题,让更多人能使用你的网站。

步骤

1. 扫描无障碍问题

读取项目中的 HTML 和组件,检查:

  • 图片 — 是否有 alt 属性,描述是否有意义
  • 表单 — 输入框是否有 label,错误提示是否可读
  • 按钮/链接 — 是否有可识别的文字或 aria-label
  • 颜色对比 — 文字和背景的对比度是否达标(WCAG AA: 4.5:1)
  • 键盘导航 — 是否可以用 Tab 键访问所有交互元素
  • 语义化 — 是否使用了正确的 HTML 标签(nav、main、article 等)
  • 焦点样式 — 键盘聚焦时是否有可见的指示

2. 输出报告

## 无障碍检查报告

### 必须修复(影响可用性)
- [文件:行号] 问题 + 修复方案

### 建议改进
- [文件:行号] 改进建议

### 合规状态
- WCAG AA 合规:是/否

3. 执行修复

用户确认后修复所有问题。

4. 完成

无障碍修复完成。你的网站现在对键盘用户和屏幕阅读器更友好了。

lightpointventures/claude-code-starter/tree/main/skills/a11y commit 7b24de04b4

Frequently asked questions

npx skillmds@latest add lightpointventures/a11y