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（如果可聚焦）
  • 滑塊

  • 旋轉按鈕