alt属性是图像降级为纯文本的唯一合法出口，必须准确简洁描述上下文语义；title仅为悬停提示，不参与降级，不可替代alt；装饰图用alt=""，复杂图需结合figcaption补充。
alt 属性不是“可选补充”，而是图片降级为纯文本的唯一合法出口。当图片加载失败、被禁用、或由屏幕阅读器解析时，alt 的值就是用户实际读到的内容——它必须是准确、简洁、有上下文的描述，不能留空，也不能写“图片”“图标”这类无效信息。
为什么 title 不算降级？
title 属性只在悬停时触发，且不被屏幕阅读器默认朗读（除非用户开启“标题朗读”辅助模式），更不会在 JS 失效、图片 404 或打印页面时出现。它本质是增强层，不是降级路径。把提示文字塞进 title 而忽略 alt，等于在降级通道上焊死一扇门。
多图场景下如何避免重复或遗漏？
批量处理 HTML 时，容易对所有 <img> 统一设成相同 alt（如“示意图”），或直接留空。这会导致：SEO 权重稀释、无障碍检测失败、文本提取工具输出大量无意义占位符。
- 每张图的
alt必须反映其在当前上下文中的实际作用：是装饰？是数据图表？是操作按钮？是文章配图？ - 纯装饰图应设为
alt=""（空字符串，非空格），明确告知辅助技术“跳过” - 含文字的图（如带标语的 Banner）需描述文字内容，而非只说“Banner 图片”
- 自动转换工具（如 HTML 转 TXT）依赖
alt提取语义，若缺失，就只能输出“[image]”这类无信息标记
当 alt 也不够用时怎么办？
某些复杂图像（如信息图、流程图）无法用一两句话说清，此时仅靠 alt 会丢失关键逻辑。正确做法是：在 alt 中写简明摘要，再用 <figure><figcaption> 提供扩展说明。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
例如：
<figure> <img src="sales-chart.png" alt="2025年Q1-Q3销售额柱状图：Q2环比增长12%"> <figcaption>图表显示Q2因新品上市带动营收跃升，Q3增速回落至5%，主因竞品促销分流</figcaption> </figure>
这样，降级环境（如纯文本阅读器）至少能获取 alt 摘要；而支持 CSS/JS 的环境可展开完整解释。注意：<figcaption> 是语义化降级的一部分，不是 JS 控制的弹窗。
真正难的不是写 alt，而是判断这张图在“没有图”的世界里，用户到底需要知道什么——这个判断一旦出错，后续所有技术补救都只是贴膏药。
