alt属性是HTML中img标签的必需属性，必须显式声明；缺失会导致屏幕阅读器误读文件名，alt=""仅适用于纯装饰图，内容图需按上下文提供信息等价描述。
alt 属性必须写，且不能只写“图片”或留空不写
没 alt 的 <img> 在屏幕阅读器里会读出文件名（比如 banner-2024-v2.jpg），用户完全不知道这是什么。空字符串 alt="" 是合法的，但只适用于纯装饰图——比如分隔线、背景花边、无信息量的阴影图。
内容图的 alt 要做到“信息等价”：不是描述图片技术细节，而是说明它在当前上下文里的作用或传达的信息。
- 图表类：
alt="2024年Q1销售额同比增长12%，其中华东区贡献占比47%" - 链接图（如 logo）：
alt="返回博客首页"，不是"公司logo" - 图文混排中的配图：
alt="作者正在调试前端代码，屏幕上显示React DevTools控制台"，避免泛泛说“一个人在工作” - 如果同一张图在页面多处出现（如列表项缩略图），每次
alt都要结合上下文重写，不能复用
picture 元素里 img 的 alt 不能省，source 没有 alt 属性
<picture> 是容器，真正被渲染的是内部的 <img>，所以 alt 必须写在 <img> 上，而不是 <source> 上——后者根本不支持 alt，写了也无效。
常见错误是以为 <source media="(min-width: 768px)" srcset="hero-desktop.webp"> 里加了 alt 就行，结果整个图对屏幕阅读器不可见。
立即学习“前端免费学习笔记（深入）”；
- 所有
<picture>结构最终都依赖那个兜底的<img>提供可访问性，它的alt必须覆盖所有<source>可能加载的内容语义 - 如果不同
<source>加载的是裁剪差异极大的图（比如竖版头像 vs 横版场景图），alt应描述最完整的信息版本，或改用aria-describedby关联外部描述 - 不要给
<source>加role="img"或aria-label——无效，还可能干扰解析
SVG 图像的可访问性不能靠 alt，得用 <title> 和 <desc>
内联 SVG（直接写 <svg> 标签）不走 alt 流程，浏览器和屏幕阅读器只识别 <title> 和 <desc> 元素，且顺序和位置影响播报逻辑。
<title> 是必填项，相当于 alt；<desc> 是可选长描述，适合复杂图表。二者必须作为 <svg> 的**直接子元素**，且 <title> 在前。
- 错误写法：
<svg><g><title>折线图</title></g></svg>→<title>不在顶层，多数读屏器忽略 - 正确结构：
<svg aria-labelledby="svg-title"><title id="svg-title">过去12个月用户活跃度趋势</title><desc>峰值出现在9月，达240万DAU，较前月增长18%...</desc><path d="..." /></svg> - 如果 SVG 用作 CSS 背景图（
background-image），它本身不可访问，必须额外提供文本说明或替换为真实<img>
loading="lazy" 和 width/height 缺一不可，否则可访问性打折扣
懒加载本身不影响 alt 文本，但若没设 width 和 height，图片加载前占位是 0×0，屏幕阅读器可能跳过或误判位置；而 loading="lazy" 在首屏图上若没配合 fetchpriority="low"，部分 Chromium 浏览器仍会延迟播报。
- 必须显式写
width="640" height="480"（或按比例只写一个），让浏览器预分配空间，保证 DOM 位置稳定、读屏器锚点准确 -
loading="lazy"对非首屏图有效，但首屏图建议用loading="eager"或干脆不写（默认 eager），避免读屏器等不及加载就跳过 - 如果真要懒加载首屏关键图（比如 banner），加
fetchpriority="low"降权，但仅 Chromium 支持，别依赖它做可访问性兜底
alt 必须区分上下文；还有 <picture> 里 art-directed 多版本图，alt 往往无法兼顾全部视觉信息，这时就得靠 aria-describedby 或 <figure><figcaption> 补足。 
