longdesc 属性已被主流浏览器弃用且 html5 中移除，无法可靠触发屏幕阅读器，应改用 内联展开或语义化外链替代。
longdesc 属性早已被主流浏览器弃用，且在 HTML5 中被正式移除。它不能可靠触发屏幕阅读器读取，也不支持现代无障碍实践。别再花时间配置它，改用更有效、更可控的方式提供图片长描述。
为什么 longdesc 实际上不起作用
Chrome、Firefox、Edge 等现代浏览器完全忽略 longdesc；JAWS、NVDA 等主流屏幕阅读器默认不播报该属性（即使启用也需用户手动操作，路径深、成功率低）。W3C 明确建议停止使用。
-
longdesc="chart-details.html"在页面中写得再规范，用户几乎不会看到或听到内容 - 链接目标页面若未做语义化结构（如缺少
<main></main>、<h1></h1>），反而增加认知负担 - SEO 和可访问性审计工具（如 axe、Lighthouse）会将其标记为“过时/无效属性”
替代方案：用 <details></details> + <summary></summary> 内联展开
把长描述直接放在图片附近，用原生 HTML 控件控制显隐，兼顾键盘导航、屏幕阅读器自动感知和用户自主选择权。
<figure> @@##@@ <details><summary>查看图表详细分析（含数据来源与趋势说明）</summary><p>本图表基于财务系统导出数据……</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/ai/4172" title="Replicate"><img src="https://img.php.cn/upload/ai_manual/001/246/273/178599610888360.png" alt="Replicate" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/ai/4172" title="Replicate" class="overflowclass">Replicate</a> <p class="overflowclass">Replicate是一款AI学习资源工具，在线运行开源机器学习模型。</p> </div> <a rel="nofollow" href="/ai/4172" title="Replicate" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> </details></figure>
- 所有主流屏幕阅读器会在
<summary></summary>处明确提示“已折叠”，并支持空格/Enter 展开 - 无需 JavaScript，CSS 可定制箭头、过渡动画等视觉反馈
- 搜索引擎能直接索引描述内容，提升语义丰富度
当必须外链时：用普通超链接 + 明确文案说明
如果描述内容确实很长（如含交互式图表、多页数据表），外链是合理选择——但必须放弃 longdesc，改用可感知、可操作的链接。
@@##@@ <p><a href="architecture-deep-dive.html" aria-describedby="desc-link-note">深入解读系统架构设计（含组件通信流程与容错机制）</a></p> <div id="desc-link-note" class="visually-hidden">此链接提供图片的详细技术说明</div>
- 链接文案必须具体说明内容性质和价值，避免“点击查看详情”这类无意义文字
- 用
aria-describedby显式关联辅助说明，帮助屏幕阅读器用户理解链接目的 - 确保目标页面顶部有
<h1></h1>，开头用<p></p>重申“本页是对图片‘XXX’的详细说明”，形成上下文闭环
真正影响可访问性的，从来不是某个属性是否存在，而是用户能否在需要时，以自己熟悉的方式、在合理认知负荷下获取信息。外链描述页若加载慢、结构乱、没返回入口，比不用 longdesc 更糟糕。
