加载占位符无障碍实现疑问：仅aria-hidden是否足够？

一、Bootstrap 5占位符的无障碍问题：aria-hidden与aria-label的误用 #

1. 仅用aria-hidden="true"不足以传达加载状态 #

aria-hidden="true"的作用是将元素从屏幕阅读器的无障碍树中移除，避免占位符的空结构被误读，但它不会向用户传递“内容正在加载”的状态信息——屏幕阅读器用户只会看到内容“消失”，却不知道是在加载中，体验很差。

2. 添加aria-label报错的原因 #

• 当元素设置aria-hidden="true"时，它已被排除在无障碍树之外，此时aria-label完全无效，屏幕阅读器不会读取该属性，因此HTML验证器会提示“Possible misuse of ‘aria-label’”。
• 即使移除aria-hidden，普通<div>是无语义元素，默认不支持aria-label——只有带有固有语义的元素（如<button>、<article>）或通过role赋予语义的元素，才能正确关联aria-label，否则验证器仍会报错。

正确实现方式 #

要同时隐藏占位符的视觉结构、传达加载状态，可采用两种方案：

方案1：分离占位符与状态提示

<!-- 占位符容器：隐藏无障碍树 -->
<div class="card" aria-hidden="true">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title placeholder-glow">
      <span class="placeholder col-6"></span>
    </h5>
    <!-- 其他占位符内容 -->
  </div>
</div>
<!-- 视觉隐藏的状态提示：通过role="status"播报 -->
<div class="visually-hidden" role="status">内容加载中，请稍候</div>

方案2：给占位符容器赋予语义+状态标识

<!-- 容器添加role和aria属性，内部占位元素隐藏 -->
<div class="card" role="region" aria-busy="true" aria-label="卡片内容加载中">
  <img src="..." class="card-img-top" alt="..." aria-hidden="true">
  <div class="card-body" aria-hidden="true">
    <h5 class="card-title placeholder-glow">
      <span class="placeholder col-6"></span>
    </h5>
    <!-- 其他占位符内容 -->
  </div>
</div>

aria-busy="true"用于告知屏幕阅读器：该区域正在更新，请勿读取未完成的内容；配合aria-label直接说明加载状态，同时内部元素用aria-hidden="true"隐藏空结构。

二、卸载DOM后仅保留骨架屏的无障碍识别 #

当加载时移除未就绪的DOM，仅保留骨架容器，且“Loading”文本为视觉隐藏时，需确保屏幕阅读器能识别这是加载状态，关键在于两点：

1. 视觉隐藏文本的正确实现 #

使用专门的视觉隐藏CSS类，将文本移出可视区域但保留在无障碍树中：

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

2. 给骨架容器添加状态播报标识 #

在骨架容器上添加role="status"或aria-live="polite"，让屏幕阅读器自动读取内部的隐藏文本：

<div class="skeleton" role="status">
  <div aria-hidden="true"></div>
  <div aria-hidden="true"></div>
  <div aria-hidden="true"></div>
  <span class="visually-hidden">加载中</span>
</div>

• role="status"会将容器标记为状态更新区域，屏幕阅读器会以非打断式的方式播报内部文本；
• 内部的aria-hidden="true"骨架元素会被排除在无障碍树之外，避免空结构干扰；
• 视觉隐藏的“加载中”文本会被屏幕阅读器读取，明确告知用户当前是加载占位符。

内容的提问来源于stack exchange，提问作者Takeshi Tokugawa YD