modusensus / modusensus/dsh-mneme

[Feature] 面板无障碍批次一:aria-live / 焦点管理 / 逐项标注 / 图表摘要

Open
#178 0 comments 0 reactions 0 assignees View on GitHub
accessibility help wanted
Dominant language
JavaScript
Stars
100
Forks
11
Avg merge
1h 20m
Merged PRs (30d)
116

Description

## 背景

对面板前端做了第一遍 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 | 可感知 |

## 方案(分四小项,可分别认领)

1. **aria-live 网络**(新手友好):保存/失败/刷新结果包一层 `aria-live="polite"`;错误用 `role="alert"`
2. **状态卡语义化**(新手友好):状态卡改 `role`/heading 结构,冲突卡可聚焦可回车直达
3. **逐项操作标注**:冲突按钮 aria-label 带上对应记忆标题;弹层焦点管理(开时移焦、trap、关闭还焦)
4. **图表摘要 + 对比度审计**:ego 图加 aria-label 与文本摘要;对比度依赖宿主主题变量,需与宿主侧联调

## 验收

- 读屏(NVDA/VoiceOver 任一)完成:保存一条记忆、裁决一个冲突、浏览详情抽屉,全程无「哑」反馈
- 全键盘可完成上述流程

Contributor guide

Open the contributing guide

Research direction

Start by locating the panel frontend components for the conflict queue, status cards, memory-library sheet, and ego relationship SVG. Pick one of the four separately claimable items, then test the affected flows with NVDA or VoiceOver and keyboard navigation. Done means the save, conflict-resolution, detail-drawer, and related status changes have no silent feedback, with the specified focus, labeling, summary, or contrast behavior implemented.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
accessibility, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.