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