骨架屏必须为所有节点设置aria-hidden="true"并配合aria-live区域播报加载完成，服务端需同步输出可访问性属性，动画须响应prefers-reduced-motion。
骨架屏 DOM 必须带 aria-hidden="true"，且不能出现在可访问流中
骨架屏是纯视觉占位，对屏幕阅读器来说毫无意义，若不显式声明，它会把一堆空 div 当作内容逐个朗读——比如“空白、空白、空白、空白”，严重干扰用户。更糟的是，如果骨架结构里混了 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：
<div aria-live="polite" aria-atomic="true" class="sr-only"></div>
当真实内容渲染完毕，往这个区域插入一句简短文案，比如 “文章列表已加载完成”。注意：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等），仅用div+ 类名 - 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-hidden，以及 live region 更新时机早于真实内容挂载完成——这两处一错，读屏器就会在错误时间播报错误信息。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
