alt是img标签的强制必需属性，非仅图片失败时备用；必须显式声明，缺失会导致验证失败、无障碍中断和SEO受损，空值alt=""用于装饰图，信息图需简洁准确描述内容。
alt 属性不是“图片挂了才启用的备用方案”，而是 <img> 标签的强制必需属性——只要用了 <img>，就必须有 alt，无论是否降级、是否可见、是否由 JS 动态插入。
为什么图片加载失败时 alt 不显示
常见现象：图片 404、src 为空字符串、src="javascript:void(0)"、或父容器设了 display: none，结果 alt 文字压根不出现。
- 浏览器只在触发图片加载逻辑后才考虑渲染
alt；src无效（如空值、非法协议、about:blank）→ 不发起加载 →alt被忽略 -
aria-hidden="true"或visibility: hidden会让整个元素（含alt文本）对辅助技术不可见 - 用
<div style="background-image: url(...)">替代<img>？alt完全无效，因为不是<img>元素
在 <picture> 中如何让 alt 正常降级生效
<picture> 本身不接管 alt，它只是容器；真正承载 alt 的是内部那个**必须存在的 <img> 子元素**——且这个 <img> 的 src 必须可加载（哪怕是个极小的占位图）。
- ✅ 正确写法：
<img src="/i/px.gif" alt="暂无数据图表，点击刷新重试">（/i/px.gif是 1×1 透明 GIF，确保 HTTP 200） - ❌ 错误写法：
<img src="" alt="...">或<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="...">（部分浏览器仍视其为“无加载意图”） - ⚠️ 注意：
<source>标签里写的media或type不影响alt行为，alt只属于最终那个<img>
空状态图的 alt 怎么写才算有效降级
用户看到空白区域时，需要知道“发生了什么”和“接下来能做什么”，不是“这儿本该有张图”。
立即学习“前端免费学习笔记（深入）”；
- 避免元描述词：
alt="空状态插图"、alt="empty-state"、alt="图标"—— 这等于没说 - 要包含状态语义 + 可操作提示，例如：
alt="暂无收藏内容，点击右上角加号添加" - 长度控制在 125 字符内，核心信息前置；含按钮/链接时，alt 必须说明行为意图，而非外观
- 如果空状态图是 SVG 内联写法，
alt无效，必须改用<img src="...">或配合role="img"+<title>+aria-labelledby
最易被忽略的一点：CMS 富文本编辑器上传图片时，“替代文本”字段默认为空或填了文件名，这不叫设置了 alt；动态 JS 插入 <img> 后没手动赋值 el.alt = "..."，等同于缺失。降级是否生效，从来不由设计稿决定，而由 HTML 实际输出的 <img src="..." alt="..."> 是否合法、可加载、上下文准确决定。
