alt是强制属性，HTML5规范要求<img>必须包含，省略会导致验证报错、无障碍失效和SEO扣分；alt=""表示装饰性图片可忽略，而缺失alt则语义断裂。
必须写 alt，不能省略；alt="" 和不写 alt 是两回事，浏览器、校验工具、屏幕阅读器处理方式完全不同。
为什么 alt 是强制属性而不是可选的
HTML5 规范明确要求 <img> 必须包含 alt 属性。这不是建议，是语法层面的强制约束。省略 alt 会导致：
- W3C 验证器报错
Attribute “alt” is required - Chrome / Firefox 开发者工具在 Accessibility 面板中标记为“缺失替代文本”
- 部分旧版屏幕阅读器（如 JAWS 早期版本）会朗读文件名或直接跳过，造成语义断裂
- Lighthouse 可访问性审计直接扣分，影响 SEO 和合规审查
alt="" 和不写 alt 的实际差异
空字符串 alt="" 是合法且有明确语义的：它告诉辅助技术“这张图不承载信息，请忽略”。而省略 alt 则等于没声明意图，所有依赖该属性的系统都会按错误路径处理。
常见误操作包括：
- 用
alt=" "（带空格）代替alt=""—— 这会被当成有意义文本，屏幕阅读器可能读作“空白” - 只在 CMS 后台上传时填了标题字段，但前端模板没把值塞进
alt—— 实际渲染仍是无alt - 用
title替代alt——title是工具提示，对无障碍无效，也不能被搜索引擎用于图片理解
什么情况下该用 alt=""
仅限纯装饰性图片，即移除后不影响内容理解、不参与交互、不传递任何信息的图像。
典型场景有：
- CSS 背景图已覆盖，但为兼容老浏览器额外加的
<img> - 用小圆点
dot.png做列表项前缀，实际语义由<ul>和 CSS 承担 - 分割线类图片，比如
hr-line.png，其功能完全由<hr>或 margin 实现
反例：按钮图标（如放大镜搜索）、数据图表、头像、商品图——哪怕只是一枚「点赞」图标，只要用户靠它识别操作意图，就必须写有意义的 alt，例如 alt="点赞" 或 alt="赞这篇评论"。
如何快速验证 alt 是否合理
不用等上线，本地就能做三件事：
- 在 Chrome DevTools 的 Elements 面板中，右键任意
<img>→ “Edit as HTML”，手动删掉alt看是否立刻报错 - 打开 Network 面板 → 勾选 “Disable cache” + “Disable images”，刷新页面，观察关键信息是否还能被文字传达
- 用 macOS VoiceOver（Cmd+F5）或 Windows NVDA（Ctrl+Alt+N）朗读页面，听是否出现“图片”后无描述、或描述与上下文脱节
真正容易被忽略的不是“要不要写”，而是“写了但没传达到位”——比如用 alt="product image" 代替具体商品名，或在响应式图片中只给 <source> 加了 media 却忘了每个 <img> 本身仍需独立 alt。
