longdesc 属性在现代 html 中不被 chrome、firefox、edge 等任何主流浏览器解析为可访问功能，w3c 已将其标记为“过时”，html5 规范明确不推荐使用。
Longdesc 属性早已被主流浏览器弃用，别再依赖它
直接说结论：longdesc 属性在现代 HTML 中**不被 Chrome、Firefox、Edge 等任何主流浏览器解析为可访问功能**，也不会触发屏幕阅读器读取其指向的 URL 内容。W3C 已将其标记为“过时（obsolete）”，HTML5 规范中明确不推荐使用。你写了 longdesc="chart-desc.html"，用户几乎肯定看不到、听不到那段描述。
替代方案：用 aria-describedby 指向页面内描述块
真正有效且被广泛支持的做法，是把详细描述写在当前 HTML 页面里（而非外链），再用 aria-describedby 关联图像和描述容器：
- 把图表的详细说明写成一个
<div id="chart-desc">…</div>或<section aria-label="图表详细说明">…</section> - 在
<img>标签上添加aria-describedby="chart-desc" - 确保描述容器不被
display: none或visibility: hidden隐藏——可用clip-path: inset(100%)或position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;实现视觉隐藏但保留可访问性
复杂图表优先考虑 + + 组合
组合
对数据密集型图表（比如带多组趋势线、图例嵌套、坐标轴标注的 SVG 图），单靠 aria-describedby 可能不够。更健壮的结构是：
- 用
<figure></figure>包裹整个图表（<img>或<svg></svg>） -
<figcaption></figcaption>放简要标题（如“2020–2024 年各季度营收对比”） - 在
<figure></figure>内部或紧邻处放一个<details><summary>展开详细分析</summary>…</details>，里面写技术细节、异常点解释、数据来源等 - 给
<img>加role="img"和aria-labelledby指向<figcaption></figcaption>的 ID，避免重复朗读
外链描述只作为辅助，且必须同步维护
如果因内容长度或更新频率必须外链（例如 PDF 报告），请把它当作补充材料，而非可访问性主路径：
- 在图像旁显式提供链接：
<p>@#@#@#@#@#@#@#@#@#@0</p> - 绝不依赖
longdesc自动加载——它不会工作 - 外链文档本身必须满足 WCAG：含标题结构、语义化标签、文本可选中、无纯图片 PDF
- 每次图表更新，必须同步更新外链文档，否则会误导用户
真正起作用的是页面内结构和 ARIA 属性，不是那个早已失效的 longdesc。外链只是锦上添花，不是雪中送炭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
