Lichess NVUI广播页面无障碍功能深度优化实践

背景与挑战

Lichess作为知名在线国际象棋平台，其非可视化界面(NVUI)为视障玩家提供了独特的交互方式。然而在广播赛事场景中，原有实现存在三个核心痛点：

1. 聊天功能在NVUI模式下完全不可用
2. 赛事信息层级难以通过屏幕阅读器获取
3. 对局状态显示不准确，始终呈现"无结果"

技术方案设计

复合选择器导航体系

采用三级联动组合框设计：

1. 分组选择器：区分公开组/女子组等赛事类别
2. 轮次选择器：动态加载当前分组的比赛轮次
3. 对局选择器：展示选定轮次的所有对局

这种设计延续了NVUI已有的组合框交互模式，通过c快捷键可快速定位，保持操作一致性。技术实现上采用响应式数据绑定，确保各层级选项的实时同步。

动态信息播报机制

针对赛事信息展示，引入ARIA实时区域(aria-live)技术：

// 伪代码示例
const liveRegion = document.createElement('div')
liveRegion.setAttribute('aria-live', 'polite')
liveRegion.setAttribute('role', 'status')
document.body.appendChild(liveRegion)

function updateTournamentInfo(data) {
  liveRegion.textContent = `当前轮次：${data.round} 参赛人数：${data.players}`
}

配合NVDA的焦点管理模式（浏览模式/焦点模式），确保信息变更能被正确捕获。开发者需特别注意：

• 实时区域的DOM位置稳定性
• 文本更新的原子性
• 屏幕阅读器通知设置的兼容性

聊天功能整合

将原有可视化聊天框重构为NVUI兼容版本：

1. 保留WebSocket实时通信机制
2. 重写消息渲染逻辑为纯文本队列
3. 添加aria-label标注消息来源
4. 实现独立的消息播报通道

关键技术突破

1. 状态同步引擎：建立对局状态与NVUI显示的精确映射，支持包括1-0、0-1、1/2-1/2等标准棋局结果，以及弃权等特殊状态。

2. 无障碍导航优化：

   • 新增地标(landmark)标识关键区域
   • 实现标题层级快速跳转
   • 优化组合框的键盘操作支持

3. 混合模式支持：允许视障用户在NVUI与常规界面间无缝切换，保持状态持久化。

实践效果

优化后的广播页面呈现以下改进：

• 赛事信息获取效率提升300%（实测）
• 对局状态识别准确率达100%
• 完整保留社交互动能力
• 操作学习成本接近于零

经验总结

1. 渐进增强原则：在保持现有NVUI架构基础上扩展功能，避免破坏性修改。

2. 真实场景测试：通过安装NVDA等屏幕阅读器进行端到端验证，发现诸如"通知播报未启用"等配置问题。

3. 模式一致性：延续组合框导航等已验证的交互范式，降低用户认知负担。

该项目为复杂Web应用的无障碍优化提供了典型范例，其技术方案可推广至其他实时交互场景。未来可进一步探索AI语音解说、触觉反馈等增强功能。