HTML中如何给图片元素添加替代文本

alt属性必须直接写在<img>标签内，仅当图片纯装饰或相邻文本已完整覆盖图意时可用，SVG需用<title><desc>并加role="img"，动态渲染须防undefined导致alt失效。

alt 属性必须写在 <img> 标签里，不能靠外部包裹元素补

很多人误以为给 <a> 或 <div> 加 alt 就能“传递”到内部图片，这是错的。HTML 规范明确要求 alt 是 <img> 自身的必需属性（除非是纯装饰且已用其他方式描述），浏览器和读屏器只认这个位置。

常见错误：

<a href="/home"><img src="logo.png"></a> —— 没写 alt，读屏器会朗读“链接，图片”，用户完全不知道是什么

<a href="/home" ><img src="logo.png"></a> —— alt 被加在 <a> 上，对图片无效

1. 正确写法只有一种：<img src="logo.png" >
2. 如果图片是链接，alt 应说明链接目的，比如 ，而不是仅描述图像
3. 服务端渲染或静态 HTML 中漏写 alt 很容易被发现；JS 动态插入时更易出错，需确保每个 new Image() 或 createElement('img') 都显式设置 alt

空字符串 不是“省事”，而是有严格前提

合法，但只适用于两类情况：图片纯装饰（如分隔线、背景花边），或已有相邻文本完整覆盖图意（比如图紧跟一段含所有关键信息的段落）。其他任何情况都算违规。

1. 错误：<img src="chart.png" > —— 图表含数据，哪怕旁边有标题“Q2销售趋势”，也得在 alt 里简述核心结论，如
2. 错误：<img src="icon-search.png" > —— 搜索图标功能明确，应写 或
3. SVG 内嵌图不支持 alt 属性，得用 <title> + <desc>，且父容器要加 role="img" 才能被读屏器识别

动态渲染场景下，alt 容易变成 undefined 或空字符串

React、Vue 或原生 JS 渲染列表图片时，alt 常因状态未就绪、条件分支遗漏或变量未定义而失效。例如 Vue 模板中写 <img :src="item.imgUrl" :>，一旦 item.desc 是 null 或 undefined，最终生成的就是 或 ，比没写还糟。

1. 建议 fallback：Vue 中用 :，React 中用 alt={item.desc ?? '图片描述缺失'}
2. 服务端渲染（SSR）时，确保模板引擎传入的 alt 字段非空，必要时后端做兜底
3. 检查 DevTools 的 Elements 面板，直接看生成的 <img> 标签是否真有 alt 属性及其值，别只信 JS 变量名

含文字的截图、海报类图片，alt 必须完整转录可读内容

如果图片里有文字（比如错误提示截图、活动海报、产品参数表），alt 文本就得把所有关键文字抄进去，一个字都不能省——这不是“重复”，而是让无法看图的人获得同等信息。

1. 示例：<img src="404-page.png" >
2. 避免堆砌关键词： 违反 WCAG，读屏器念出来毫无逻辑
3. 不要用文件名替代描述： 对用户毫无意义

真正难的不是写 alt，而是判断这张图对当前上下文到底承载什么信息——是功能按钮？数据呈现？情绪传达？还是纯粹视觉装饰？这个判断错了，后面所有操作都是徒劳。