alt 属性是 <img> 的强制属性，缺失将导致 HTML5 验证失败；srcset 和 <picture> 不替代 alt，仅控制资源选择；onerror 需置空 this.onerror 防死循环；装饰性图片应改用 CSS background-image；alt 内容须依上下文表达功能或语义，而非外观。
alt 属性不是“锦上添花”，而是 <img> 的强制存在条件——不写，HTML5 验证直接失败，构建流程中断，屏幕阅读器用户完全丢失图像语义。
为什么 alt 必须写，且不能靠 srcset 或 <picture> 替代
很多人误以为用了 srcset 或嵌套了 <source> 就算“做了兜底”，其实这些机制只管「选哪张图加载」，不管「图挂了怎么办」。浏览器遇到 src 404，就停在那里显示破损图标，不会自动跳转、不会 fallback、也不会读取其他 source 的地址。
-
<source>标签上写alt是无效的——浏览器直接忽略 -
srcset列出的每张图共享同一个alt值，不需要、也不应该为不同尺寸图写不同alt -
<picture>的 fallback 是末尾那个<img>，它的alt就是整组图的语义锚点，必须准确
onerror 是最轻量的备用图方案，但容易陷入死循环
前端 fallback 最常用的是内联 onerror，但它有个致命细节：如果备用图也 404，会再次触发 onerror，形成无限递归。Chrome 和 Safari 都会卡住或报错。
- 正确写法：
<img src="a.jpg" onerror="this.src='fallback.jpg'; this.onerror=null;"> -
this.onerror=null必须加，否则第二次加载失败时又进同一函数 - 备用图路径建议用绝对路径或 CDN 稳定地址，避免相对路径在不同路由下失效
- 不要把复杂逻辑塞进内联 handler，比如拼接 URL 或调用 API，应抽成独立函数
装饰性图片别用 <img>，改用 CSS background-image
纯视觉分隔、banner 背景、icon 图标这类无语义的图，硬塞 <img> + alt="" 是合规但冗余的。它们本就不该出现在 DOM 内容流里。
- CSS 多背景写法天然支持 fallback：
background-image: url('a.webp'), url('b.jpg'); - 第一个加载失败，浏览器自动试第二个，无需 JS，也不触发可访问性校验
- 缺点：无法加
alt，不能被搜索引擎索引，也不支持懒加载（loading="lazy"） - 若需兼顾语义和 fallback，可用
<img>占位 +position: absolute叠加一层带 fallback 的背景图，但务必同步宽高与z-index
真正难的不是写 alt，是判断它该写什么
同一张图，在不同上下文里 alt 完全不同。比如购物车图标：alt="购物车图标" 是错的，因为屏幕阅读器用户不知道点了能干嘛；alt="查看购物车" 才对——它描述动作，不是画面。
立即学习“前端免费学习笔记（深入）”；
- 链接里的图：
alt描述目标，不是外观（alt="前往帮助中心"，而非alt="问号图标"） - 含关键文本的截图：
alt必须复述文字，不能省略或意译（alt="错误：连接已超时 (ERR_CONNECTION_TIMED_OUT)"） - 图表类图片：
alt只写结论，不罗列所有数据（alt="Q3 用户留存率：iOS 72.3%，Android 68.1%"） - 空
alt=""不等于“懒得写”，而是主动声明“这张图对理解无贡献”——漏判会导致辅助技术误读文件名
<img> 之前，先问一句：“这张图，此刻到底在说什么？如果它彻底消失，用户还能完成任务吗？”——答案决定了 alt 写什么、要不要用 <img>、甚至该不该出现在 HTML 里。 
