alt 属性是 <img> 的强制要求，省略会导致 HTML5 验证失败、构建工具报错及可访问性问题；alt="" 表示无语义，缺失则可能误读文件名；链接内图片的 alt 应说明目标而非画面，含关键文本的图片需完整复述。
alt 属性不是“可选补充”，而是 <img> 的强制要求——不写会直接触发 HTML5 验证失败、构建工具报错，且屏幕阅读器无法播报图像内容。
为什么浏览器和构建工具会报错：alt 是必需属性
HTML5 规范明确定义 <img> 的 alt 为必需属性（required），不是“建议”或“最好加上”。省略它会导致：
- W3C 验证器报错
Element img is missing required attribute alt - ESLint +
eslint-plugin-jsx-a11y默认拦截，CI 构建失败 - Chrome DevTools 的 Lighthouse 检测标记为“严重可访问性问题”
- 部分 CMS 或静态站点生成器（如 Hugo、Jekyll 插件）拒绝渲染缺失
alt的页面
alt="" 和不写 alt 的区别：完全相反的语义
很多人以为“不写 alt”等于“这张图不重要”，其实恰恰相反：alt="" 是主动声明“该图无语义”，而缺失 alt 是未声明状态，辅助技术可能读出 src 文件名（比如 header-bg-02.jpg），造成干扰。
-
<img src="deco-line.png">→ 错误：无alt，读屏软件可能读“deco line dot png” -
<img src="deco-line.png" alt="">→ 正确：明确跳过，静音处理 -
<img src="logo.png" alt="Acme 公司标识">→ 正确：传达品牌信息 -
<img src="logo.png" alt="Acme logo">→ 不推荐：缩写+冗余，“logo”已隐含图像类型
链接里的图片：alt 要描述目标，不是画面
当 <img> 套在 <a> 内作为可点击入口时，alt 的职责变成说明“点这个去哪”，而非“这图长啥样”。常见错误是照搬视觉描述。
立即学习“前端免费学习笔记（深入）”；
- 错误：
<a href="/cart"><img src="cart-icon.png" alt="购物车图标"></a>→ 屏幕阅读器读“购物车图标”，用户不知道点后动作 - 正确：
<a href="/cart"><img src="cart-icon.png" alt="查看购物车"></a>→ 明确交互意图 - 若链接旁已有可见文字（如
<a>我的订单</a>），且图标纯装饰，则用alt=""，避免重复朗读
含文字的截图或 banner：alt 必须包含图中关键文本
如果图片本身承载了不可替代的文字信息（如错误提示、活动标语、数据图表标题），alt 必须完整、准确复述，不能简化或省略。
- 截图显示
ERR_CONNECTION_TIMED_OUT→alt="错误：连接已超时 (ERR_CONNECTION_TIMED_OUT)" - banner 上写着“618 全场满 300 减 50” →
alt="618 大促：全场满 300 减 50" - 信息图标题为“Q1 用户留存率：iOS 72.3%，Android 64.1%” →
alt="Q1 用户留存率：iOS 72.3%，Android 64.1%"，而非alt="柱状图"
真正容易被忽略的是：alt 不是“描述画面”，而是“说明这张图在此处起什么作用”。哪怕只改一个词（比如把“点击下载”换成“下载《使用指南》PDF”），对屏幕阅读器用户就是关键差异。
