直接答案: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> 标记,不渲染、不读可访问性树;父级链接或按钮是否提供名称,另做一轮配对复测。

10
使用站
503
内联 SVG
99
页内去重形状
5
aria-hidden
0
有名称
560.3
KB 内联

方法: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 的复测中单独计算。

口径判定边界
内联 SVGHTML 中闭合的 <svg>…</svg>外链 <img> 与非闭合片段不计
隐藏aria-hidden="true"CSS 隐藏与父级 aria-hidden 不计
有名称内部 <title>、aria-label、aria-labelledby 或 role=img父级文本链接/按钮提供的名称不计
页内去重去掉空白后内部标记相同即视为一个形状不跨站去重
体积完整 <svg> 标记字节数不含压缩后传输体积

结果:图标几乎都没有做无障碍处理

指标数量站点数
内联 SVG50310
页内去重形状9910
aria-hidden="true"53
SVG 自带名称00
父级提供名称1004
任何层级都没有名称40310
role="img"00
focusable 属性00
内联体积560.3 KB—

重复与体积:503 个只用了 99 个形状

站点SVG去重形状体积隐藏
E0313418113.7 KB0
E0677364.6 KB0
E2284764.7 KB0
E1469940.0 KB0
E239242237.2 KB1
E0932823.2 KB0

重复最明显的是 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 自带名称00%
父级提供名称10019.9%
任何层级都没有名称40380.1%

分布很不均匀:E03 有 103/134 个无名称,E06 是 36/77,E23 是 65/92;E09(32 个)、E14(69 个)、E22(84 个)与 E24(5 个)则全部无名称。也就是说,即使把父级链接与按钮的名称都算进来,仍有 403 个(80.1%)图标没有任何可读名称,风险集中在纯图标按钮与纯图标链接——它们既没有自带标题,也没有父级文字。

对验收的启示

  1. 装饰图标默认隐藏。 加 aria-hidden="true" 与 focusable="false";503 个里只有 5 个做了,7 站完全没做。
  2. 纯图标按钮必须有名称。 把父级也算上后仍有 403 个(80.1%)无名称;纯图标按钮与链接需要 aria-label 或可见文本,否则读屏只能报“按钮”。
  3. 有含义的图形用 role=img + title。 0 个站点这样用;复杂的可加 aria-labelledby 指向可见说明。
  4. 停止重复内联。 503 个对 99 个形状;雪碧图或外链文件能把 560 KB 压到接近 99 个形状的体积。
  5. 给内联 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。

数据来源与口径

  1. 样本:第 4 期 25 个缓存为 200 的首页;10 站含内联 SVG。
  2. 抓取:2026-11-09 08:41–08:45 Asia/Shanghai,串行,站间 0.5 秒,超时 15 秒。
  3. 口径:闭合 <svg> 块;隐藏看 aria-hidden;名称看 title/aria-label/aria-labelledby/role=img。
  4. 去重:去掉空白后的内部标记相同即同形;不跨站。

常见问题

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 项离线单测。

关于作者

凌壹信息Official(交付团队),负责企业网站、品牌与智能制造项目的需求梳理、方案与验收协作。本文只统计首页 HTML 中的内联 SVG 标记,不渲染、不读可访问性树,也不判断父级是否提供名称;10 站命中,属 pilot,不外推行业。

图标也有语义

装饰图标该隐藏,纯图标按钮该有名字;同一个形状重复内联,则会让 HTML 白白变重。

预约内容验收方案