ARIA：进度条角色

progressbar 范围窗口部件表示已收到请求，并且应用程序正在朝着完成请求的操作的方向取得进展。

作者**可以**设置 aria-valuemin 和 aria-valuemax 以指示最小和最大进度指示器值。否则，它们的隐式值遵循与 HTML 的 <input type="range"> 相同的规则。

• 如果 aria-valuemin 缺失或不是数字，则默认为 0（零）。
• 如果 aria-valuemax 缺失或不是数字，则默认为 100。
• 仅当进度条的最小值不是 0 或最大值不是 100 时，才需要为 progressbar 角色设置 aria-valuemin 和 aria-valuemax 属性。
• 除非值为 indeterminate，否则应提供并更新只读的 aria-valuenow，在这种情况下，请不要包含该属性。如果设置，请确保 aria-valuenow 值介于最小值和最大值之间。

如果将 progressbar 角色应用于 HTML <progress> 元素，则可访问名称可以来自关联的 <label>。否则，如果存在可见标签，则使用 aria-labelledby；如果不存在可见标签，则使用 aria-label。

在平台无障碍 API 中表示时，某些类型的用户界面组件只能包含文本。无障碍 API 没有方法表示包含在 progressbar 中的语义元素。为了解决此限制，浏览器会自动将角色 presentation 应用于任何 progressbar 元素的所有后代元素，因为它是不支持语义子元素的角色。

例如，考虑以下包含标题的 progressbar 元素。

<div role="progressbar"><h3>Title of my progressbar</h3></div>

因为 progressbar 的后代是演示性的，所以以下代码等效

<div role="progressbar">
  <h3 role="presentation">Title of my progressbar</h3>
</div>

从辅助技术用户的角度来看，标题不存在，因为前面的代码段在 无障碍树 中等效于以下内容

<div role="progressbar">Title of my progressbar</div>

aria-valuenow

仅在值不是不确定时存在且必需。设置为介于 0 或（如果存在）aria-valuemin 和 aria-valuemax 之间的十进制值，指示进度条的当前值。

aria-valuetext

辅助技术通常将 aria-valuenow 的值显示为百分比。如果这是不准确的，请使用此属性使进度条值易于理解。

aria-valuemin

设置为表示最小值的十进制值，且小于 aria-valuemax。如果不存在，则默认值为 0。

aria-valuemax

设置为表示最大值的十进制值，且大于 aria-valuemin。如果不存在，则默认值为 100。

aria-label 或 aria-labelledby

定义字符串值或标识为进度条元素设置标签的元素（或元素），提供可访问名称。需要可访问名称。

建议使用本机 <progress> 或 <input type="range"> 元素，而不是 progressbar 角色。用户代理根据 value 与 0、最小值和 max 值的关系，为 <progress> 元素提供样式化窗口部件。当使用非语义元素时，需要使用 ARIA 属性、JavaScript 和 CSS 重新创建本机语义元素的所有功能。

在下面的示例中，进度条使用 aria-valuemin 和 aria-valuemax 的默认值 0 和 100。

<div>
  <span id="loadinglabel">Loading:</span>
  <span role="progressbar" aria-labelledby="loadinglabel" aria-valuenow="23">
    <svg width="100" height="10">
      <rect height="10" width="100" stroke="black" fill="black" />
      <rect height="10" width="23" fill="white" />
    </svg>
  </span>
</div>

使用语义 HTML，可以这样编写

<label for="loadinglabel">Loading:</label>
<progress id="loadinglabel" max="100" value="23"></progress>

如果进度条描述页面特定区域的加载进度，请包含 aria-describedby 属性以引用进度条的状态，并在该区域完成加载之前将 aria-busy 属性设置为 true。

建议使用本机 <progress> 或 <input type="range"> 元素，而不是 progressbar 角色。

• HTML <progress> 元素
• 其他范围窗口部件包括
  • 计量器
  • 滚动条
  • separator（如果可聚焦）
  • 滑块

  • 旋转按钮