49图库无障碍适配：键盘走遍全站，对比度提到 4.5:1

2026 年 9 月 4 日，49图库完成全站无障碍适配。全站 9 个页面与 26 篇资讯支持 Tab 键顺序访问，焦点环 2px 可见，次要文字对比度由 2.9:1 提升到 5.6:1。改造没有增加新的交互层，而是把原有的筛选器、折叠菜单和图表说明换成更基础的实现方式。

改造的起点是一封反馈邮件。一位使用者说，他用键盘操作时无法在号码筛选区选中期号，按 Tab 会直接跳过整块区域，只能改用鼠标。前端组用两天做了键盘遍历审计，在 9 个页面上一共发现 41 处焦点丢失或跳序，其中最严重的一处需要连按 52 次 Tab 才能到达结果区。

审计方式是三条线并行：浏览器的无障碍树、NVDA 读屏实际朗读、以及 200% 缩放下的版面检查。三条线交叉之后，问题集中在三类：焦点不可见、语义标签缺失、对比度不足。这三类问题不涉及业务逻辑，但每一类都会让人用不下去。

键盘焦点：让 Tab 键走完整个筛选器

原来的号码筛选是一个自定义下拉框，用 div 模拟，鼠标点击靠事件监听实现，键盘完全无法介入。改造后换成原生 checkbox 加 label 的组合，标签天然可聚焦，空格键即可勾选，读屏软件会读作“复选框，已选中”。下拉展开也改成 checkbox 的选中状态控制，不依赖脚本。

焦点可见方面，全站统一使用 2px 实线焦点环并外扩 2px，与背景形成足够反差。列表顶部增加“跳到筛选结果”的快捷链接，只在获得焦点时出现，按一次回车就能跳过 49 个号码选项。结果刷新后焦点回到结果标题，读屏会播报“已更新，共 128 条记录”，不会掉回页面顶部让人重新按一遍。

焦点顺序以 DOM 顺序为准，全站没有使用正数 tabindex。视觉顺序与 DOM 顺序一致，因此键盘走一遍就是从上到下、从左到右。跳转链接放在页面最前，获得焦点时出现在左上角，按回车直接跳到主内容，省去每次进入页面都要穿过整个导航的成本。

无障碍不是给少数人打的补丁，是把交互退回它本来该有的样子。原生控件能做到的事，不该用三层 div 重做一遍。—— 49图库前端负责人 何思远

对比度与点击区域：4.5:1 是底线

视觉层面改动最容易被忽略的是次要文字。原来的说明文字用 #8a93a3，在白底上对比度只有 2.9:1，正常视力看着清楚，低视力使用者读起来吃力。改成 #646e7f 后对比度为 5.6:1，视觉层级仍然存在，但已经达到正文标准。主按钮的白字压橙色底，原对比度 3.1:1，换成深一档的橙色后为 5.2:1。

点击区域统一到 44px 最小高度，包括分页按钮、标签、评论区的姓名。图表做了两件事：网格线继续弱化，数据线加深，同时给每张图配一份纯文字摘要和一张可折叠的数据表，不靠颜色区分系列。

读屏体验在表格上体现得最明显。每张表都有标题与列头关联，读屏会先报表格名称与行列数，再逐格朗读列头与数值；走势图配一段文字摘要，写清区间、最高与最低号码及其次数。摘要不是自动生成的模板句，而是由构建脚本按真实数据计算后写入。

读屏与缩放下的实际体验

读屏体验的关键在表格和图表。所有数据表补上了 caption 与 scope 属性，读屏会先报“2026 年 9 月入库校验结果，4 行 4 列”，再逐格朗读表头与数值。走势图这类图形补了 role 与文字摘要，摘要写清“近 100 期，号码 17 出现 21 次，为区间内最高”，无法看图也能拿到结论。

缩放测试在 200% 下进行，全站不出现横向滚动条，正文使用相对单位排版，宽表格在窄视口下转为纵向排列的卡片，转换由样式完成，关闭脚本不影响。68 项回归测试全部记录在关于页的适配说明中，目前仍有两项遗留：图表数据点逐点朗读顺序、打印样式的分页控制，列入下季度处理。

验收由三个人交叉完成：一人只用键盘，一人戴耳机用读屏，一人把页面放大到 200%。三份记录合并后共 68 项检查，其中 66 项通过，2 项遗留。遗留项没有隐藏，直接写在关于页的适配说明里，并标注了计划处理的时间范围。

测无障碍只有一种可信方式：关掉鼠标，戴上耳机，自己走一遍。清单能告诉你漏了什么，走一遍才知道哪里难受。—— 49图库设计负责人 郑雅琳

无障碍适配说明已放入关于页，列明已完成的 68 项检查与两项遗留问题。如果你在使用读屏或键盘时遇到阻碍，请说明页面与操作步骤，我们会在 48 小时内复现并给出处理计划。下一阶段重点是把图表数据点的朗读顺序理顺，让逐点浏览不再跳序。