img必须带alt属性，空字符串alt=""仅适用于纯装饰图；picture需包含img且其alt不可缺；video/audio须配track和aria-label；loading="lazy"仅用于非首屏图像。
img 必须带 alt，且不能靠省略或空格“绕过”
缺 alt 属性的 <img> 不是“少写个属性”，而是直接导致屏幕阅读器跳过该元素、搜索引擎无法理解图像意图、弱网或图片加载失败时用户完全不知所指。很多开发者用 alt="" 应对装饰图是对的，但把带功能的图标（比如“下载 PDF”按钮里的 PDF 图标）也设为空，等于抹掉了操作语义。
-
alt值需描述图像内容或功能，如<img src="print-icon.svg" alt="打印当前页面"> - 纯装饰图才用
alt=""；留空字符串，不是不写，也不是alt=" "（含空格会被读出） - 动态插入的图片，JS 创建
<img>时必须同步设置alt，否则无障碍树中缺失节点
picture + source 是响应式图像的语义化标配，不是可选优化
仅靠 srcset 和 sizes 无法表达“不同格式/不同条件下的内容替代”，而 <picture></picture> 提供了明确的语义层级：它是容器级语义标签，表示“这一组 <source></source> 和最终 <img> 共同构成一个图像资源的完整声明”。浏览器据此决定加载哪一份，辅助技术也据此理解图像存在多种呈现方式。
- 必须以
<img>为<picture></picture>的最后一个子元素，且它必须含alt -
<source></source>的type属性要真实匹配 MIME 类型，如type="image/webp"，不能写错成"webp" - fallback 到
<img>时，其src必须可用——不能只依赖现代格式而忽略基础路径
video 和 audio 需显式提供 track 与 aria-label，否则语义断裂
<video></video> 和 <audio></audio> 默认是“有媒体但无上下文”的黑盒。没有 <track></track> 的视频对听障用户不可访问；没 aria-label 或 <title></title> 的音频在焦点切换时无法被识别用途——这不只是体验问题，而是功能缺失。
- 字幕必须用
<track kind="subtitles"></track>，并确保srclang和label准确，如srclang="zh-CN" label="中文（简体）" - 若媒体无视觉/听觉内容（如背景音效），需加
aria-hidden="true"并设aria-label=""显式排除 - 避免仅靠 CSS 隐藏播放控件却不移除其语义：隐藏控件应配合
aria-hidden="true"，否则键盘用户仍会 tab 进去却不知用途
loading="lazy" 是性能属性，不影响语义，但滥用会破坏首屏结构感知
loading="lazy" 本身不改变元素语义，但它延迟加载行为可能让首屏关键图像“消失”在无障碍树初始构建中，尤其当 JS 未及时补全或 fallback 失效时。这不是 bug，而是语义与渲染时机的错位。
- 仅对非首屏图像使用
loading="lazy"；首屏 banner、logo、核心产品图必须省略该属性 - 搭配
decoding="async"可减少解码阻塞，但不要和fetchpriority="high"冲突 - 服务端渲染（SSR）场景下，
loading="lazy"在 HTML 中静态存在即可，无需 JS 动态添加——否则首次解析时语义已丢失
alt、track 或 aria-label，它们在代码里看起来正常，但在真实使用场景中已经失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
