alt属性不能省略，因省略会导致辅助技术误判为内容缺失并报错，而alt=""明确表示装饰性图片；必须为img、audio、video提供alt、fallback或text track以保障可访问性与语义完整性。
必须为 <img>、<audio>、<video> 显式提供 alt、fallback 或 text track，否则可访问性与语义完整性直接失效。
为什么 alt 属性不能留空或省略
空 alt="" 表示“该图像是纯装饰”，浏览器和读屏软件会跳过；但省略 alt（如 <img src="logo.png">）会让辅助技术误判为“内容缺失”，触发错误提示。搜索引擎也会降权处理。
- 装饰图：用
alt=""，且建议配合role="presentation" - 信息图/图标：写明功能或含义，例如
alt="微信公众号二维码，扫码关注获取更新" - 响应式图片（
<picture>）：每个<source>不需要alt，只在最内层<img>上写一次 - SVG 作为内联元素时，不用
alt，改用<title>和<desc>（需包裹在<svg>内）
<audio> 和 <video> 的 fallback 文本怎么写才有效
仅靠 controls 属性无法满足 WCAG 1.2.1，必须提供可被解析的替代内容。浏览器在不支持该标签或资源加载失败时，才会渲染其内部文本。
- fallback 文本应说明媒体类型+核心信息，例如：
<p>此处为产品演示视频，展示三步完成配置流程</p> - 不要只写“您的浏览器不支持 video 标签”，这没有语义价值
- 若含字幕，必须用
<track kind="subtitles">关联 WebVTT 文件，且srclang和label不可为空 -
<video>的poster属性值也应有实际意义，例如poster="video-poster-setup.jpg"而非通用占位图名
用 <figure> + <figcaption> 包裹多媒体是否必须
不是强制，但只要多媒体承载独立语义（如插图、示意图、引用音视频），就必须用 <figure>。否则它只是页面流中一个普通内联节点，无法被正确索引或导出。
立即学习“前端免费学习笔记（深入）”；
- 适用场景：
<img>作为文章配图、<video>作为案例演示、<audio>作为采访片段 - 不适用场景：按钮图标、加载动画、背景图（应走 CSS）
-
<figcaption>必须是<figure>的第一个或最后一个子元素，不可嵌套其他块级标签 - 多个同类媒体（如图集）可共用一个
<figure>，但每个需独立<figcaption>
data-* 属性能用来存媒体元数据吗
可以，但仅限 JavaScript 运行时使用，不能替代语义化属性。例如 data-duration="127" 对 SEO 和读屏无效，也不参与 HTML 验证。
- 真正需要暴露给用户或机器的元数据（如时长、作者、许可协议），应通过
<meta>（在<head>中）、<link rel="license">或 Microdata / JSON-LD 实现 -
data-src常用于懒加载，但首次渲染仍需保证src或srcset存在有效值，否则 Lighthouse 会报“图像无源”错误 - 避免用
data-alt替代alt—— 浏览器根本不读这个
最容易被忽略的是：即使写了 alt，如果图片本身是 SVG 内联或通过 CSS background-image 加载，这些路径完全绕过 HTML 替代机制，必须另作处理。这类情况无法靠校验工具自动发现，得靠人工走查。
