骨架屏必须用语义化标签包裹并设aria-hidden="true"，禁止添加alt/title等命名属性，加载完成后须remove()而非display: none，且需适配字体缩放、深色模式及服务端dom结构。
骨架屏必须用语义化标签包裹，不能全是
屏幕阅读器看到一堆无意义的 div，只会读成“division”“generic element”，用户完全不知道这是标题区、头像位还是卡片容器。骨架结构不是视觉装饰，它得参与可访问性树的构建。
实操建议：
- 用
<header></header>包裹顶部骨架（如 logo + 搜索栏），而不是<div class="skeleton-header"> <li>列表项骨架用 <code><article></article>或带role="article"的容器，别用裸div套div - 图片占位区写成
<figure class="skeleton-image"></figure>，后续真实图可用<figcaption></figcaption>补充说明 - 所有骨架容器必须设
aria-hidden="true"—— 它们不是内容，只是占位，不该被读出来 - 骨架区域一律不设
alt、title、aria-label等命名属性 - 所有视觉提示（如流光动画）必须纯 CSS 实现，不依赖
content属性 - 若需说明“此处正在加载”，应由真实内容容器统一通过
aria-busy="true"声明，而非分散在骨架节点上 - 真实内容渲染完成后，调用
skeletonEl.remove()，彻底从 DOM 移除 - 若骨架由 Web Component 封装，确保
disconnectedCallback清理所有requestAnimationFrame和定时器 - 切勿在骨架节点上绑定任何事件监听器或数据引用，否则容易引发内存泄露
- 文字类骨架（如标题、段落）用
rem或em设高，并配合line-height固定行距，避免随字体缩放浮动 - 深色模式下，骨架背景色不能硬编码
#f0f0f0，改用--skeleton-bg: var(--color-surface)，并随prefers-color-scheme动态更新 - 禁用
transform: scale()或zoom调整骨架大小——它们会破坏像素级对齐，且不被所有辅助技术识别
禁止在骨架元素上写 alt、title 或伪元素文字
常见错误是给 .skeleton-avatar 加 alt="loading avatar"，或用 ::before { content: "加载中..." }。这会让屏幕阅读器误报冗余信息，甚至打断用户操作流。
正确做法：
加载完成时必须 remove() 骨架节点，不能只 display: none
用 display: none 或 visibility: hidden 隐藏骨架，会导致 @keyframes 动画持续运行、内存泄漏、页签切换卡顿——尤其在 SPA 中反复进入同一页面时，动画实例越积越多。
关键动作：
响应式骨架屏要适配系统字体缩放和高对比度模式
很多团队用固定 px 写骨架高度，结果用户开启 Windows 高对比度模式或系统大号字体后，骨架和真实内容高度错位，触发重排跳动。
适配要点：
aria-hidden 就完事”。它必须和服务端输出的真实 DOM 结构同级、同嵌套、同语义角色，否则 hydration 时会错位，导致屏幕阅读器解析出两套冲突的结构树。
