直接答案:25 站中 10 站使用内联 SVG,共 503 个、560.3 KB;按每个页面内部去重后只有 99 个不同形状(约 5.1 倍重复)。0 个 SVG 自带名称,把父级链接/按钮也算进来后 100 个能靠父级、403 个(80.1%)在任何层级都没有名称;仅 5 个带 aria-hidden="true"(1.0%)、0 个带 focusable 属性;10 站中 7 站没有任何隐藏图标。体积集中在 E23(237.2 KB / 92 个)、E03(113.7 KB / 134 个)、E22(64.7 KB / 84 个)、E06(64.6 KB / 77 个)与 E14(40.0 KB / 69 个)。
本文只解析 HTML 中的 <svg>…</svg> 标记,不渲染、不读可访问性树;父级链接或按钮是否提供名称,另做一轮配对复测。
方法:SVG 标记 + 父级配对
2026-11-09 08:41–08:45,对第 4 期 25 个缓存 200 首页实时请求 HTML,正则取出每个 <svg>…</svg> 块:统计总数、完整标记字节数、aria-hidden="true"、focusable、role="img",以及是否含 <title>、aria-label 或 aria-labelledby。页内去重按去掉空白后的内部标记做字符串比较;父级命名在 09:40 的复测中单独计算。
| 口径 | 判定 | 边界 |
|---|---|---|
| 内联 SVG | HTML 中闭合的 <svg>…</svg> | 外链 <img> 与非闭合片段不计 |
| 隐藏 | aria-hidden="true" | CSS 隐藏与父级 aria-hidden 不计 |
| 有名称 | 内部 <title>、aria-label、aria-labelledby 或 role=img | 父级文本链接/按钮提供的名称不计 |
| 页内去重 | 去掉空白后内部标记相同即视为一个形状 | 不跨站去重 |
| 体积 | 完整 <svg> 标记字节数 | 不含压缩后传输体积 |
结果:图标几乎都没有做无障碍处理
| 指标 | 数量 | 站点数 |
|---|---|---|
| 内联 SVG | 503 | 10 |
| 页内去重形状 | 99 | 10 |
| aria-hidden="true" | 5 | 3 |
| SVG 自带名称 | 0 | 0 |
| 父级提供名称 | 100 | 4 |
| 任何层级都没有名称 | 403 | 10 |
| role="img" | 0 | 0 |
| focusable 属性 | 0 | 0 |
| 内联体积 | 560.3 KB | — |
重复与体积:503 个只用了 99 个形状
| 站点 | SVG | 去重形状 | 体积 | 隐藏 |
|---|---|---|---|---|
| E03 | 134 | 18 | 113.7 KB | 0 |
| E06 | 77 | 3 | 64.6 KB | 0 |
| E22 | 84 | 7 | 64.7 KB | 0 |
| E14 | 69 | 9 | 40.0 KB | 0 |
| E23 | 92 | 42 | 237.2 KB | 1 |
| E09 | 32 | 8 | 23.2 KB | 0 |
重复最明显的是 E06:77 个 SVG 只有 3 个形状,E22 是 84 个对 7 个,E14 是 69 个对 9 个,E03 是 134 个对 18 个。同一个图标在页面里被反复内联,直接把 HTML 撑大;改成 <use> 雪碧图或外链 SVG,体积和重复都能一起降下来。
父级命名:100 个能靠父级,403 个不能
2026-11-09 09:40–09:43 对同一批 25 站复测,把每个 SVG 与最近的 <a>/<button> 父级配对:父级有 aria-label、aria-labelledby、title,或包含 SVG 之外的可见文字,就算父级提供名称。
| 口径 | 数量 | 占 503 |
|---|---|---|
| SVG 自带名称 | 0 | 0% |
| 父级提供名称 | 100 | 19.9% |
| 任何层级都没有名称 | 403 | 80.1% |
分布很不均匀:E03 有 103/134 个无名称,E06 是 36/77,E23 是 65/92;E09(32 个)、E14(69 个)、E22(84 个)与 E24(5 个)则全部无名称。也就是说,即使把父级链接与按钮的名称都算进来,仍有 403 个(80.1%)图标没有任何可读名称,风险集中在纯图标按钮与纯图标链接——它们既没有自带标题,也没有父级文字。
对验收的启示
- 装饰图标默认隐藏。 加
aria-hidden="true"与focusable="false";503 个里只有 5 个做了,7 站完全没做。 - 纯图标按钮必须有名称。 把父级也算上后仍有 403 个(80.1%)无名称;纯图标按钮与链接需要
aria-label或可见文本,否则读屏只能报“按钮”。 - 有含义的图形用 role=img + title。 0 个站点这样用;复杂的可加
aria-labelledby指向可见说明。 - 停止重复内联。 503 个对 99 个形状;雪碧图或外链文件能把 560 KB 压到接近 99 个形状的体积。
- 给内联 SVG 设体积预算。 E23 一页 237.2 KB,已经接近很多站点整页 HTML 的体积。企业官网验收可参考网站建设服务。
局限
- 只读标记:不做渲染与可访问性树判断;父级名称按启发式配对,隐藏文字与复杂组合可能误判。
- 正则边界:嵌套 SVG 与未闭合片段可能漏计或重复计。
- 去重口径:只在页内比较内部标记,不跨站、不按视觉相似度。
- E24 重试:复测时返回 504,暂停后重试成功并计入;单次抓取仍可能受 WAF 影响。
- 父级判定是启发式:只配对最近的
<a>/<button>,按 aria 或可见文字判断;隐藏文字与复杂组合可能误判。 - 25 站 pilot:同一批装备企业样本,不外推行业。
数据与复算
匿名数据:equipment-homepage-inline-svg-2026.csv(25 行 × 10 列:SVG 数、页内去重、隐藏、命名、role、focusable、体积与时间)。仓库内为 docs/research/2026-11-homepage-inline-svg.csv。
命名复测:equipment-homepage-svg-naming-2026.csv(25 行 × 10 列:自带名称、父级名称、无名称与体积)。仓库内为 docs/research/2026-11-homepage-svg-naming.csv。
解析:scripts/svg_a11y_probe.py 与 scripts/svg_context_probe.py;单元测试 scripts/test_content_svg_a11y_probe.py(10 项)与 scripts/test_content_svg_context_probe.py(9 项,均无网络)。运行:
python -m unittest scripts.test_content_svg_a11y_probe scripts.test_content_svg_context_probe
配套:首页语义、键盘与 ARIA、文章页内联 SVG 重复度 pilot、首页 HTML 体积组成 pilot。
数据来源与口径
- 样本:第 4 期 25 个缓存为 200 的首页;10 站含内联 SVG。
- 抓取:2026-11-09 08:41–08:45 Asia/Shanghai,串行,站间 0.5 秒,超时 15 秒。
- 口径:闭合
<svg>块;隐藏看 aria-hidden;名称看 title/aria-label/aria-labelledby/role=img。 - 去重:去掉空白后的内部标记相同即同形;不跨站。
常见问题
0 个 SVG 有名称,说明所有图标都不可访问吗?
不能只看“0 个自带名称”。把父级链接/按钮也算进来后,100 个能靠父级提供名称,仍有 403 个(80.1%)在任何层级都没有名称;风险集中在纯图标按钮与纯图标链接,它们没有任何文字可读。
装饰性图标应该怎么处理?
加 aria-hidden="true" 与 focusable="false",或改用 CSS 背景图;本期 503 个里只有 5 个这样做了。
有含义的图标怎么命名?
用 role="img" 加 <title>,或 aria-label;复杂图形可用 aria-labelledby 指向可见文本。
为什么说重复是问题?
503 个 SVG 页内去重后只剩 99 个形状,说明同一个图标被反复内联;改成 <use> 雪碧图或外链文件可以显著减小 HTML。
E24 为什么单独说明?
复测时 E24 返回 504,暂停后重试成功;它一页 5 个 SVG、3 个 aria-hidden、4.5 KB,已计入本轮结果。
数据能复核吗?
可以。公开 CSV 25 行 × 10 列;scripts/svg_a11y_probe.py 有 10 项离线单测。