longdesc 属性在 HTML5 中已被正式移除，主流浏览器和屏幕阅读器均不支持；应改用 alt + aria-describedby 组合，或结合 <details> 实现可访问的内联长描述，外链需提供可见、语义明确的链接并确保目标页无障碍。
longdesc 属性为什么不能用
它在 HTML5 中已被正式移除，所有主流浏览器（Chrome、Firefox、Safari、Edge）都不解析 longdesc 属性，屏幕阅读器也普遍忽略它。即使你写了 <img src="chart.png" alt="销售额趋势" longdesc="desc.html">，实际没有任何辅助技术会去加载或朗读 desc.html 的内容。
这不是兼容性“暂时不好”，而是标准层面的废弃：W3C 在 HTML5 规范中明确删除了该属性，且未提供降级机制。继续使用只会增加代码冗余，还可能误导团队误以为“已满足长描述要求”。
alt + aria-describedby 是当前最可靠的基础组合
对信息密度较高的图片（如数据图表、架构图、流程图），alt 只负责一句话摘要，详细说明必须通过其他方式关联。推荐做法是：
-
alt写简明核心信息，例如alt="2024年Q1–Q4服务器响应延迟箱线图" - 在附近放置带
id的描述容器，比如<div id="chart-desc"><p>中位延迟从...</p></div> - 用
aria-describedby="chart-desc"关联两者，屏幕阅读器会自动拼接朗读
注意：aria-describedby 支持多个 ID（空格分隔），也支持跨元素引用；但不要指向 display: none 或 aria-hidden="true" 的元素——它们会被跳过。
用 / 实现可展开的内联长描述
实现可展开的内联长描述
这是兼顾语义、无障碍和用户体验的实用方案，无需 JS，原生支持键盘操作（Enter/Space 展开）：
<figure>
<img src="arch-diagram.png" alt="微服务通信拓扑图" aria-describedby="arch-desc">
<details id="arch-desc">
<summary>查看完整架构说明（含组件职责与容错策略）</summary>
<p>API 网关统一接收请求，按路由规则分发至...</p>
</details>
</figure>
优势明显：
- 所有主流屏幕阅读器（NVDA、VoiceOver、JAWS）会在
<summary>处明确提示“已折叠”，用户可自主决定是否展开 - 搜索引擎能直接索引
<details>内容，提升 SEO 和语义丰富度 - 视觉上可定制箭头、过渡动画等，不影响可访问性
别用 hidden 或 CSS visibility: hidden 替代 <details>——前者会让内容彻底退出可访问树。
外链长描述必须做成可见、可操作的普通链接
当描述确实太长（比如含交互图表、多页文档），外链合理，但绝不能依赖 longdesc。正确做法是：
- 用标准
<a href="full-desc.html">查看完整技术说明</a>，文案清晰表明用途 - 如果链接紧邻图片，可加
aria-labelledby或aria-describedby指向该链接的文本，强化上下文 - 避免“点击此处”这类无意义文案；也不要用图标+
aria-label替代可见文字——视障用户需要知道链接目标是什么，而不仅是“有个图标”
真正容易被忽略的是：外链描述页本身必须做好无障碍——包括正确的标题层级、足够的颜色对比度、可聚焦的导航、以及页面内图片的 alt 和长描述处理。否则只是把问题转移到了下一页。
