如何在HTML模版中优雅处理加载动画与骨架屏的可访问性通知

骨架屏必须为所有节点设置aria-hidden=”true”并配合aria-live区域播报加载完成，服务端需同步输出可访问性属性，动画须响应prefers-reduced-motion。

骨架屏 DOM 必须带 aria-hidden="true"，且不能出现在可访问流中

骨架屏是纯视觉占位，对屏幕阅读器来说毫无意义，若不显式声明，它会把一堆空 p 当作内容逐个朗读——比如“空白、空白、空白、空白”，严重干扰用户。更糟的是，如果骨架结构里混了 img 或伪元素文字，辅助技术可能误判为缺失 alt 或无效文本。

正确做法是：所有骨架元素统一加 aria-hidden="true"，父容器也加；同时确保它们不在 tab 顺序中（tabindex="-1" 不够，得配合 focusable="false" 或直接避免交互属性）。

• aria-hidden="true" 必须写在每个骨架节点上，不能只写在最外层——某些旧版 NVDA 会忽略嵌套继承
• 禁用 role="presentation" 替代 aria-hidden：后者语义更明确，且被所有主流读屏器一致支持
• 不要给骨架元素设 title 或 alt 属性，哪怕为空字符串——部分读屏器仍会播报“空标题”

加载完成时必须触发 aria-live 区域播报真实内容状态

骨架屏消失本身不是可访问事件，用户不知道“现在有内容了”。你得主动告诉辅助技术：“加载完成，这里是新内容”。靠 JS 切换显隐不够，必须用 WAI-ARIA 的实时区域机制。

推荐在页面顶部或紧邻主内容区的位置，声明一个不可见但可播报的 live region：

立即学习“前端免费学习笔记（深入）”；

<p aria-live="polite" aria-atomic="true" class="sr-only"></p>

当真实内容渲染完毕，往这个区域插入一句简短文案，比如 “文章列表已加载完成”。注意：aria-live="polite" 足够用于常规状态，assertive 只留给错误类通知。

• class="sr-only" 应含 position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;，确保视觉隐藏但读屏器可读
• 不要复用骨架容器作为 live region——它已被 aria-hidden 封锁，无法播报
• 避免频繁更新 live region 内容，两次更新间隔至少 500ms，否则读屏器会跳过中间播报

服务端注入骨架时，data-loading 状态必须同步影响可访问性属性

很多团队用服务端模板（如 SSR 框架）直接输出骨架 HTML，但忘了同步控制可访问性开关。典型错误是：HTML 里骨架已存在，但没设 aria-hidden，JS 还没执行前，读屏器就已开始朗读。

解决方案是把可访问性逻辑前移到服务端：骨架结构输出时，就带上 aria-hidden="true" 和 data-loading="true"；真实内容加载后，JS 移除 data-loading 并清空 aria-hidden（或改用 aria-hidden="false"）。

• data-loading 是唯一可信的状态源，JS 不应凭空设 loading = true，而应读取该属性再决定是否渲染骨架
• 服务端若无法动态注入 aria-hidden，至少保证骨架结构默认不可聚焦、无语义标签（不用 h2、p 等），仅用 p + 类名
• SSR 场景下，hydration 前骨架必须已带 aria-hidden，否则 React/Vue 的水合过程可能覆盖掉该属性

动画本身不需额外可访问性处理，但必须禁用 prefers-reduced-motion

CSS 加载动画（如 linear-gradient 位移）对读屏器无影响，无需额外标注。但动画可能引发前庭敏感用户不适，W3C 明确要求尊重系统级动效偏好。

所有骨架动画规则必须包裹在 @media (prefers-reduced-motion: reduce) 查询内，并设为 animation: none 或降级为静态灰阶背景：

@media (prefers-reduced-motion: reduce) {
  .skeleton-text {
    animation: none;
    background-color: #f0f0f0;
  }
}

• 不能只靠 JS 检测 matchMedia 后手动关动画——CSS 媒体查询才是标准且可靠的方案
• 禁用动画后，保留骨架结构和尺寸，否则布局仍会抖动
• 不要用 will-change: transform 或 backface-visibility 等 GPU 加速属性，它们在 reduced motion 下可能失效或引发兼容问题

骨架屏的可访问性不是“加个 ARIA 属性就完事”，它本质是两套并行状态：视觉占位与语义通道必须严格隔离又精准同步。最容易被忽略的，是服务端输出骨架时没带 aria-hidden，以及 live region 更新时机早于真实内容挂载完成——这两处一错，读屏器就会在错误时间播报错误信息。