背景
对面板前端做了第一遍 WCAG 导向审计。骨架及格:按钮/输入框基本都有 aria-label、装饰图标统一 aria-hidden、星级评分有 role="img"+数值标签、会话列表用 tree/treeitem 语义、大弹层有 role="region"+aria-label+Esc 关闭、开关控件有 aria-checked/aria-expanded。
系统性缺口(按 WCAG 四原则):
| 缺口 |
位置 |
原则 |
| 状态变化无播报 |
保存成功/失败、队列刷新、resolve 完成——纯视觉 span,无 aria-live |
可感知 |
| 操作缺上下文 |
冲突队列「保留 A」读屏只听到「保留 A」,不知是哪一对 |
可理解 |
| 状态卡无语义 |
「最近巩固/待确认冲突」是纯 div,不可聚焦、无 heading 层级 |
可操作 |
| 弹层焦点管理 |
记忆库 sheet 开时不移焦、无 focus trap、关闭不还焦 |
可操作 |
| 图表无替代 |
ego 关系图 SVG 无可访问名称与数据摘要 |
可感知 |
| 对比度未审计 |
三级灰字 11px 在浅色主题下疑似低于 4.5:1 |
可感知 |
方案(分四小项,可分别认领)
- aria-live 网络(新手友好):保存/失败/刷新结果包一层
aria-live="polite";错误用 role="alert"
- 状态卡语义化(新手友好):状态卡改
role/heading 结构,冲突卡可聚焦可回车直达
- 逐项操作标注:冲突按钮 aria-label 带上对应记忆标题;弹层焦点管理(开时移焦、trap、关闭还焦)
- 图表摘要 + 对比度审计:ego 图加 aria-label 与文本摘要;对比度依赖宿主主题变量,需与宿主侧联调
验收
- 读屏(NVDA/VoiceOver 任一)完成:保存一条记忆、裁决一个冲突、浏览详情抽屉,全程无「哑」反馈
- 全键盘可完成上述流程
背景
对面板前端做了第一遍 WCAG 导向审计。骨架及格:按钮/输入框基本都有 aria-label、装饰图标统一 aria-hidden、星级评分有 role="img"+数值标签、会话列表用 tree/treeitem 语义、大弹层有 role="region"+aria-label+Esc 关闭、开关控件有 aria-checked/aria-expanded。
系统性缺口(按 WCAG 四原则):
方案(分四小项,可分别认领)
aria-live="polite";错误用role="alert"role/heading 结构,冲突卡可聚焦可回车直达验收