可访问的骨架加载（加载占位符）HTML

Answer 1

使用 aria-hidden=true 可以完全隐藏屏幕阅读器的内容。因此，同时放置 aria 标签是完全没有用的，而且是矛盾的。

一般来说，将 aria-hidden=true 放在大代码块上并不是一个好习惯：

• 一旦内容准备好，您很容易忘记将它们全部删除，特别是如果您像在其中一个片段中那样随机地将 aria-hidden=true 放在任何地方
• 如果内容在 aria 隐藏内容中包含任何可聚焦元素（链接、表单元素等），那么您会遇到更大的问题：可以使用选项卡访问该元素，但不能使用文档导航访问该元素，并且可能无法读取该元素当对焦时。这是另外一件需要注意的事情，您一定不要忘记在删除 aria-hidden=true 的同时删除 tabindex=-1

属性 aria-hidden 应谨慎使用，仅在非常精确的情况下使用，当然不适用于大块代码。

事实上，对于当前正在加载的内容，更安全的是：

• 仅在内容准备好时才将内容放入 DOM，而不是在此之前
• 使用 CSS display:none 或 Visibility:hidden 隐藏当前正在加载的内容，这保证了无论使用何种方式读取页面，它都完全不可见、不可读和不可操作

现在关于如何告诉用户正在加载某些内容的第二个问题，当然，如果您将加载横幅放在 aria-hidden=true 下，则完全没有用。 您可以使用 aria-live=polite 将此类加载消息放置在实时区域中，这样每次内容更改时都会宣布该消息。 许多资源提供了此类加载横幅的示例。

注意：aria-live 用于加载消息，例如“正在加载，请稍候”，而不是用于当前正在加载的内容本身。