AEM渲染的video元素无障碍报错[WEB-60]求解决方案

核心结论 #

playsinline=""、loop=""这类空属性不是触发你遇到的无障碍错误的原因。

错误本质 #

这个WEB-60错误的核心是：你的<video>元素没有提供可访问名称——屏幕阅读器等辅助技术无法识别这个视频的内容或用途，所以需要给它添加能被辅助技术读取的标识信息。

修复方法 #

给<video>元素添加可访问名称，有几种常用方案：

方案1：直接添加aria-label属性 #

给视频设置简短、准确的描述，适合没有对应页面标题的场景：

<video playsinline loop muted autoplay width="100%" aria-label="首页轮播宣传视频">
  <source src="video.mp4" type="video/mp4" data-src="video.mp4"/>
  <source src="video.webm" type="video/webm" data-src="video.webm"/>
  抱歉，你的浏览器不支持嵌入视频。
</video>

注意：你代码里webm类型的source用了mp4文件，建议换成对应的webm格式资源，避免无效请求

方案2：用aria-labelledby关联已有标题 #

如果页面中已经有描述该视频的标题元素，可以通过ID关联：

<h2 id="promo-video-title">品牌新品宣传视频</h2>
<video playsinline loop muted autoplay width="100%" aria-labelledby="promo-video-title">
  <!-- source元素和降级内容 -->
</video>

方案3：添加屏幕阅读器可见的隐藏文本 #

适合需要同时满足视觉无干扰和辅助技术识别的场景，用CSS把文本移出可视区域：

<video playsinline loop muted autoplay width="100%">
  <span class="sr-only">企业核心业务介绍视频</span>
  <source src="video.mp4" type="video/mp4" data-src="video.mp4"/>
  <source src="video.webm" type="video/webm" data-src="video.webm"/>
  抱歉，你的浏览器不支持嵌入视频。
</video>

对应的CSS：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

另外提一句：HTML5的布尔属性（比如playsinline、loop）不需要赋值，直接写属性名即可（比如<video playsinline loop ...>），空属性写法虽然不会导致错误，但规范写法更简洁。

内容的提问来源于stack exchange，提问作者linnse