alt属性是图片被搜索引擎索引的底线，必须真实具体地回答“图里有什么”和“为什么放这张图”，装饰图写alt=""，功能图标描述动作意图，动态渲染需兜底避免undefined，SVG用<title>替代，background-image不可见须改用语义化方案。
alt 属性不是 SEO 的“加分项”，而是图片被搜索引擎索引的底线——没写、写成 undefined、或堆砌关键词，这张图就等于在搜索里注销了。
alt 属性必须回答两个问题：图里有什么？为什么放这张图？
搜索引擎和读屏器只认 alt 里的文字，它得是真实、具体、上下文完整的描述，不能靠猜测或泛化。
- 内容图（产品图、截图、信息图）：用一句话说清主体 + 状态 + 关键上下文，例如
alt="iPhone 16 Pro 拆机图,展示A18芯片与钛合金中框连接处" - 装饰图（分隔线、背景花纹、纯留白）：必须写
alt=""，不能删掉属性，也不能写alt="decorative"或空格 - 功能图（按钮图标、筛选箭头）：描述动作意图，不是图形外观，例如
alt="筛选订单状态"，而不是alt="下拉箭头图标" - 链接中的图片：
alt要说明点击目标，比如alt="查看红色无线耳机详情页"，而非alt="红色耳机"
动态渲染场景下 alt 容易变成 undefined 或 fallback 错误
React/Vue/模板引擎里，alt 常因数据缺失直接输出字面量 undefined，或后端 CMS 默认塞入 "image"、文件名（如 product-001.jpg），这类写法在无障碍审计中 100% 报错。
- Vue 中避免
v-bind:alt="item.alt"，改用v-bind:alt="item.alt || ''" - React 中用
alt={item.alt ?? ''}或条件判断兜底 - CMS 后台必须强制填写「图片描述」字段；未填时，后端应输出
alt=""，而非硬塞alt="image"
响应式图片、SVG 和 background-image 的 alt 处理陷阱
srcset 和 <picture> 不改变语义，所有 <source> 和最终 <img> 共享同一个 alt 值——别为 desktop/mobile 版本写不同描述。
立即学习“前端免费学习笔记（深入）”；
- 内联
<svg>不支持alt属性，必须用<title>标签（不是title属性），并包裹在<svg aria-hidden="false">中 -
background-image对爬虫和读屏器完全不可见，必须改用<img>；若真无法替换，退而求其次用语义化容器 +role="img"+aria-label，但这是次优解 - 文件名仍是第一眼线索：优先用
red-wireless-headphones.jpg而非IMG_8923.jpg，搜索引擎会先看文件名再读alt
最容易被忽略的是 CMS 或模板系统中 alt 的 fallback 逻辑，以及 <svg> 的 <title> 替代方案——线上环境出问题最多的，往往就卡在这两处。
