alt是html5强制属性，缺失将导致验证失败、屏幕阅读器误读、seo受损；alt=""表示纯装饰，须避免用title替代或堆砌关键词。
必须写，不能省略；alt不是“补充说明”，而是语义必需项，直接关系可访问性、SEO和HTML验证是否通过。
alt是强制属性，不是可选项
HTML5规范明确要求每个标签都必须包含alt属性。缺失会导致：
- HTML验证失败，现代构建工具（如ESLint + jsx-a11y插件）默认报错
- 屏幕阅读器可能读出文件名（如IMG_20260723.jpg），造成语义混乱
- 搜索引擎无法理解图片内容，影响图文混合搜索排名
alt="" 和不写 alt 完全不同
空字符串alt=""是有明确语义的声明：这张图纯装饰、无信息，辅助技术应静音跳过。
- ✅ 正确：装饰分隔线、背景花边、纯样式icon →
alt="" - ❌ 错误：
alt="decorative"、alt=" "（带空格）、或直接省略alt - ⚠️ 注意：CMS/富文本编辑器常自动删掉alt或填入文件名，需人工核对
含信息的图片要写有意义的描述
alt的核心任务不是“画面上有什么”，而是“这张图在这里起什么作用”。
- Logo链接到首页 →
alt="返回首页"，不是alt="公司logo" - 购物车图标在链接中 →
alt="查看购物车，当前有3件商品"，说明功能+状态 - 截图含错误提示 →
alt="错误提示：'ERR_CONNECTION_TIMED_OUT'"，完整复现关键文字 - 信息图表 →
alt="2026年Q2各渠道转化率：微信42%，抖音38%，小红书29%"
避免常见陷阱
别把title当alt用，也别堆砌关键词或重复信息。
- title在img上基本无效：Safari可能不显示，移动端不可触发，屏幕阅读器默认不读
- alt和title不要填同一段话，否则会重复朗读、干扰用户
- 禁止用父元素title替代img的alt，链接目标必须由img的alt明确表达
- 动态插入的图片（JS创建）必须手动设置
el.alt = "描述"，不会自动继承
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
