alt属性是图片语义缺失时的必要兜底文本，仅当图片纯装饰或已有相邻文本完整描述时才可为空；须避免不写、乱写、堆砌关键词，动态渲染和svg需特殊处理。
alt 属性不是可选的装饰，而是图片语义缺失时的兜底文本；不写、乱写或堆砌关键词，都会让屏幕阅读器用户和搜索引擎直接“失明”。
alt 为空字符串 alt="" 什么时候才合法
仅当图片纯粹是装饰性（比如分隔线、背景花边）、或已有相邻文本完整描述了该图内容（如图紧跟在一段详细说明之后）时，alt="" 才是正确选择。浏览器和读屏软件会跳过这类图片，避免干扰。
- 错误用法：
<img src="logo.png" alt="">—— logo 是品牌标识，必须传达名称，应写alt="公司名称" - 错误用法：
<img src="chart.png" alt="">—— 图表含数据，哪怕旁边有标题，也需简述趋势，如alt="2023年销售额同比增长12%" - 注意：CSS 背景图不用
alt，它本就不属于 HTML 内容流，语义上就是装饰
alt 文本要像对人说话，不是喂给机器的关键词
写 alt 的第一原则是：假设你正用语音助手读网页，听的人看不见图——你要怎么一句话说清？关键词堆砌（如 alt="红色苹果 水果 健康 高清 大图"）既违反 WCAG，也会被搜索引擎降权。
- 好例子：
<img src="error-404.png" alt="找不到页面：插画中一个穿着西装的卡通人物站在空荡的街道中央，抬头看一块写着‘404’的路牌"> - 差例子：
<img src="error-404.png" alt="404 error page not found 404 error illustration"> - 如果图含文字（如截图、海报），
alt必须包含所有关键可读文字，不可省略
动态图片（React/Vue/JS 渲染）的 alt 容易漏掉
服务端渲染或静态 HTML 里手动加 alt 很简单，但 JS 动态插入图片时，常因条件分支、异步加载或状态未就绪，导致 alt 被忽略或设为 undefined。
- React 中避免：
<img src="%7Burl%7D" alt="{data?.desc}">—— 若data为空，alt变成alt="undefined"，读屏器真会念出“undefined” - 应写成：
<img src="%7Burl%7D" alt="{data?.desc">或更稳妥地用默认 fallback - Vue 模板中同理，
:alt="item.description || '无描述图片'"比单纯绑定item.description更健壮
最常被忽略的其实是 SVG 内嵌图片——<svg></svg> 本身不支持 alt，得靠 <title></title> + <desc></desc> 组合，且必须确保父容器有 role="img" 才会被读屏器识别。这事没标准 DOM 属性那么直白，得单独处理。
立即学习“前端免费学习笔记（深入）”；
