键盘可达 —— 海贼王h小游戏的无障碍操作设计

画布操作都有按钮镜像

规则是：凡是能用鼠标在画布上做的事，都必须有一个 <button> 能做同一件事。罗盘定向的「定位」是按钮，空格键只是它的快捷方式；海图航线的四个方向按钮和方向键指向同一个函数；桅绳记忆的四个绳结是四个按钮，数字键 1–4 是快捷方式。

这样安排的附带好处是测试和读屏拿到的是同一套入口：功能用例点的是真实按钮，读屏用户 Tab 到的也是那几个按钮，不存在「鼠标能做、键盘做不到」的隐藏操作。

海图网格的八十个格子每一个都是按钮，带「第几行第几列是什么」的无障碍名称。逐格 Tab 显然不现实，所以方向按钮才是键盘的主路径，格子按钮负责可读与点选。

焦点要看得见

焦点样式用 :focus-visible 加 2 像素朱砂色描边并留 2 像素偏移，不隐藏、不改成只变背景色。深色舞台上的按钮也用同一套描边，因为背景色变化在深底上很难察觉。

提示功能会主动把焦点移到相关控件上：海图航线的「提示下一步」把焦点送到建议的那一格，货舱配平的「提示」把焦点送到该货箱对应的那个舷位按钮。提示说了一句话还顺手把你送到位，键盘用户才真正省了事。

状态要能被读出来

每款游戏有一个 role="status" 的段落，所有进展都写成一句完整的中文：命中偏差多少度、还剩几次机会、这一格已经走过、两舷差多少吨。读屏软件会在它变化时读出来，看得见的人也靠它知道刚刚发生了什么——画布上的视觉反馈是辅助，不是唯一通道。

画布本身标了 aria-hidden，因为它的内容无法被辅助技术解析；真正承载信息的是状态段落与读数栏。读数栏用的是定义列表，每一项都有标签，不靠位置关系理解。

失败也要写出来。本地存储不可用时，页面显示一条红框文字说明这一局成绩没有保存；不写入日志、不静默忽略、更不会在失败之后仍然显示「已保存」。

颜色、对比与动效

正文是墨蓝色配纸底，对比度在 7:1 以上；深色舞台上的文字用接近白的浅色。信息不靠颜色单独承载：货箱的所属舷位除了颜色还有按钮的按下态，绳结站位除了亮灭还有各自的线条图形，信号旗除了配色还有形状差异。

装饰性过渡与动画在 prefers-reduced-motion 下全部关掉。罗盘定向的指针旋转是玩法本身不能关，所以它给了一个「暂停」按钮——需要慢慢对准的人可以一直停着，这不影响计分。