alt 属性是 <img> 标签的必需属性，缺失或误用会破坏无障碍体验并影响 SEO；alt="" 表示图片无信息价值，读屏器静默跳过，而缺失 alt 会导致读屏器朗读文件名或跳过不提示。
alt 属性不是“可填可不填”的补充项，而是 <img> 标签的必需属性；不写、乱写或用 title 替代，会直接破坏无障碍体验，并让搜索引擎忽略图片语义。
alt 为空字符串 alt="" 和完全不写 alt 的区别
两者在 DOM 行为和读屏表现上完全不同：
- 不写
alt：多数屏幕阅读器会朗读文件名（如"chart-q2-sales.png"）或报“图像”，甚至跳过不提示，用户完全不知原图意图 -
alt=""：是明确声明“该图无信息价值”，读屏器静默跳过，符合 WCAG 1.1.1 要求 - Chrome DevTools 的 Lighthouse 会把缺失
alt判为 A11y 严重错误，但对alt=""不报错
功能性图片的 alt 文本必须说明“作用”，而非“样子”
当 <img> 作为按钮、链接或交互控件时，alt 描述的是用户能做什么，不是它长什么样：
- ❌
<img src="search-icon.png" alt="放大镜图标">—— 视障用户不知道点它能搜 - ✅
<img src="search-icon.png" alt="搜索">—— 直接传达功能 - ✅
<img src="logo.png" alt="返回首页">—— 若该 logo 链接到首页 - ⚠️ 如果同一张图在不同上下文有不同功能（如首页 logo 点击跳首页，内页 logo 点击跳品牌页），alt 必须随上下文动态更新
动态插入的图片最容易漏掉 alt，且无法靠 CMS 自动补全
JS 渲染的轮播图、商品列表、懒加载图片等，即使用了 loading="lazy" 或 decoding="async"，只要最终是 <img> 标签，就必须带有效 alt：
立即学习“前端免费学习笔记（深入）”；
- ❌
el.innerHTML = '<img src="p1.jpg">';—— 没alt，Lighthouse 直接标红 - ✅
el.innerHTML = '<img src="p1.jpg" alt="iPhone 15 Pro 深空黑色正面图">'; - ✅ 更稳妥：用
document.createElement('img')后显式设img.alt = "..." - WordPress 等 CMS 默认用文件名填
alt，但IMG_20240521_102345.jpg对 SEO 和读屏毫无意义，需人工或脚本清洗
最常被忽略的其实是“图片加载失败时的用户体验”——浏览器只显示空白方框加路径，而用户根本看不到 alt 文字，除非你写了。这不是理论问题，是页面一上线就暴露的缺陷。
