2026-08-12 05:01:11 UTC+8UPDATE #040
新增键盘焦点可见性测试
为测试站新增一个明显可见的 FOCUS TEST 工具。访客可以开启测试后使用 Tab / Shift+Tab 遍历整页可操作元素,实时查看当前焦点元素与可访问名称,并用高对比度双层焦点轮廓判断键盘导航是否清晰可见。
- 左下角新增
FOCUS TEST 入口与独立测试面板,不会替换已有快捷键、滚动进度或诊断功能。
- 面板实时显示可 Tab 到的元素数量、键盘焦点移动次数、当前元素类型和可访问名称。
- 测试开启后,仅对键盘 Tab 导航产生的当前焦点增加 3px 明亮轮廓与第二层高对比度外圈;鼠标点击不会被误判成键盘焦点测试。
- Escape 可关闭面板,STOP 会完整撤销测试状态;高对比度模式下使用系统颜色进行适配。
- 功能仅由仓库自身的本地 CSS / JavaScript 提供,没有增加第三方脚本、付费服务或外部运行时依赖。
- 修改前的
test.html 已使用原 blob 原样保存;index.html 与 test.html 仍保持完全相同。
DOWNLOAD PREVIOUS HTML
2026-08-12 03:58:17 UTC+8UPDATE #039
新增 DEFAULT / COMPACT 页面密度切换
为越来越长的诊断页面新增一个明显可见的内容密度控制。默认模式完全保持原来的间距;Compact 模式会收紧主要面板、卡片和区块之间的留白,让桌面与移动设备在同一屏看到更多测试信息,同时不隐藏或删除任何功能。
- 顶部新增
VIEW DENSITY 控件,可在 DEFAULT 与 COMPACT 之间即时切换。
- 两态按钮使用
aria-pressed 暴露当前状态,并继续使用原生 <button> 键盘行为。
- Compact 仅改变布局密度:缩小面板内边距、区块间距和卡片间距;诊断、地图、报告、会话进度与其他现有能力全部保留。
- 选择通过同源
localStorage 保存,重新打开页面时会恢复;存储不可用时安全回退到 DEFAULT。
- 增加移动端与高对比度适配,没有第三方脚本、外部字体或付费依赖。
index.html 与 test.html 继续指向完全相同的当前页面 blob。
DOWNLOAD PREVIOUS HTML
2026-08-12 02:58:47 UTC+8UPDATE #038
新增滚动感知的 QUICK NAV 当前区域追踪
长页面的顶部快速导航现在会跟随滚动位置自动高亮当前区域,并把对应导航项保持在可见范围内,让访客在测试面板越来越多时仍能快速判断自己所在的位置。
- 使用
IntersectionObserver 异步观察 FLOW、SESSION、ACCESSIBILITY、PERFORMANCE、REPORT、DIAGNOSTICS、METRICS 与 VISITOR MAP。
- 当前区域使用醒目的实心导航状态,并新增
VIEW · … 位置标签。
- 当前导航项同步设置
aria-current="location",让视觉高亮也能被辅助技术识别。
- 在不支持 IntersectionObserver 的环境中,使用轻量的
requestAnimationFrame 滚动回退逻辑。
- 横向导航会自动把当前项滚动到视野中,并尊重
prefers-reduced-motion。
- 没有增加第三方脚本、分析服务或外部运行时依赖。
index.html 与 test.html 继续使用完全相同的当前页面 blob。
DOWNLOAD PREVIOUS HTML