标签本身不提升无障碍，真正起作用的是的alt属性是否准确、唯一且始终生效；错误使用会破坏语义，高对比度模式需用@media (forced-colors: active)强制回退并提供可读替代。
picture 标签本身不提升无障碍，但结构设计直接影响屏幕阅读器体验
很多人误以为用了 <picture></picture> 就自动“更无障碍”，其实恰恰相反：用错会直接破坏语义。浏览器和屏幕阅读器只读取最内层的 <img>，而忽略所有 <source></source>；<source></source> 本身没有 alt 属性，也不参与可访问性树。
真正起作用的是：<img> 的 alt 是否准确、是否被保留、是否在所有切换条件下都生效。
-
<img>必须存在且唯一，它是整个<picture></picture>的语义锚点 - 所有
<source></source>的切换（无论按尺寸、格式还是深色模式）都不能替换或覆盖<img>的alt - 如果
<img>的src是占位图或 fallback 图，它的alt仍需描述**原意图像内容**，而非“加载中”
高对比度模式下 picture 会失效，必须靠 CSS 强制回退
Windows/macOS 高对比度模式会强制重绘所有颜色，但 <picture></picture> 完全感知不到该状态——media="(prefers-color-scheme: dark)" 和 type="image/webp" 都不触发。结果是：图片变黑块、透明背景炸成实色、渐变消失，而屏幕阅读器仍在朗读旧 alt。
唯一可靠方案是用 @media (forced-colors: active) 隐藏原图，显式提供可读替代：
@media (forced-colors: active) {
picture img { display: none; }
.hc-text-fallback {
display: block;
forced-color-adjust: none;
}
}
- 必须为 fallback 元素添加
role="text"或包裹在<figure></figure>中并设aria-label - 避免用 SVG 代替文字——高对比度下 SVG 填充色会被系统覆盖，只剩不可读轮廓
- 不要依赖
prefers-contrast：Firefox 不支持，Safari 17.4+ 才刚起步，兼容性远不如forced-colors
深色模式切换时 alt 文本不能跟着变
<source media="(prefers-color-scheme: dark)"></source> 可以换图，但无法换 alt。如果深色版大图里文字位置、对比度或关键元素有调整（比如浅色 logo 换成深色反白版），原 alt 描述可能已不准确。
- 解决方案不是动态改
alt（JS 修改会打断屏幕阅读器流），而是让alt本身保持设备无关——描述画面“是什么”，而不是“怎么渲染” - 错误写法：
alt="白色科技感 logo 在深灰背景上"→ 深色模式下变成黑底白字，描述就错了 - 正确写法：
alt="XX科技品牌标识，由抽象电路线条构成的字母X与Y组合"→ 内容不变，适配所有主题
懒加载 eager / lazy 对无障碍的影响常被忽略
首页首图设 loading="lazy" 是性能陷阱：部分屏幕阅读器（尤其是旧版 NVDA、JAWS）会在 DOM 加载完成前跳过未加载的 <img>，导致用户根本听不到关键图像描述。
- 首屏核心图（如品牌主视觉、服务入口图）必须用
loading="eager" - 非首屏图用
loading="lazy"时，确保<img>已有完整alt，且不依赖 JS 补充文本 - 不要用 IntersectionObserver 动态插入
<img>并补alt——插入时机晚于屏幕阅读器初始化，文本不会被识别
真正影响无障碍的从来不是分辨率或加载速度，而是语义是否从一开始就稳定、明确、不可绕过。一旦 <img> 的 alt 被写死在 HTML 里，且结构不被 CSS 或 JS 遮蔽，那无论 <source></source> 切换多少次，对辅助技术来说它始终是同一张图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
