---
name: accessibility
when: '无障碍, 可访问性, a11y, ARIA, 键盘导航, 屏幕阅读器, 语义化, WCAG, 辅助功能'
scope:
  - frontend
products:
  - '*'
id: ka-pattern-accessibility
asset_kind: pattern
lifecycle_status: active
owner_mechanism_id: mc-frontend-pattern
authority: supporting
routes:
  - '*'
primary_triggers:
  - 无障碍
  - 可访问性
  - a11y
  - ARIA
  - 键盘导航
  - 屏幕阅读器
  - 语义化
  - WCAG
  - 辅助功能
priority: P2
specificity: 3
version: 1.1.0
last_reviewed: '2026-06-01'
consumes: []
emits: []
secondary_triggers: []
negative_triggers: []
type: pattern
stages: ["编码与单元测试", "架构设计"]
---

## 决策规则
- 表单 input 必须关联 label（htmlFor/id 或 aria-labelledby），禁止无标签输入框
- 按钮和链接必须有可识别文本或 aria-label，禁止纯图标按钮无文字说明
- 页面必须支持键盘导航（Tab 序列、Enter/Space 触发），焦点顺序符合视觉逻辑
- 动态内容更新必须使用 aria-live 区域通知屏幕阅读器
- 颜色对比度必须满足 WCAG AA 标准（文本 4.5:1，大文本 3:1）
- 图标按钮必须提供 aria-label 或 tooltip，图标作为装饰时使用 aria-hidden="true"
- 错误提示必须通过 aria-describedby 关联到对应表单字段
- 所有交互元素必须有可访问的名称（aria-label 或关联 label），屏幕阅读器可识别
- 颜色对比度必须满足 WCAG 2.1 AA 标准（正文 ≥ 4.5:1，大文本 ≥ 3:1）
- 所有功能必须支持键盘操作（Tab 导航 + Enter/Space 触发），不能仅依赖鼠标
- 表单必须有明确的错误提示和关联（aria-describedby），不能只用颜色标识错误
- 图片/图标必须有替代文本（alt 属性），装饰性图片使用 alt=""
- 页面标题（title）和标题层级（h1-h6）必须语义正确，便于辅助导航

## 验收项
- [AC-01] 表单字段有关联 label
- [AC-02] 按钮和链接有可识别文本
- [AC-03] 页面支持键盘导航
- [AC-04] 颜色对比度满足 WCAG AA
- [AC-05] 交互元素有 aria-label
- [AC-06] 颜色对比度符合 WCAG AA
- [AC-07] 功能支持键盘操作
- [AC-08] 表单错误有关联提示
- [AC-09] 图片有替代文本
