必须写alt，是HTML5规范强制要求的必需属性；省略会导致验证失败、屏幕阅读器无法播报、图片失效时仅显示空白框、Lighthouse报错及SEO语义断裂。
必须写 alt，不是“建议”而是 HTML 规范强制要求；不写会导致图片加载失败时只显示空白框，且屏幕阅读器无法播报、Lighthouse 报错、SEO 语义断裂。
为什么 alt 是必需属性，不是可选项
HTML5 规范明确定义 <img> 为**空元素且 alt 为必需属性**。浏览器解析时若发现缺失 alt，会视为结构错误——不是警告，是校验失败。真实影响包括：
- Chrome DevTools 的 Lighthouse 无障碍审计直接报错：
Image elements do not have [alt] attributes - 图片加载失败（路径错、404、网络中断）时，仅显示空白方框，连文件名或路径都不提示
- 屏幕阅读器跳过该元素，或读作“图片”“图像”，用户完全不知上下文
- Google 图片搜索几乎不索引无
alt的图片，即使页面本身排名靠前
alt="" 和不写 alt 完全不同
很多人以为“不写 alt”等于“alt=""”，这是最常踩的坑。二者语义截然相反：
-
alt缺失 → 辅助技术判定为错误，可能静默忽略、报错，或强行朗读src路径 -
alt=""→ 明确声明“此图无语义”，屏幕阅读器直接跳过，符合 WCAG 1.1.1 对装饰性图片的要求 -
alt=" "（含空格）→ 仍是非空字符串，会被朗读为空格，等同于无效写法
纯装饰性图片（如 spacer.gif、分隔线、视觉边框）才适用 alt=""；只要图片承载信息，就必须写有效描述。
链接中的 <img>，alt 要描述功能，不是外观
当 <img> 套在 <a> 里作为可点击入口时，alt 的职责就变了：它得告诉用户“点这个会去哪”，而不是“这图长啥样”。常见错误是照搬视觉描述：
- ❌
<a href="/home"><img src="logo.png" alt="XX科技 logo"></a>（描述对象，而非动作） - ✅
<a href="/home"><img src="logo.png" alt="返回首页"></a> - ✅
<a href="/search"><img src="search.png" alt="搜索网站内容"></a>
如果同一张图在多个位置用作不同功能（比如首页 logo 点击回首页，产品页 logo 点击进品牌介绍），alt 必须按上下文分别写，不能复用。
动态插入的图片最容易漏掉 alt
服务端渲染或静态 HTML 里加 alt 很容易，但 JS 动态生成的图片（如轮播图、商品列表、富文本解析后的 <img>）经常被忽略。CMS 上传时默认填 alt 为文件名（如 IMG_20240521.jpg）也属于无效写法。
- Vue/React 中用
v-for或.map()渲染图片时，确保每个<img>都绑定明确的alt字符串，不要留空或 fallback 到undefined - 富文本编辑器（如 Tiptap、Quill）导出的 HTML，需后处理补全缺失的
alt，或配置上传插件强制要求填写 - Varlet 等组件库（如
<var-image>、<var-card>）虽内置alt属性支持，但仍需开发者主动传值，不传即为缺失
最常被忽略的一点：alt 不是“加了就行”，而是要随图片在页面中的实际作用实时更新——比如切换语言时，alt 文本也应同步本地化。
