图像可访问性问题八成源于alt属性使用不当，必须为所有img标签提供准确、语义明确的alt值：装饰性图片用alt=""，内容型图片需精准描述功能或信息，响应式图片的alt统一写在img标签中，css背景图、svg和js插入图需额外补充可访问性标记。
图像可访问性问题，八成出在 alt 属性没写对——不是漏掉，就是写了但语义错、空得不明确、或塞了无用词。修复它不需要 JS 或复杂 ARIA，纯 HTML 就能解决。
img 标签必须带 alt，空也要明明白白写出来
HTML5 规范强制要求 <img> 必须有 alt 属性，否则验证失败，屏幕阅读器也会报“缺失描述”。省略 alt 或写成 alt="图片" 都是无效的。
- 装饰性图片（如分隔线、纯背景图标）→
alt=""（双引号内为空，不是省略） - 内容型图片（含信息、功能、上下文）→ 必须提供准确文本，例如
alt="提交订单按钮图标"，而非alt="按钮" - 文件名或路径不会被自动读取；没写
alt时，某些屏幕阅读器会强行读出src值，比如icon_cart.svg，造成干扰
alt 文本怎么写才不算废话
关键不是“有没有”，而是“用户删掉这张图后，还能不能理解当前操作或信息？”——这决定了你写什么、写多长。
- 作为链接的图片：描述目的地，不是图像本身，例如
alt="返回首页"，而不是alt="房屋图标" - 图表/信息图：提炼结论，不是复述图中所有文字，例如
alt="Q2 用户留存率提升至78%，较Q1增长9个百分点" - 照片类：强调人物、动作、关系，例如
alt="工程师在站立式办公桌前调试嵌入式设备，桌上散落电路板和万用表" - 避免堆砌关键词、重复修饰词（如“高清”“精美”“官方”），屏幕阅读器会逐字朗读，破坏节奏
响应式图片和 picture 里的 alt 怎么设
srcset 和 <picture></picture> 只管“加载哪张图”，不改变语义职责。整组图片在逻辑上仍是同一张图，所以 alt 只需一份，且必须写在 <img> 上，不能丢给 <source></source>。
-
<img src="fallback.jpg" srcset="sm.jpg 480w, lg.jpg 1200w" alt="夏季新品：再生尼龙运动短裤，腰部抽绳设计">—— 正确，alt统一描述语义 -
<picture><source srcset="hero-desktop.jpg" ...><source srcset="hero-mobile.jpg" ...><img src="hero-fallback.jpg" alt="..."></source></source></picture>——alt只放最后这个<img>里 - 如果桌面版和移动版图语义完全不同（极少见），就别用
<picture></picture>切换，改用两套独立<img>并分别标注
其他图像载体容易被忽略的可访问性缺口
CSS 背景图、SVG 内联图、JS 动态插入图，都不走 <img> 的 alt 流程，必须额外补救。
- CSS 背景图：
background-image无法被屏幕阅读器识别，承载信息时应改用<img>+alt，或加aria-label/aria-hidden="true"显式声明意图 - 内联
<svg></svg>：默认无语义，必须加role="img"+aria-label（如<svg role="img" aria-label="下载图标"></svg>） - JS 插入的图片：确保插入 DOM 时同步设置
alt，别依赖模板变量渲染后自动填充——变量为空会导致src=""或alt="{{missing}}"
最难的不是语法对不对，是每次加 alt 前问自己一句：“这张图此刻在说什么？删掉它，用户会不会卡住？”——尤其图里有箭头、色块、小字标签时，漏掉任何一个视觉线索，对屏幕阅读器用户就是信息黑洞。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
