直接答案: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 个仍失败。

852
可点元素
427
非行内目标
156
小于 24px
114
非轮播控制
22
无名称
4
横向溢出站

方法: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 pxWCAG 2.2 2.5.8 AA 最小值
小于 44宽或高任一小于 44 CSS pxApple 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 豁免,不计入
小于 24px156(36.5%)任一维小于 24
其中非轮播控制11418 站
其中轮播圆点426 站
小于 44px29224 站
非轮播、小于 44px250参考值
无名称的小目标226 站
有小于 24 目标的站点20/25含圆点
有非轮播小目标的站点18/25不含圆点
页面可横向拖动4/25最大 +810px

站点明细(按非轮播小于 24px 降序;E04、E08、E16、E18、E22 七项均为 0,未列出):

站点非行内<24非轮播<24圆点<24无名称横向溢出
E3034232300+810
E2019161600—
E0337151050—
E02159906—
E233017980—
E01117705—
E28126600+732
E17255504—
E26175500—
E1164401+14
E2544404—
E27184400—
E1343300—
E24773300—
E1294220—
E2992202—
E0921100—
E1496150—
E0639180180+220
E1974040—

再算间距例外:78 个通过,78 个仍失败

WCAG 2.2 2.5.8 允许“间距例外”:小于 24px 的目标,只要以它为中心的 24px 圆不与相邻目标的矩形(或另一个小目标的圆)相交,就可以通过。2026-11-09 18:40–18:45 用同一批 25 个首页、同一 390×844 视口重跑,对每个小目标做圆与矩形/圆的相交测试,相切算通过。

分类<24px通过间距例外仍失败
非轮播控制1147539
轮播圆点42339
合计1567878

失败集中在 10 站,其余 15 站没有间距失败:

站点仍失败其中控制其中圆点
E3020200
E0618018
E031165
E23808
E01550
E14505
E11330
E13330
E19303
E24220

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 下文档宽溢出现场观察
E301,200+810body 宽 1,200,桌面固定布局直接搬到手机
E281,122+732主内容 1,122,导航右侧被截断
E06610+220头部与内容超出视口,右侧裁切
E11404+14轻微,小于一个 16px 字宽

E28 与 E30 的截图复核都显示右侧内容被裁切,而不是内容自适应:E30 的 body 计算宽度就是 1,200px,E28 的主内容容器为 1,122px。E06 的头部与内容宽 610px,E11 只多 14px,属于轻微溢出。固定定位元素已被排除在“贡献者”列表之外;若站点用 overflow:hidden 把超宽内容藏起来,本指标会显示“不溢出”,这是另一个问题。

验收清单:先量盒子,再谈间距例外

  1. 以 24×24 为底线,44×44 为推荐。 图标链接先补 padding 或加大可点伪元素,再讨论视觉尺寸。
  2. 行内文字链接可以豁免,独立控制不行。 导航、按钮、圆点、箭头不适用 2.5.8 的行内例外。
  3. 同时检查名称。 图标按钮要有 aria-label 或可见文字;只有图标的链接不能靠猜。
  4. 390px 下量 scrollWidth。 桌面 1,200px 固定布局不能直接搬到手机;宽表放滚动容器,别让整页横向拖动。可参考移动视口 pilot与语义、键盘与 ARIA。
  5. 间距例外要单独测。 本次已复算: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 失败、相切通过。只做几何判断,不执行页面脚本,也不替代人工点测。

关于作者

凌壹信息Official(交付团队),负责企业网站、品牌与智能制造项目的需求梳理、方案与验收协作。本文用 headless Chrome 在 390×844 下测量 25 个装备企业首页的可点元素盒模型与页面宽度,不登录、不提交表单;属 pilot,不外推行业。

按钮够大,才点得准

手机上的 24px 不是审美问题,而是可点区域与误触率;先量盒子,再谈间距例外。

预约内容验收方案