alt 是 html5 规范强制要求的必需属性，省略即为无效 html；必须为每个 提供语义准确的 alt 值（含 alt=""），不可省略、不可用 title 替代，且响应式图片中仅最内层 需独立设置。
alt 是 HTML5 规范强制要求的必需属性
不是“建议填”，是语法层面的硬性约束。HTML5 明确规定 <img> 元素必须包含 alt 属性，省略即为无效 HTML。W3C 验证器会报错，现代构建工具（如 ESLint + eslint-plugin-jsx-a11y）默认拦截，CI 流程中可能直接阻断发布。
不写 alt 或写错空值会导致真实可访问性断裂
屏幕阅读器对 alt 的处理非常明确：
-
alt=""（无空格）→ 主动跳过，语义清晰：「此图无信息」 - 完全省略
alt→ 旧版 JAWS 可能读出src文件名，NVDA 可能静默跳过，用户卡在未知空白处 -
alt=" "（带空格）→ 被识别为有效文本，部分读屏软件朗读“空白”，造成干扰
你本地就能验证：打开 Chrome DevTools → Elements 面板 → 右键删掉某个 <img> 的 alt → 切到 Accessibility 标签页，立刻看到 “Missing alternative text” 提示。
alt="" 和不写 alt 的区别，比你想象得更关键
很多团队以为“反正图不重要，不写也行”，但实际影响链很直接：
- WCAG 2.1 审计（如 axe、WAVE）将缺失
alt标为 A 级必改项，政府/教育类项目上线一票否决 - Lighthouse 可访问性得分直接归零，SEO 图文混合结果权重大幅下降
- 图片加载失败时，用户只看到断裂图标，没有任何文字提示，上下文瞬间断裂
- CMS 后台填了标题字段，但模板没把值注入
alt→ 前端渲染仍是无alt，等于白填
真正难的不是“要不要加”，而是判断每张图在当前上下文里是否承载信息——按钮图标、头像、商品图、数据图表，哪怕只是个放大镜，只要用户靠它理解操作意图，alt 就必须有意义，比如 alt="搜索"，而不是 alt="icon" 或 alt="product image"。
title 不能替代 alt，两者用途完全不同
title 是工具提示，仅在鼠标悬停时由部分浏览器显示，对屏幕阅读器、搜索引擎、离线环境均无效。而 alt 是图像失效或不可见时的唯一语义通道：
-
alt必须描述图像在当前上下文中的功能或内容 -
title可补充非关键信息（如拍摄时间、版权说明），但绝不能用来“凑数”代替alt - 用
title="Smiley face"替代alt，Lighthouse 仍报错，视障用户仍听不到任何描述
容易被忽略的是响应式图片：<picture></picture> 里的每个 <source></source> 不需要 alt，但最内层的 <img> 仍必须独立携带 alt —— 它不继承父级或兄弟节点的值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
