alt是HTML5强制必需属性，缺失会导致验证失败、CI中断及可访问性失效；alt=""表示无语义并静音跳过，而缺失alt会被误读文件名或跳过，二者语义完全相反。
alt缺失不是“补上就行”的小问题，而是会直接导致 HTML5 验证失败、Lighthouse 报红、CI 构建中断，甚至让屏幕阅读器用户完全无法理解页面内容。必须显式声明，不能靠“不写”或“写在别处”蒙混过关。
为什么浏览器和构建工具会报错
HTML5 规范明确定义 alt 是 <img> 的必需属性（required），不是可选字段。省略它会导致：
-
W3C Validator报错：Element img is missing required attribute alt -
ESLint+eslint-plugin-jsx-a11y默认拦截，CI 流水线直接失败 -
Lighthouse标记为“严重可访问性问题”，分数归零 - 部分静态站点生成器（如 Hugo 插件）拒绝渲染该页面
alt="" 和不写 alt 的区别
这是最容易混淆的点：两者语义完全相反，处理方式也截然不同。
-
<img src="deco-line.png">→ 缺失alt，读屏软件可能朗读"deco line dot png"或静默跳过，属于错误状态 -
<img src="deco-line.png" alt="">→ 明确声明“无语义”，辅助技术静音跳过，完全合规 -
<img src="logo.png" alt="Acme 公司标识">→ 含信息图，必须写有意义描述，不可缩写为alt="Acme logo"
动态插入图片时 alt 容易漏掉
JS、Vue、React 或 Yii2 等框架中，alt 不会自动继承，必须手动设置，否则等于没写。
立即学习“前端免费学习笔记（深入）”；
-
document.createElement('img')后，必须紧跟着el.alt = "描述" - Vue 中用
<img :src="url">，必须同步绑定:alt="desc"，不能只传src - Yii2 的
Html::img()必须把alt塞进第二个参数数组：Html::img('@web/images/logo.png', ['alt' => '公司首页'])；写成Html::img('@web/images/logo.png')就彻底没alt - CMS 富文本编辑器上传图片时，“替代文本”字段留空或填
IMG_20240512.jpg，等同于缺失
链接里的 img，alt 要说明目标而非画面
当 <img> 是唯一可点击内容时，alt 的职责从“这是什么图”切换为“点它干什么”。视障用户靠这个决定是否点击。
- 错误：
<img src="cart.png" alt="购物车图标">→ 用户听到“购物车图标”，但不知道点了是结算、清空还是跳转 - 正确：
<img src="cart.png" alt="查看购物车，当前有3件商品">→ 包含动作 + 实时状态 - 同一张图在不同链接中出现？
alt必须重写。首页 logo 链到首页 →alt="返回首页"；品牌页 logo 链到故事页 →alt="了解品牌起源" - 如果链接旁已有可见文字（如“我的订单”按钮），且图标纯装饰，则用
alt=""，避免重复朗读
最常被忽略的是 CMS 或富文本后台根本没暴露“替代文本”输入框，前端模板又没兜底逻辑——这时候 alt 就真的消失了，不是“忘了填”，而是系统层面就没提供填写路径。
