Softonic

无障碍 CSS 加载动画生成器

步 1 / 2
下一步

对于使用屏幕阅读器的人来说，旋转的圆环没有任何意义，而持续的动效也可能让对动态敏感的人感到不适。先在这里生成加载动画，再添加下面的标记和减少动态效果的规则。

如何让加载动画更易于访问

  1. 1

    生成圆环

    在工具中设置尺寸、粗细、颜色和速度，然后复制 CSS。

  2. 2

    检查颜色对比度

    选择一种在浅灰色轨道和页面背景上都很醒目的弧线颜色。

  3. 3

    添加状态标记

    按照本页的示例，在加载动画元素上设置 role 和标签。

  4. 4

    添加减少动态效果的规则

    将下方的媒体查询粘贴到生成的 CSS 之后。

生成的 CSS 覆盖了什么，没有覆盖什么

工具提供的是视觉部分：一个带边框的圆和一次旋转。纯视觉的加载器对辅助技术没有意义，因为元素本身是空的。无障碍性来自标记，以及你在它周围添加的一条额外 CSS 规则。

用于声明状态的标记

<div class="loader" role="status" aria-label="正在加载结果"></div>

role="status" 会把元素标记为实时区域，因此许多屏幕阅读器会在它出现时朗读其标签。aria-label 应说明正在加载什么，例如“正在加载结果”或“正在保存”，而不要使用笼统的词。工作完成后移除该元素，并显示新内容。

你也可以在圆环旁边放置可见文字。可见文字对所有人都有帮助，包括那些不容易看清动态的人。

尊重减少动态效果的设置

一些访客会在系统中开启一项设置，要求网站减少动画。请在生成的 CSS 之后放置媒体查询来响应这项设置：

@media (prefers-reduced-motion: reduce) {
  .loader {
    animation-duration: 3s;
  }
}

这条规则是放慢旋转，而不是取消旋转。这样加载器仍然显得在运行，但不会快速移动。如果你更倾向于静态提示，请使用 animation: none;，并在圆环旁边显示“正在加载”文字。

对比度与尺寸检查清单

检查项 目标
弧线与页面的对比 清晰可见，最好达到 3:1 或更高的对比度
弧线与灰色轨道的对比 有明显区别，便于看清弧线的走向
尺寸 访客必须注意到的元素至少 24 px
速度 每圈 0.8 到 1.5 秒

限制

  • 生成器会自动选择轨道颜色（#eee）。如果你的页面背景与之相近，请在粘贴的 CSS 中修改它。
  • 速度值过快会让圆环闪烁。避免低于约 0.5 秒的数值。
  • 不要只依靠加载动画应对长时间等待。请用文字告诉用户正在发生什么。

快速测试

在操作系统中开启减少动态效果的选项，然后重新加载页面：圆环的旋转应该变慢。接着用键盘按 Tab 键浏览页面，确认加载动画不会把焦点从访客正在使用的控件上抢走。最后打开屏幕阅读器并触发一次加载状态，听一听元素出现时标签是否被朗读，以及之后能否顺利访问新内容。

常见问题

只有在添加标记之后才可以。空元素不会被朗读，因此请为它设置 role=“status” 和描述性的 aria-label。

它是一个 CSS 媒体查询，当访客要求设备减少动画时匹配。你可以用它来放慢或停止加载动画。

两种做法都可以。放慢动画会保留一点活动感；如果同时显示“正在加载”之类的文字提示，那么停止动画是最安全的选择。

用简单的语言描述操作，例如“正在加载结果”或“正在保存更改”。避免“加载中”“转圈”这类含糊的标签。

更大的尺寸和强烈的对比度让它更容易看见，但它们无法取代辅助技术所朗读的文字标签。

相关工具

Webpack 配置生成器

为纯 JavaScript、React 或 Vue 项目生成 webpack 5 的 webpack.config.js：支持 TypeScript、Babel、CSS 或 Sass、图片、HtmlWebpackPlugin、开发服务器，并给出 npm install 命令。

ASCII 表参考

完整 ASCII 表，覆盖 0 到 127；列出每个代码的十进制、十六进制、八进制、二进制值和 HTML 数字字符引用写法，包括 NUL、LF、DEL。

Protocol Buffers 解码器

在浏览器中解码 hex、Base64、Base64URL、文本或文件中的 Protobuf 线格式字节，准确检查字段候选解释并导出私密报告。

XML 格式化工具

以一致的缩进美化 XML 文档，并精确定位到行号，捕获格式良好性错误。

HTML 字符参考

可搜索的 HTML 实体列表，含命名代码与数值代码，并支持一键复制特殊字符和符号。

文件大小转换器

在字节、KB、MB、GB、TB及IEC二进制单位（KiB、MiB、GiB、TiB）之间转换，可自由组合十进制与二进制。

此工具还提供其他语言版本

使用指南与应用场景