装饰性图片必须显式写alt=""，不能省略或填空格；省略会触发html5验证失败和lighthouse严重警告，alt=" "等同于未设置，仅alt=""能明确声明无语义并被辅助技术彻底忽略。
装饰性图片必须显式写 alt=""，不能省略或留空格
省略 alt 属性会触发 HTML5 验证失败、Lighthouse 报“严重可访问性问题”，且部分构建工具（如 Hugo、Next.js）直接拒绝渲染；alt=" "（含空格）或 alt="\t" 等同于未设置，屏幕阅读器可能读出文件名或跳过但不静音。
只有 alt="" 是明确声明“此图无语义”，辅助技术才会彻底忽略。哪怕是一条 <img src="divider.png"> 分隔线，也必须补上这个空字符串。
- 错误：
<img src="icon-star.png">—— 构建报错，读屏器可能朗读 “icon star dot png” - 错误：
<img src="bg-dot.svg" alt=" ">—— 仍被识别为缺失描述 - 正确：
<img src="bg-dot.svg" alt="">
aria-hidden="true" 不是 alt="" 的替代品，而是补充手段
aria-hidden="true" 只影响辅助功能树，不改变视觉呈现，也不能替代 alt 的语义职责。它适合用于已用 alt="" 的装饰图之外的冗余内容，比如重复的图标文字、模态框关闭后的背景层。
常见误用是给 <img> 同时加 aria-hidden="true" 和 alt=""：后者已足够，前者多余；更糟的是只加 aria-hidden="true" 却漏掉 alt=""，HTML5 验证仍失败。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 纯装饰图：
<img src="deco-arrow.svg" alt="">—— 足够，无需aria-hidden - 图文共存按钮中的图标：
<img src="search-icon.svg" alt=""><span>搜索</span>—— 图标静音，文字承担语义 - 需隐藏的非图像元素（如冗余提示）：
<div aria-hidden="true">点击图标展开菜单</div>
CSS 背景图无法被读屏器识别，alt 不适用但也不能靠它“绕开”可访问性
用 background-image 实现装饰性内容是推荐做法，因为它天然不进入 DOM 流，也不需要 alt。但一旦你用了 <img> 标签，就必须面对 alt 的强制要求 —— 没有“用 CSS 隐藏就能免填”的后门。
反过来，如果一张图本该承载信息（比如 banner 上带促销文案的合成图），却硬塞进 CSS 背景里，再用 aria-label 补救，效果极差：多数读屏器不读 aria-label 在非语义容器上的值，且搜索引擎完全无法索引。
- 推荐：
<div class="hero-banner"></div>+ CSSbackground-image+ 独立文本节点说明促销信息 - 不推荐：
<div class="hero-banner" aria-label="618大促：满300减50"></div>—— 不可靠，且违反语义分离原则 - 必须用
<img>时：<img src="banner-618.jpg" alt="618大促：全场满300减50，限时三天">
响应式图片（srcset / <picture></picture>）中 alt 只属于最内层 <img>
<source></source> 标签不支持 alt，写了也无效；srcset 只控制加载哪张图，不改变语义。无论你提供多少尺寸、多少格式的源，alt 始终只有一个，且必须贴在 <img> 上。
容易忽略的是：同一张装饰性图，在不同 <picture></picture> 场景下，alt="" 依然适用；但若某张图在小屏是装饰、大屏变内容（比如小屏隐藏的图表摘要），就不能一概用空 alt，得按上下文重写。
- 错误：
<picture><source media="(min-width:768px)" srcset="chart-lg.webp"><img src="chart-sm.png" alt=""></source></picture>—— 若大屏 chart 是核心数据，alt=""就错了 - 正确：
<picture><source media="(min-width:768px)" srcset="chart-lg.webp"><img src="chart-sm.png" alt="Q2销售额：iOS端同比增长23%，Android端增长17%"></source></picture> - SVG 内联图标：
<svg role="img" aria-hidden="true"><title>删除</title> <use href="#icon-trash"></use></svg>——alt不可用，必须用<title></title>+role="img"
alt 写什么，而不是“顺手补个空”或“反正看不见”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
