alt 属性缺失会导致屏幕阅读器跳过、构建工具报错、SEO 丢权重三重失效；alt="" 表示无语义并静音跳过，而缺失 alt 会被读出文件名；装饰图仅当不影响信息完整性时可用 alt=""；上下文决定 alt 内容，不可复用；srcset 和 picture 中 alt 仅属最内层 img；SVG 需 title+desc；background-image 应改用 img。
不写 alt 不是“少个属性”，而是让图片在可访问性层面彻底消失——屏幕阅读器跳过、构建工具报错、SEO 丢权重，三重失效。
为什么浏览器不报错但构建工具直接炸了
浏览器渲染时对缺失 alt 宽容，但 HTML5 规范明确定义 alt 是 <img> 的 required 属性。W3C 验证器、eslint-plugin-jsx-a11y、Lighthouse、Hugo/Jekyll 等静态生成器都会触发硬性失败：
-
Element img is missing required attribute alt—— W3C 和 ESLint 标准报错 -
aria-alt-missing—— Lighthouse 标记为“严重可访问性问题” - Hugo 模板中若
v-bind:alt="item.alt"的item.alt是undefined，结果是alt="undefined"，比不写还糟 -
alt=" "（含空格）或alt="\t"被视为无效值，同样报错
alt="" 和不写 alt 的语义完全相反
这是最常被误解的一点：缺失 alt ≠ 图片不重要；alt="" 才是主动声明“无语义”。实际行为差异极大：
-
<img src="deco-line.png">→ NVDA/VoiceOver 可能读出 “deco line dot png”，干扰用户 -
<img src="deco-line.png" alt="">→ 静音跳过，符合 WCAG 1.1.1 -
alt=""必须显式写出，不能靠 CSSdisplay: none或aria-hidden="true"替代 - 装饰图能否用
alt=""？只看一个标准：删掉这张图，页面信息完整性、功能可用性是否受损？若无影响，才可用
链接内图片和含文字截图的 alt 写法完全不同
同一张图在不同上下文里，alt 值必须切换，不能复用模板：
立即学习“前端免费学习笔记（深入）”；
- 放在
<a href="/cart"><img src="cart.svg"></a>中 →alt="查看购物车"（说明目标），不是alt="购物车图标" - 按钮内图文并存，如“搜索”旁放大镜 → 图标用
alt=""，文字已说明动作，重复播报反而干扰 - 错误提示截图含
ERR_CONNECTION_TIMED_OUT→alt="错误:连接已超时 (ERR_CONNECTION_TIMED_OUT)"，必须完整复述可见文本 - banner 上写着“618 全场满 300 减 50” →
alt="618 大促:全场满 300 减 50"，不是alt="促销横幅"
srcset 和 picture 中的 alt 容易漏掉关键约束
<picture> 和 srcset 解决的是“加载哪张图”，不影响 alt 的语义归属——它永远只属于最内层的 <img>，且只能有一个值：
-
<source>上加alt属性无效，浏览器直接忽略 - 正确写法：
<img src="fallback.jpg" srcset="sm.jpg 480w, lg.jpg 1024w" alt="橘猫蜷在窗台晒太阳,耳朵微抖"> - 内联
<svg>不支持alt，必须用<title>+<desc>，并确保父容器有role="img" - CSS
background-image无法绑定alt，aria-label补救效果有限，优先改用真实<img>
最容易被忽略的是动态渲染场景：React/Vue 中若未做空值防护，v-bind:alt="item.alt" 渲染出 alt="undefined" 或 alt="null"，这比不写更破坏可访问性——辅助技术会如实朗读这些字符串。
