直接答案:25 个首页在 390×844 下全部可测。852 个可点元素里,427 个是非行内目标,其中 156 个(36.5%)至少一维小于 24px:114 个非轮播控制、42 个轮播圆点;20 站至少有一个,22 个小目标没有可访问名称。按 24px 间距例外复核:78 个通过、78 个仍失败(39 个非轮播控制 + 39 个圆点),失败集中在 10 站。另有 4 站页面可横向拖动:E30 +810px、E28 +732、E06 +220、E11 +14。
24px 来自 WCAG 2.2 的 2.5.8(AA)最小目标尺寸;44×44 是 Apple HIG、48×48 是 Material 的建议值。本次先量元素盒模型,再按“以目标为中心 24px 圆不与相邻目标重叠”复核间距例外:156 个里 78 个通过、78 个仍失败。
方法:390×844 下逐站渲染后量盒子
2026-11-09 16:45–16:49,对第 4 期同一批 25 个装备企业首页用 headless Chrome(124)与 DevTools Protocol 逐站打开新标签:视口 390×844、DPR 1、桌面 UA,等 readyState 为 complete 后再等 2.5 秒,读取每个可点元素的 getBoundingClientRect()。不滚动、不点击、不登录、不提交表单。25 站全部可测。
| 口径 | 判定 | 边界 |
|---|---|---|
| 可点元素 | a[href]、button、input[type=submit|button]、[role=button] | 不含 select、textarea、label |
| 非行内目标 | 计算样式 display 不是 inline 的链接与按钮 | 行内文字链接单列 425 个,不计入 |
| 小于 24 | 宽或高任一小于 24 CSS px | WCAG 2.2 2.5.8 AA 最小值 |
| 小于 44 | 宽或高任一小于 44 CSS px | Apple 44、Material 48 参考 |
| 轮播圆点 | class 含 swiper-pagination、slick-dots、owl-dots、carousel-indicators、pagination | 仍需可点,单列 |
| 无名称 | 无 aria-label、title、img alt、可见文字或 value | 只判有无,不判名称质量 |
| 横向溢出 | documentElement.scrollWidth − 390 | 大于 0 即页面可横向拖动;固定定位元素不计入贡献者 |
结果:20 站有小于 24px 的可点元素
156 个小于 24px 的目标占非行内目标的 36.5%;把轮播圆点拿掉后仍有 114 个,分布在 18 站。按 44px 参考值看,24 站至少有一个目标不达标,合计 292 个。元素数量多不等于问题多:E24 有 77 个目标但只有 3 个小于 24px;E06 有 39 个目标,其中 18 个是圆点、非轮播控制为 0。
| 指标 | 结果 | 说明 |
|---|---|---|
| 可测首页 | 25/25 | 本次全部渲染成功 |
| 匹配的可点元素 | 852 | 含行内链接 |
| 非行内目标 | 427 | 本次分母 |
| 行内文字链接 | 425 | 按 WCAG 豁免,不计入 |
| 小于 24px | 156(36.5%) | 任一维小于 24 |
| 其中非轮播控制 | 114 | 18 站 |
| 其中轮播圆点 | 42 | 6 站 |
| 小于 44px | 292 | 24 站 |
| 非轮播、小于 44px | 250 | 参考值 |
| 无名称的小目标 | 22 | 6 站 |
| 有小于 24 目标的站点 | 20/25 | 含圆点 |
| 有非轮播小目标的站点 | 18/25 | 不含圆点 |
| 页面可横向拖动 | 4/25 | 最大 +810px |
站点明细(按非轮播小于 24px 降序;E04、E08、E16、E18、E22 七项均为 0,未列出):
| 站点 | 非行内 | <24 | 非轮播<24 | 圆点<24 | 无名称 | 横向溢出 |
|---|---|---|---|---|---|---|
| E30 | 34 | 23 | 23 | 0 | 0 | +810 |
| E20 | 19 | 16 | 16 | 0 | 0 | — |
| E03 | 37 | 15 | 10 | 5 | 0 | — |
| E02 | 15 | 9 | 9 | 0 | 6 | — |
| E23 | 30 | 17 | 9 | 8 | 0 | — |
| E01 | 11 | 7 | 7 | 0 | 5 | — |
| E28 | 12 | 6 | 6 | 0 | 0 | +732 |
| E17 | 25 | 5 | 5 | 0 | 4 | — |
| E26 | 17 | 5 | 5 | 0 | 0 | — |
| E11 | 6 | 4 | 4 | 0 | 1 | +14 |
| E25 | 4 | 4 | 4 | 0 | 4 | — |
| E27 | 18 | 4 | 4 | 0 | 0 | — |
| E13 | 4 | 3 | 3 | 0 | 0 | — |
| E24 | 77 | 3 | 3 | 0 | 0 | — |
| E12 | 9 | 4 | 2 | 2 | 0 | — |
| E29 | 9 | 2 | 2 | 0 | 2 | — |
| E09 | 2 | 1 | 1 | 0 | 0 | — |
| E14 | 9 | 6 | 1 | 5 | 0 | — |
| E06 | 39 | 18 | 0 | 18 | 0 | +220 |
| E19 | 7 | 4 | 0 | 4 | 0 | — |
再算间距例外:78 个通过,78 个仍失败
WCAG 2.2 2.5.8 允许“间距例外”:小于 24px 的目标,只要以它为中心的 24px 圆不与相邻目标的矩形(或另一个小目标的圆)相交,就可以通过。2026-11-09 18:40–18:45 用同一批 25 个首页、同一 390×844 视口重跑,对每个小目标做圆与矩形/圆的相交测试,相切算通过。
| 分类 | <24px | 通过间距例外 | 仍失败 |
|---|---|---|---|
| 非轮播控制 | 114 | 75 | 39 |
| 轮播圆点 | 42 | 3 | 39 |
| 合计 | 156 | 78 | 78 |
失败集中在 10 站,其余 15 站没有间距失败:
| 站点 | 仍失败 | 其中控制 | 其中圆点 |
|---|---|---|---|
| E30 | 20 | 20 | 0 |
| E06 | 18 | 0 | 18 |
| E03 | 11 | 6 | 5 |
| E23 | 8 | 0 | 8 |
| E01 | 5 | 5 | 0 |
| E14 | 5 | 0 | 5 |
| E11 | 3 | 3 | 0 |
| E13 | 3 | 3 | 0 |
| E19 | 3 | 0 | 3 |
| E24 | 2 | 2 | 0 |
E02 的 9 个 18px 图标全部通过(彼此间隔足够),E01 的 5 个 14px 图标则因相邻而失败;E06 的 18 个圆点全部失败,E30 的 20 个导航链接也全部失败。156 个盒子里有一半靠间距例外过关,但仍有 78 个需要放大或拉开距离;这个圆检测是几何近似,不替代人工点测与触摸验证。
四类小目标:图标、导航、圆点、箭头
| 类型 | 匿名示例 | 观察 |
|---|---|---|
| 图标链接 | E01 5 个 14×14;E02 6 个 18×18 | 无可见文字;E01 的 7 个小目标中 5 个无名称,E02 的 9 个中 6 个无名称 |
| 导航文字 | E28 155×10 与 101×10;E20 100×22;E30 64×16–19 | 点击盒高度小于视觉字号,文字溢出盒子 |
| 轮播圆点 | E03 6–8px;E06 18 个;E23 8 个;E19 4 个;E14 5 个;E12 2 个 | 按类名命中 42 个,全部小于 24 |
| 轮播按钮(未命中圆点规则) | E24 3 个 8×8;E25 4 个 30×2–40×4 | 类名为 banner-dot / el-carousel,计入非轮播控制 |
| 滑块箭头 | E12 18×35;E27 21×20;E26 8×21 | 宽度不足 24,方向键易误触 |
最轻的一类不是“按钮太小”,而是“盒子比文字小”:E28 的导航链接 font-size 为 16px,但 line-height 与盒高只有 10px,点击区域比看到的字更窄。另一类是图标链接:14–18px 的方形图标没有文字,也没有 aria-label;视觉上可点,手指却难以命中。圆点分类依赖类名,E24 与 E25 的 7 个轮播按钮没有命中规则,被计入非轮播控制,说明 42 是下限而不是全部圆点。
22 个小目标没有可访问名称
在 156 个小于 24px 的目标里,有 22 个找不到名称:E01 5 个、E02 6 个、E17 4 个、E25 4 个、E29 2 个、E11 1 个。判定只看 aria-label、title、img alt、可见文字与 value,不检查名称是否准确。图标字体、CSS 伪元素和背景图不会产生名称,这类图标按钮需要显式补 aria-label;否则屏幕阅读器只会读“链接”,语音控制也无法按名称点击。
横向溢出:4 站,3 站超过 100px
| 站点 | 390 下文档宽 | 溢出 | 现场观察 |
|---|---|---|---|
| E30 | 1,200 | +810 | body 宽 1,200,桌面固定布局直接搬到手机 |
| E28 | 1,122 | +732 | 主内容 1,122,导航右侧被截断 |
| E06 | 610 | +220 | 头部与内容超出视口,右侧裁切 |
| E11 | 404 | +14 | 轻微,小于一个 16px 字宽 |
E28 与 E30 的截图复核都显示右侧内容被裁切,而不是内容自适应:E30 的 body 计算宽度就是 1,200px,E28 的主内容容器为 1,122px。E06 的头部与内容宽 610px,E11 只多 14px,属于轻微溢出。固定定位元素已被排除在“贡献者”列表之外;若站点用 overflow:hidden 把超宽内容藏起来,本指标会显示“不溢出”,这是另一个问题。
验收清单:先量盒子,再谈间距例外
- 以 24×24 为底线,44×44 为推荐。 图标链接先补 padding 或加大可点伪元素,再讨论视觉尺寸。
- 行内文字链接可以豁免,独立控制不行。 导航、按钮、圆点、箭头不适用 2.5.8 的行内例外。
- 同时检查名称。 图标按钮要有
aria-label或可见文字;只有图标的链接不能靠猜。 - 390px 下量
scrollWidth。 桌面 1,200px 固定布局不能直接搬到手机;宽表放滚动容器,别让整页横向拖动。可参考移动视口 pilot与语义、键盘与 ARIA。 - 间距例外要单独测。 本次已复算:78 个通过、78 个仍失败;相切算通过,但几何检测不替代人工点测。
局限
- 25 站是同一批装备企业官网的 pilot,不外推行业;20 站有问题是样本内计数。
- 只取一次快照:
readyState完成后 2.5 秒。轮播自动播放、字体加载和懒加载会改变视口内元素,尺寸本身较稳定但不是逐帧一致。 - headless Chrome 390×844 DPR1、桌面 UA,不是真机;没有触摸、滚动、横屏和浏览器 UI 占位。
- 量的是元素盒模型,不是视觉文字;
transform缩放会计入实际盒子,图标字体与伪元素没有独立盒子。 - 排除 425 个行内文字链接;间距例外用矩形/圆几何复算,不测键盘、对比度、焦点顺序与名称准确性。
- 只测首页;未测内页、表单、弹窗和移动菜单展开后的目标。
- 横向溢出只看
scrollWidth,不检测overflow:hidden造成的裁切。
数据与复核
间距复测:equipment-homepage-spacing-exception-390-2026.csv(25 行 × 16 列:<24、通过/失败、控制/圆点、无名称与时间)。仓库内为 docs/research/2026-11-homepage-spacing-exception-390.csv。
匿名数据:equipment-homepage-tap-targets-390-2026.csv(25 行 × 15 列:可点元素、非行内、行内、<24、<44、非轮播、圆点、无名称、文档宽、溢出与时间)。仓库内为 docs/research/2026-11-homepage-tap-targets-390.csv。聚合口径与阈值在 scripts/tap_target_probe.py,scripts/test_tap_target_probe.py 含 8 项断言;不含站点 URL、标题或联系方式。
常见问题
24px 是硬性标准吗?
WCAG 2.2 2.5.8(AA)要求目标至少 24×24 CSS px,但允许“间距例外”:若以目标为中心的 24px 圆不与相邻目标重叠,可以小于 24。本文先量盒子,再按间距例外复算:156 个里 78 个通过、78 个仍失败。44/48 是 Apple 与 Material 的建议值,不是 WCAG AA 要求。
为什么把行内文字链接排除?
WCAG 2.5.8 对句子中的行内链接有豁免;本次 425 个行内链接若计入,会把按钮问题淹没。独立导航、图标按钮、轮播圆点和滑块箭头没有这项豁免。
轮播圆点也要按 24px 算吗?
算可点元素。本次 42 个圆点小于 24px,单独列出。它们通常不是主路径,但移动端误触成本高;若保留,至少放大可点区域,或减少分页数量。
25 站能代表装备行业吗?
不能。25 站是同一批装备企业官网的 pilot,样本量不足以外推行业;这些数值用于发现模式与验收方法,不是行业比例。
为什么这次 25 站都能测?
这次用 Chrome DevTools Protocol 逐站新标签,等 readyState 为 complete 后再等 2.5 秒;上一轮 dump-dom 有 10 站失败。方法不同,渲染成功数不能直接比较。
4 站横向溢出怎么判定?
documentElement.scrollWidth 减 390,大于 0 即页面可横向拖动。E30 为 1,200、E28 为 1,122、E06 为 610、E11 为 404。固定定位元素不计入贡献者列表;若站点用 overflow:hidden 裁切,本指标会显示不溢出,需要另测裁切。
数据能复核吗?
可以。公开 CSV 25 行 × 16 列(E01–E30 匿名),聚合口径在 scripts/tap_target_probe.py,有 15 项离线断言;可按 sample_id 复测。
间距例外是怎么算的?
以目标盒中心为圆心、半径 12px:圆与另一个目标的矩形相交即失败;若对方也小于 24px,则比较两个圆,圆心距小于 24 失败、相切通过。只做几何判断,不执行页面脚本,也不替代人工点测。