` → `role="row"`
- `| ` → `role="gridcell"`
- 每个格子 → `tabindex="0"` 允许键盘聚焦
- 每个格子给唯一id `id="cell-N"` 方便JS定位
### aria-label内容格式（每个可聚焦格子）
必须包含所有信息：
```
[编号] + [格子类型] + [特殊连接信息] + [动态棋子/状态信息]
```
**示例：**
```
"26号，梯子起点，会向上爬到 57 号格，有红色玩家"
```
### 模态对话框
```html
```
**打开对话框后：** 自动聚焦第一个可交互按钮
### 选项选择设计（推荐按钮方案）
**不要**用单选按钮+确认按钮（两步容易卡）：
```html
选项一
```
**推荐**直接用两个带完整说明的按钮：
```html
```
- 点击直接执行，一步到位
- 每个按钮自带完整说明，读屏读到就知道是什么
### 状态播报区域
```html
```
- 每次游戏状态变化，更新这里的文字
- 读屏会自动播报，用户即时知道结果
---
## 四、JavaScript动态更新规范
### aria-label动态更新（核心重点）
**正确做法：**
```javascript
function updateAllAria() {
// 1. 先重置所有元素到基础状态（不带动态信息）
for (每个格子) {
cell.setAttribute('aria-label', getBaseLabel(cell));
}
// 2. 再给有动态信息的元素追加
for (每个有棋子的格子) {
let label = cell.getAttribute('aria-label');
cell.setAttribute('aria-label', label + '，有红色玩家');
}
}
```
**必须避免的错误：**
| 错误 | 后果 |
|------|------|
| 只改DOM视觉，不改aria-label | 读屏信息和视觉不一致 |
| 只改变化的格子，不改移出棋子的格子 | 信息仍然错误 |
| 动态信息放父元素，格子自己没有 | 用户聚焦格子读不到，需要额外导航 |
**配合状态播报：**
- 格子aria-label给用户浏览时看细节
- 状态区域播报本轮结果，用户不用听完细节也知道发生了什么
---
## 五、键盘快捷键规范
### 基本原则
1. 常用操作给 `accesskey="x"` → `Alt+X` 快速定位
2. 按钮文字标注快捷键：``
3. 空格键激活主操作（当对应按钮聚焦时）
4. 全局快捷键给常用查询操作
### 示例
```html
```
```javascript
document.addEventListener('keydown', (e) => {
// 空格键：聚焦掷骰子按钮时触发
if (e.key === ' ' && document.activeElement === rollDiceBtn && gameStarted) {
e.preventDefault();
rollDice();
}
// Alt+P：全局朗读当前位置
if (e.key.toLowerCase() === 'p' && e.altKey) {
e.preventDefault();
readPositions();
}
});
```
---
## 六、CSS视觉适配（兼顾低视力）
### 焦点必须清晰
```css
#board td:focus {
outline: 3px solid #0066cc;
outline-offset: 2px;
}
button:focus {
outline: 3px solid #0066cc;
outline-offset: 2px;
}
```
### 格子类型颜色区分
```css
td.ladder { background-color: rgba(168, 230, 207, 0.7); } /* 梯子 - 浅绿色 */
td.snake { background-color: rgba(255, 139, 148, 0.7); } /* 蛇 - 浅红色 */
td.start { background-color: rgba(200, 255, 200, 0.8); } /* 起点 */
td.end { background-color: rgba(255, 200, 200, 0.8); } /* 终点 */
```
### 玩家棋子颜色
```css
.player1 { background-color: #ff4444; } /* 玩家1 - 红色 */
.player2 { background-color: #4444ff; } /* 玩家2 - 蓝色 */
```
- 颜色+文字描述双重保证，低视力+读屏都清楚
### 响应式
```css
@media (max-width: 700px) {
#board td {
width: 30px;
height: 30px;
font-size: 0.8em;
}
}
```
- 手机上也能玩，方便低视力用户放大
---
## 七、音效方案（三选一，开发者选择）
### 方案一：Web Audio 动态生成（默认推荐，单文件）
- 适用：中小型游戏、需要单HTML文件分发
- 优点：无需额外文件，没有路径问题
- 缺点：音效简单，沉浸感一般
**基本框架：**
```javascript
let audioCtx;
function initAudio() {
// 必须在用户第一次交互后初始化（浏览器政策）
if (!audioCtx) {
audioCtx = new (window.AudioContext || window.webkitAudioContext)();
}
}
function playSound(type) {
// 根据type生成不同音效
// - 掷骰子：轻快弹跳音调
// - 开始游戏：阶梯爬音
// - 梯子：一阶阶上升
// - 遇蛇：下沉震动
// - 胜利：华丽和弦
}
```
### 方案二：独立文件放游戏目录（推荐，好音质）
**目录结构：**
```
你的游戏/
├─ index.html
└─ audio/
├─ roll.mp3 掷骰子
├─ start.mp3 开始游戏
├─ ladder.mp3 爬梯子
├─ snake.mp3 遇蛇下滑
└─ win.mp3 胜利
```
**用法：**
```javascript
function playSound(filename) {
const audio = new Audio(`audio/${filename}.mp3`);
audio.play();
}
```
- 找免费商用音效：Freesound、Mixkit、爱给网
- 需要找资源时，可以现场帮找CC0免费商用资源
### 方案三：Base64 内嵌（单文件+好音质）
- 适用：想要单文件又要好音质
- 做法：mp3转base64内嵌到HTML，播放方法同独立文件
### 方案四：腾讯技能市场生成
- 需要语音合成/专业剪辑时，用技能市场处理
- 生成后放入audio目录即可
---
## 八、视觉素材方案（三选一）
### 方案一：Canvas代码绘制（单文件）
- 适用：开发者会简单绘制，不需要很高颜值
- 优点：单文件分发，无需额外资源
### 方案二：开放版权图片放images目录
**目录结构：**
```
你的游戏/
├─ index.html
└─ images/
├─ 装饰素材.png
└─ ...
```
**找素材：**
- Pixabay (https://pixabay.com/) - CC0免费商用
- Unsplash (https://unsplash.com/) - 免费商用
- 需要找可以现场帮找
**无障碍注意：**
- 装饰性图片加上 `aria-hidden="true" role="presentation"`
- 交互元素还是用HTML，图片只做装饰
---
## 九、争渡读屏兼容总结
| 特性 | 兼容性 | 做法 |
|------|--------|------|
| ARIA grid | ✅ 完美支持 | 标准写法 `role="grid/row/gridcell"` |
| 表格导航 | ✅ 完美支持 | `Ctrl+Alt+方向键` 标准操作 |
| accesskey | ✅ 完美支持 | `Alt+字母` 标准触发 |
| aria-live | ✅ 完美支持 | 动态更新播报正常 |
| dialog | ✅ 完美支持 | 标准ARIA dialog写法 |
**结论：** 标准HTML/ARIA写法就是对争渡最好兼容，不需要特殊hack
---
## 十、检查清单（开发完走一遍）
- [ ] 所有可交互元素都能Tab聚焦
- [ ] 每个可聚焦元素有完整的aria-label包含所有信息
- [ ] 状态变化后正确更新所有aria-label
- [ ] 常用操作有accesskey快捷键
- [ ] 有aria-live状态区域播报动态更新
- [ ] 焦点有清晰可见的轮廓
- [ ] 颜色区分清晰，兼顾低视力
- [ ] 模态对话框正确使用ARIA dialog属性
- [ ] 选项选择用按钮直接点击，不需要单选+确认
- **- 如果需要iOS支持，请单独出一个iOS版本，不用ARIA grid，改用原生table + title属性**
---
## 十一、总结核心
1. **信息完整**：每个可聚焦元素读屏能读出一切需要知道的信息
2. **动态同步**：状态改变，aria-label立刻跟着改变
3. **键盘可达**：所有操作都能走键盘，不需要鼠标
4. **快捷方便**：常用操作有快捷键，减少导航次数
5. **兼顾各方**：全盲体验优先，同时照顾低视力和明眼陪伴
6. **标准写法**：对争渡/NVDA/JAWS都兼容，不需要特殊hack
|