图片无障碍访问需确保降级路径自然、语义清晰、不依赖JS：alt必须准确描述内容而非仅标注类型，响应式图片须保证各源图语义等价，复杂图文应使用figure/figcaption结构化降级，禁用CSS背景图承载关键信息。
图片无障碍访问不是“加个alt就完事”，而是要确保当图片加载失败、被禁用、或用户根本看不到时，页面仍能传达等价信息——降级路径必须自然、语义清晰、不依赖 JS。
图片加载失败时，alt 是唯一 fallback
浏览器禁用图片、网络中断、或用户使用纯文本浏览器（如 Lynx）时，<img> 标签会退化为纯文本容器，只渲染 alt 内容。此时：
-
alt不能为空字符串（alt=""）除非图片确为纯装饰（如分隔线、背景花边），且无任何信息价值 -
alt="公司 logo"这类描述无效——屏幕阅读器用户不知道这是哪家公司、什么业务；应写成alt="阿里巴巴集团官方 Logo，红底白字‘Alibaba’字样" - 含文字的 Banner 图，
alt必须完整复述可见文字，包括促销数字、时效词（如“限72小时”）、动作指令（如“立即领取”） - 避免在
alt里重复“图片”“图标”“照片”等冗余词——<img>标签本身已表明类型
srcset 和 sizes 不影响无障碍，但降级逻辑要显式声明
响应式图片用 srcset + sizes 时，浏览器自动选最匹配的资源，但所有候选图都共享同一个 alt。问题在于：当高分辨率图加载失败，回退到低分辨率图时，alt 仍需准确描述该低分辨率图所呈现的内容。
更关键的是 <picture></picture> 场景：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 每个
<source></source>不支持alt，它只负责提供资源；最终的<img>才是承载替代文本的唯一位置 - 若用
type="image/webp"提供现代格式，而 fallback 的<img src="fallback.jpg">与 WebP 内容不一致（比如构图/文案微调），alt就可能失真 - 解决方案：所有源图内容必须语义等价；若做不到，宁可不用
<picture></picture>，改用单图 + CSS 背景图降级（背景图仅用于装饰，不承载关键信息）
当图片完全不可用时，figure/figcaption 提供结构化降级
单纯 <img> 只能靠 alt 传信息；但复杂图文（如数据图表、步骤示意图、带说明的截图），需要更强的语义容器来支撑降级。
- 用
<figure></figure>包裹<img>，再配<figcaption></figcaption>——即使图片不显示，figcaption仍作为普通块级文本渲染，提供上下文和解释 -
figcaption不是alt的重复，而是补充：例如alt="柱状图：2025年Q3各渠道销售额"+figcaption="线上渠道占比62%，同比增长11%；线下门店下滑5%，主因新开门店尚未达产" - 切忌把
figcaption写成“图1”“示意图”——它必须独立传达意义，否则降级后只剩空壳 - 若 JS 动态生成图表（如 Canvas / SVG），必须同步注入等效的
<figure></figure>结构到 DOM，不能只靠 ARIA 描述
不要用 CSS background-image 替代 <img> 做内容图
CSS 背景图天生无语义，无法绑定 alt，也无法被屏幕阅读器识别为内容——它只属于视觉层。
- 营销 Banner、产品主图、步骤图解、含关键文字的信息图，一律用
<img>，不用div+background-image - 若因设计限制必须用背景图（如全宽视差滚动），则必须额外添加一个
<img>（alt完整描述）并设aria-hidden="true"+style="max-width:90%"实现视觉隐藏但保留可访问性树节点 - 这种“隐藏图”方案是权衡之举，仅限不得已；优先重构 UI，让内容回归 HTML 语义流
真正的降级不是技术兜底，而是内容兜底：每张承担信息功能的图片，都必须有对应的文字表达，且该表达在 DOM 中真实存在、无需 JS 激活、不依赖样式渲染。否则，一旦某层失效（JS、CSS、图片加载），信息链就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
