alt属性是标签的强制语义要求，缺失、乱写或堆砌关键词会损害无障碍体验与seo；装饰图必须用alt=""（非空格），功能图需说明操作意图而非视觉描述。
alt 属性不是可选的“补充信息”，而是 <img> 标签的强制语义要求；没写、写空、写成 undefined 或堆砌关键词，都会让屏幕阅读器用户听不懂、搜索引擎理解错、甚至触发无障碍审计失败。
装饰性图片必须用 alt=""，不是删掉 alt 也不是写 alt="decorative"
分隔线、背景花边、纯排版留白图——这类图片不传递任何信息，辅助技术应完全跳过。写 alt="装饰线条" 或 alt="图片" 反而会让读屏器念出无意义词，造成干扰。
- ✅ 正确：
<img src="divider.png" alt=""> - ❌ 错误：
<img src="divider.png" alt="装饰">（多余朗读） - ❌ 错误：
<img src="divider.png">（缺属性，被当语义缺失）
注意：alt="" 是空字符串，不是空格或 alt=" "，后者仍会被读作“空白”。
功能性图片要说明「点击后做什么」，不是「看起来像什么」
图标按钮、链接缩略图、提交控件上的图像，其核心价值是动作意图。描述图形本身（如“放大镜”“齿轮”）对用户毫无帮助；他们需要知道“点这个能干什么”。
- ✅ 搜索按钮：
<img src="search.svg" alt="搜索"> - ✅ 返回首页 logo 链接：
<img src="logo.png" alt="返回首页"> - ✅ 商品图链接：
<img src="shoes.jpg" alt="查看男士运动鞋详情"> - ❌ 错误：
<img src="search.svg" alt="放大镜图标">（用户不知道这是搜索）
如果同一张图既作图标又作内容图（比如 banner 中的 logo），需按当前上下文判断：若它承载品牌识别功能，alt 应为 "公司名称"；若它只是装饰性水印，才用 alt=""。
动态渲染图片最容易漏掉 alt 或设成 undefined
React/Vue/JS 拼接 <img> 时，alt 常随数据状态丢失。常见现象：图片加载中显示 “undefined”，CMS 后台未填描述时 fallback 到文件名（product-001.jpg），或条件分支里压根没写 alt。
- ❌ 危险写法：
<img src="%7Burl%7D" alt="{data.desc}">→ data 为空时渲染为alt="undefined" - ✅ 安全写法：
<img src="%7Burl%7D" alt="{data?.desc"> - ✅ Vue 模板：
<img :src="item.img" :alt="item.description || '无描述图片'"> - ✅ CMS 后台：上传时强制填写「图片描述」字段，并拒绝空提交；未填则 fallback 为空字符串
alt=""，而非文件名
特别注意：SVG 内嵌图不支持 alt 属性，得用 <title></title> + role="img" 组合，否则读屏器直接忽略。
复杂图片不能只靠 alt，要用 <figure></figure> + <figcaption></figcaption> 补充
流程图、组织架构图、带大量文字的海报、数据密集型图表——单靠 alt 无法承载全部信息。强行塞进 125 字以内，要么失真，要么遗漏关键逻辑。
- ✅ 合理做法：
alt给摘要，<figcaption></figcaption>给细节<figure><img src="signup-flow.svg" alt="用户注册流程：输入邮箱→验证→设置密码→完成"><figcaption>完整流程含 4 个步骤，支持邮箱或手机号注册，验证方式包括短信和邮件</figcaption></figure> - ✅ 截图含文字：alt 必须包含所有关键可读文案，例如
alt="蓝色背景海报，中央大字'限时免息'，下方小字'至8月31日，最高12期'" - ❌ 错误：
alt="流程图"或alt="信息图"（等于没说）
最常被忽略的一点：alt 不是“写完就完”的技术字段，它是你对这张图在当前页面中「真实作用」的上下文判断——每次插入图片，都要问一句：此刻，它对用户意味着什么？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
