41 lines
1.1 KiB
Plaintext
41 lines
1.1 KiB
Plaintext
---
|
||
description: "无障碍规范 — WCAG AA/语义化/键盘导航/ARIA/Vue 3 无障碍实践"
|
||
globs:
|
||
- "**/*.vue"
|
||
- "**/*.html"
|
||
alwaysApply: false
|
||
---
|
||
|
||
# ♿ Accessibility (A11y) — WCAG AA Standards (Core)
|
||
|
||
## WCAG AA 最小基线
|
||
|
||
- 可感知：文本对比度满足 AA；图片有替代文本
|
||
- 可操作：全部关键功能可键盘完成；无键盘陷阱
|
||
- 可理解：错误提示清晰、可定位、可恢复
|
||
- 健壮性：语义化 HTML 优先，ARIA 正确使用
|
||
|
||
## Vue 实践约束
|
||
|
||
- 表单控件必须有关联 label/description
|
||
- 弹窗/抽屉管理焦点进入与返回
|
||
- 自定义交互组件提供键盘等价操作
|
||
- 状态变化（成功/失败/加载）需可被辅助技术感知
|
||
|
||
## 检查方式
|
||
|
||
- 静态：eslint-plugin-vuejs-accessibility / 基础规则
|
||
- 自动：Lighthouse / axe
|
||
- 手动：Tab 顺序、屏幕阅读器关键路径
|
||
|
||
## 验证清单
|
||
|
||
- [ ] 关键页面通过键盘操作完成主流程
|
||
- [ ] 表单错误可读且可聚焦
|
||
- [ ] 颜色对比度满足 AA
|
||
- [ ] 对话框焦点管理正确
|
||
|
||
## Tier 3 深度参考
|
||
|
||
- `.cursor/rules/references/023-accessibility-deep.md` — 完整 A11y 规范与代码示例
|