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",这比不写更破坏可访问性——辅助技术会如实朗读这些字符串。



















