alt 是 标签的强制性语义属性，缺失会导致 html5 验证失败、构建工具报错及违反 wcag 无障碍标准；空字符串 alt="" 合法且表示装饰性图片，而省略 alt 属性则可能引发读屏器误读。
alt 属性不是“备用提示”或“可选说明”，它是 <img> 标签的强制性语义属性，缺失会导致 HTML5 验证失败、构建工具报错（如 eslint-plugin-jsx-a11y），且直接违反 WCAG 无障碍标准。
为什么浏览器不报错但构建工具会拦住？
现代浏览器对缺失 alt 宽容（仍渲染页面），但构建流程（Vite、Webpack + ESLint）、CI/CD 流水线、甚至 VS Code 插件默认启用 jsx-a11y/alt-text 规则——它检查所有 <img> 是否含非空 alt 或明确为空字符串。
- 报错示例：
Failed to pass accessibility check: img element must have an alt prop - 空
alt=""是合法且推荐的，表示“该图无文字等价内容”，读屏软件会跳过；而省略alt属性，某些读屏器可能读出src文件名，造成干扰 - React 中用 JSX 写
<img src="icon.svg">就会触发此错误，必须补上alt
alt 和 onerror="this.src='fallback.jpg'" 能互相替代吗？
不能。二者解决的是完全不同的问题层：
-
alt是语义层：图片哪怕 200 成功加载，没alt，屏幕阅读器就无法传达意图；搜索引擎也抓不到图像主题 -
onerror是加载层：只在资源返回非 200（如 404）时触发；但遇到 CORS 拦截、MIME 类型错误（比如服务器返回 text/html）、或图片被浏览器策略禁用时，onerror根本不执行，页面静默显示断裂图标 - 用
onerror做 fallback 有循环风险：若fallback.jpg也 404，会无限触发错误，部分浏览器可能卡死
alt 文本到底该怎么写？
核心不是“描述画面”，而是“说明这张图在当前上下文中起什么作用”。一句话说清，不加冗余前缀：
- 功能型图（如按钮图标）：
alt="搜索"、alt="关闭弹窗"，而非"放大镜图标" - 内容型图（如文章配图）：
alt="2024 年东京奥运会女子跳高决赛现场"，不含“图片显示”“一张”等无效词 - 装饰性图（如背景分隔线、纯样式 icon）：
alt=""，不可省略，也不可写alt="装饰线条" - 含文字的图（如海报截图）：需完整写出图中关键文字，例如
alt="限时优惠：全场满 299 减 50，8月31日前有效"
最容易被忽略的点是：alt 的价值不在“有没有”，而在“是否与上下文一致”。同一张图，在首页 banner 和商品详情页里，alt 文本应该不同——前者强调品牌调性，后者强调产品特性。写完记得问自己一句：去掉这张图，仅靠 alt 文本，用户能理解它在这里要完成什么任务吗？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
