alt 属性是图像唯一可靠的替代文本方案，浏览器和屏幕阅读器仅识别它；缺失 alt 会使图像对视障用户、加载失败及 seo 失效；装饰图应设为 alt=""，避免冗余词；title 和 aria-label 不可替代 alt，尤其在标准 img 元素中。
alt 属性是唯一可靠的图像替代文本方案
浏览器和屏幕阅读器只认 alt，其他属性（比如 title、aria-label）要么不触发，要么被忽略或覆盖。如果你没写 alt，那这张图对视障用户、加载失败场景、SEO 来说，基本等于不存在。
实操建议：
-
alt必须是简明、准确的描述，不是关键词堆砌。例如：<img src="chart.png" alt="2024年Q1销售额同比增长12%"> - 纯装饰图用空字符串：
alt=""（不是省略，也不是alt=" "），否则屏幕阅读器会跳过或误读 - 避免写“图片”“图标”这类冗余词——屏幕阅读器已告知这是图像
-
title不是alt的替补，它只在鼠标悬停时显示，且多数移动设备不支持，也不被读屏软件当作替代内容读出
aria-label 和 aria-labelledby 仅用于无 <img alt="HTML如何标记文档的替代内容_HTML标记文档替代内容属性【属性】" > 标签的场景
当图像由 CSS 背景图、SVG 内联元素或伪元素生成时，alt 无法使用，这时才轮到 ARIA。但要注意：它们不适用于标准 <img alt="HTML如何标记文档的替代内容_HTML标记文档替代内容属性【属性】" > 元素——浏览器会优先采用 alt，直接忽略同级的 aria-label。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 给
<img alt="HTML如何标记文档的替代内容_HTML标记文档替代内容属性【属性】" >同时加alt和aria-label，结果读屏只读alt，后者完全失效 - 用
aria-label替代缺失的alt，导致部分旧版读屏（如 JAWS 早期版本）或搜索引擎不识别 - SVG 中漏掉
role="img"，即使写了aria-label，某些读屏仍当普通容器处理
正确示例（SVG）：
<svg role="img" aria-label="警告：剩余电量不足10%" viewBox="0 0 24 24">...</svg>
object 元素的 fallback 内容必须可访问且非空
用 <object></object> 嵌入外部资源（如 SVG、PDF）时，其内部的 HTML 内容是备用方案，但它本身不会自动变成替代文本——得靠你手动写成可读、可交互的内容。
关键点：
- fallback 区域不能只放“请升级浏览器”，而应提供等效信息，比如 PDF 图表的摘要文字或数据表格
- 如果 fallback 是纯文本，记得加
lang属性，确保读屏正确发音 - 不要把
alt用在<object></object>上——它不支持该属性；要用aria-label或包裹容器的aria-label - Chrome 和 Safari 对
<object type="image/svg+xml"></object>的 fallback 渲染行为不一致，建议优先用<img alt="HTML如何标记文档的替代内容_HTML标记文档替代内容属性【属性】" >或内联 SVG
图片加载失败时，alt 是唯一可见的兜底内容
网络中断、路径错误、CSP 阻止加载……这些都会让图像变成本地占位符（小图标 + 文字）。此时用户看到的就是 alt 值——它既是语义支撑，也是实际体验的最后防线。
容易踩的坑：
- 动态插入
<img alt="HTML如何标记文档的替代内容_HTML标记文档替代内容属性【属性】" >时忘了设alt，JS 创建元素后只赋了src - 用变量拼接
alt但值为空或undefined，结果渲染出alt="undefined"这种字面量 - 国际化项目中，
alt没随语言切换，仍显示英文，造成理解断层 - 某些 CMS 导出 HTML 时自动清空
alt，需在发布前做静态检查（可用 axe-core 或 Lighthouse 扫描）
复杂点在于：替代内容从来不是“写一次就完事”。它得跟着图像用途变——功能图标要说明操作，数据图要概括趋势，装饰图要沉默，而错误状态下的 fallback 得同时兼顾技术可读性和用户友好性。
