图片降级时文字替代必须显式提供，仅靠<img>或<picture>无法保证加载失败时显示alt；需用最小可用资源（如1×1 GIF或SVG）作兜底src，并确保alt含状态+操作指引且≤125字符。
图片降级后文字替代不是“额外功能”，而是必须显式提供的语义终点
直接写 <img src="x.webp"> 或只靠 <picture> 里的多个 <source>，无法保证图片加载失败时用户看到有意义的文字。浏览器不会自动把 alt 当作“降级失败后的兜底文案”来展示——它只在图片**不可见但语义需保留**时起作用，而加载失败（如 404、跨域、路径错）时，alt 是否显示，取决于 <img> 的 src 是否被解析为有效资源。一旦请求被浏览器静默丢弃（比如 WebP 不被支持），alt 就不会渲染；若请求发出了但返回了 404，多数现代浏览器会显示 alt 文本（带小图标），但 iOS Safari 旧版本可能只留空白方框。
用 <picture> + 最终 <img src> 指向 placeholder.svg 或透明 GIF 才能稳住文字替代
真正可控的文字兜底，得让最终的 <img> 标签始终能加载一个**最小、确定可用**的资源，再靠它的 alt 输出信息。不能依赖 src="" 或 src="about:blank"，因为它们不触发 alt 渲染。
-
<img src="/i/px.gif" alt="暂无商品图片，正在加载中">：1×1 透明 GIF，体积小、直链稳定、所有浏览器都认 -
<img src="/i/placeholder.svg" alt="该商品暂无实拍图">：内联 SVG 占位符，可嵌入样式，但需确保服务器返回Content-Type: image/svg+xml - 绝对不要写
<img src="" alt="...">或<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="...">：前者被多数浏览器忽略alt，后者在部分安卓 WebView 中可能触发解析错误或不显示文本
空状态插图的文字替代必须含操作指引，且长度压到 125 字符内
当降级落到空状态图（如“暂无收藏”“网络异常”），alt 不是描述画面，而是告诉用户“现在是什么状态”+“下一步能做什么”。写成“空状态插图”或“图标”毫无意义，读屏工具念出来用户仍不知所措。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 正确示例：
alt="暂无收藏内容，点击右上角加号添加"（共 28 字符，核心前置） - 避免“图中显示”“这是一个”等冗余前缀——屏幕阅读器已说明这是图像
- 含按钮/链接的操作提示必须明确动词：“点击刷新”“滑动查看更多”“长按保存图片”
- 超过 125 字符大概率被 NVDA、VoiceOver 截断，后半句失效
动态插入图片时，alt 丢失比格式降级失败更常见
JS 创建 <img> 后只设 src 和 srcset，却漏掉 alt，会导致整个降级链失去语义锚点。尤其在富文本编辑器、CMS 预览、微信公众号 HTML 渲染等场景，alt 经常被当成“可选字段”跳过。
立即学习“前端免费学习笔记（深入）”；
- 创建元素时必须同步赋值：
const img = document.createElement('img'); img.src = 'a.jpg'; img.alt = '产品主图'; - 用
querySelectorAll('img[data-batch="product"]')批量补全时，先检查!img.alt || img.alt.trim() === ''，再注入配置映射值，别硬写alt="产品图 ${i}" - 服务端渲染（SSR）中，
alt文案必须随 locale 注入，不能前端 JS 异步覆盖——首屏读屏会抢在 JS 执行前播报空值
最容易被忽略的是：当 <picture> 里所有 <source> 都因 media 不匹配或 type 不支持而跳过，最终回退到 <img>，但这个 <img> 的 src 若指向一个 404 路径，有些浏览器（尤其是旧版 iOS Safari）连 alt 都不显示，只留白。所以兜底 src 的可用性，比降级逻辑本身更优先验证。
