ARIA：捲軸角色

scrollbar 是一個範圍，用於控制視窗內容的哪一部分當前在視窗框架中可見；無論視窗是全瀏覽器大小、iframe 還是任何元素的 塊級格式化上下文。

許多應用程式在內容區域大於應用程式視窗時提供原生捲軸。捲軸通常出現在檢視區域的右側或底部。原生捲軸顯示為薄的矩形軌道區域，與它控制的視窗的長度相同，有一個名為“滑塊”或“滾動器”的 UI 部分，可以沿軌道拖動以移動視窗中關聯的內容。某些捲軸在軌道的兩端都有箭頭，當啟用時，這些箭頭允許視窗滾動一小段距離。

以本文件為例：如果視窗是全瀏覽器視窗，而內容的高度超過了視窗的高度，那麼在大多數瀏覽器中，視窗右側邊緣的捲軸代表頁面的總長度，滾動滑塊代表當前位於視窗中的頁面內容部分。

捲軸也可能出現在全瀏覽器視窗的子部分視窗上。繼續以本文件為例，如果該內容嵌入在 <iframe> 或 <object> 中，則原生垂直捲軸將與框架的高度相同。捲軸的長度通常與視窗的長度相同，但並非必須如此。

如果你當前沒有看到捲軸，可能是因為你的瀏覽器只在滾動時或元素的內容太大而無法在其塊級格式化上下文中完全顯示時才會顯示捲軸。根據瀏覽器和作業系統的不同，即使內容在視窗中完全顯示，且無需或不能滾動，也可以使捲軸始終可見。

始終最好使用原生捲軸。你可以使用 CSS overflow 屬性來確保原生捲軸的顯示。一個 CSS 捲軸規範 正在開發中。一些瀏覽器允許 透過帶字首的偽元素樣式化捲軸。

由於原生捲軸樣式化在歷史上一直受到限制，你可能會遇到用 JavaScript 實現的捲軸，你需要支援它並使其完全可訪問。為此，你可以使用 scrollbar 角色來告知輔助技術一個 UI 控制元件是一個互動式捲軸。

具有 scrollbar 角色的元素是一個圖形物件，用於控制檢視區域內內容的滾動；它是 ARIA 角色，指示一個元素是一個捲軸。與之最相似的 HTML 元素是 range <input> 型別，<input type="range">。

scrollbar 元素有兩個必需的屬性：aria-controls 和 aria-valuenow。aria-controls 屬性引用它控制的可滾動區域的 id。aria-valuenow 屬性定義捲軸的當前值。

雖然 aria-valuenow 始終是必需的，但 aria-valuemin 和 aria-valuemax 屬性僅在 scrollbar 的最小值不為 0 或最大值不為 100 時需要為捲軸角色設定。aria-valuenow 的值必須始終介於最小值和最大值之間（包括最小值和最大值），或者在最小值和最大值分別預設值為 0 和 100 時，介於 0 和 100 之間（包括 0 和 100）。aria-valuenow 表示視窗距離文件底部有多遠。把它想象成進度條，文件的開頭是最小值，文件的結尾是最大值。

scrollbar 透過捲軸的大小和滑塊相對於其控制的方向（水平或垂直）的可見範圍的位置來表示當前值和可能值的範圍。 換句話說，scrollbar 的長度（高度或寬度）代表視窗內所有內容。 aria-valuemin 值代表內容和捲軸的開始位置，aria-valuemax 值代表內容和捲軸的結束位置。 aria-valuenow 代表當前在視窗中可見的內容以及可移動滑塊的當前位置或值。 aria-valuenow 值通常會由輔助技術作為 aria-valuemin 和 aria-valuemax 之間的百分比來呈現。

與本機捲軸類似，使用者可以使用滑鼠、觸控板、鍵盤和語音輸入直接或間接與 scrollbar 元素互動。 scrollbar 角色實現也必須適應所有這些互動方法。

使用滑鼠時，使用者必須能夠透過單擊捲軸兩端（如果有）的滾動箭頭、單擊滾動軌道上的空部分以及單擊並拖動滾動滑塊來啟用 scrollbar。

也必須支援鍵盤滾動。 當焦點位於由 scrollbar 控制的視窗內時，上箭頭 和 下箭頭（或水平捲軸的 左箭頭 和 右箭頭）應該按比例移動捲軸滑塊。 此外，Page Up、Page Down、Space 和 Shift + Space 鍵必須將內容和滾動滑塊移動一個視窗的高度（或寬度），直到內容的底部或頂部（或左側或右側）處於可見狀態。

必須使用 JavaScript 將 scrollbar 操作轉換為滾動命令，並透過以下方式向用戶提供反饋：

1. 直觀地更新 scrollbar 元素，
2. 滾動視窗的內容，以及
3. 更新 aria-valuenow 屬性值。

scrollbar 角色的預設方向為垂直方向。 在這種情況下，包含 aria-orientation="vertical" 是可選的。 方向表示捲軸的方向以及捲軸控制的檢視區域的滾動效果。 如果滾動方向是從左到右或從右到左，而不是從上到下，則在具有 scrollbar 角色的元素上包含 aria-orientation="horizontal"。

有些型別的使用者介面元件在平臺可訪問性 API 中表示時，只能包含文字。 可訪問性 API 沒有辦法表示 scrollbar 中包含的語義元素。 為了解決此限制，瀏覽器會自動將角色 presentation 應用於任何 scrollbar 元素的所有後代元素，因為它是一個不支援語義子元素的角色。

例如，考慮以下包含標題的 scrollbar 元素。

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

由於 scrollbar 的後代是表現性的，因此以下程式碼是等效的

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

從輔助技術使用者的角度來看，標題不存在，因為前面的程式碼片段在 可訪問性樹 中等效於以下內容

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

aria-controls （必需）

透過 id 標識由捲軸控制的內容的視窗。

aria-valuenow （必需）

設定為 0 或（如果存在）aria-valuemin 和 aria-valuemax 之間的十進位制值，表示捲軸的當前值。

aria-valuetext

輔助技術通常會將 aria-valuenow 的值呈現為百分比。 如果這沒有幫助，請使用此屬性使捲軸值對使用者更易於理解。

aria-valuemin

設定為表示最小值的十進位制值，小於 aria-valuemax。 如果不存在，則預設值為 0。

aria-valuemax

設定為表示最大值的十進位制值，大於 aria-valuemin。 如果不存在，則預設值為 100。

aria-labelledby

當不使用本機表單控制元件，因此無法將捲軸與 <label> 關聯時，如果存在可提供所需可訪問名稱的可見文字，則設定為包含用作標籤的文字的元素的 id。 否則，請使用 aria-label。

aria-label

如果無法使用 <label>，並且不存在可以由 aria-labelledby 引用可見文字，則提供為 scrollbar 元素提供所需可訪問名稱的字串值。

aria-orientation

預設情況下，方向為 vertical。 該屬性可以包含並設定為 horizontal、undefined（所有角色的預設值，除非另有說明）或 vertical。

上箭頭

視窗中的內容向上移動一行，滑塊按比例向上移動捲軸滑塊，直到內容和捲軸的頂部到達為止。

下箭頭

視窗中的內容向下移動一行，滑塊按比例向下移動捲軸滑塊，直到內容和捲軸的底部到達為止。

左箭頭

水平滾動時，視窗中的內容向左移動一個字元的寬度，滑塊按比例向左移動捲軸滑塊，直到內容的左邊緣與視窗的左端對齊，滑塊與捲軸的左端對齊。

右箭頭

水平滾動時，視窗中的內容向右移動一個字元的寬度，滑塊按比例向右移動捲軸滑塊，直到內容的右邊緣與視窗的右端對齊，滑塊與捲軸的右端對齊。

Page Up 和 Shift + Space

視窗中的內容向上移動一個視窗的高度，滑塊按比例向上移動捲軸滑塊，直到內容和捲軸的頂部到達為止。

Page Down 和 Space

視窗中的內容向下移動一個視窗的高度，滑塊按比例向下移動捲軸滑塊，直到內容的底部和捲軸的底部到達為止。內容的底部或頂部處於可見狀態。

以下是一個單詞可能太長而無法放入父容器中的示例。

<span id="pi-label">Pi</div>
<div id="pi">
3.1415926535897932384626433832795028841971693993751058209749445923078164062862089986280348253421170679
</div>
<div
  role="scrollbar"
  aria-labelledby="pi-label"
  aria-controls="pi"
  aria-orientation="horizontal"
  aria-valuenow="0"
  aria-valuemin="0"
  aria-valuemax="100">
  <div id="thumb"></div>
</div>

當使用 ARIA 角色而不是本機 UI 功能時，必須使用 CSS 來設定捲軸和滑塊的樣式，並且必須使用 JavaScript 來處理所有鍵盤和指標事件。

可以使用 CSS 來確保 PI 的溢位值具有本機捲軸

<h3 id="PI">Pi</h3>
<p class="pi" tabindex="0" aria-labelledby="PI">
  3.1415926535897932384626433832795028841971693993751058209749445923078164062862089986280348253421170679
</p>

.pi {
  overflow: auto;
  max-width: 100%;
}

上面的 CSS 意味著當用戶與段落的視窗互動時，如果段落中最長單詞的長度大於包含段落的框，則將出現本機捲軸。 添加了 tabindex 屬性以允許使用鍵盤的人員導航到溢位內容並滾動其周圍。

• <input type="range">,
• HTML <progress> 元素
• HTML <meter> 元素
• 其他範圍小部件包括
  • meter
  • slider
  • separator （如果可獲得焦點）
  • progressbar
  • spinbutton
• 文件 scroll 事件