ARIA：分隔符角色

分隔符是用於分隔和區分內容部分或選單項組的分割線。分隔符有兩種型別：提供可見邊界的靜態結構，與 HTML <hr> 元素相同，以及可聚焦的可移動小部件。

具有 separator 角色的元素具有 aria-orientation 的隱式值為 horizontal。

不可聚焦的分隔符是靜態結構元素，可用於幫助在選單中的兩個選單項組之間進行視覺分隔，或在頁面的兩個部分之間提供水平線。當使用不依賴於焦點的閱讀游標時，不可聚焦的主題斷點仍然可以被螢幕閱讀器使用者感知。

<h2>My first blog post</h2>
…
<img src="blueline.gif" role="separator" alt="" />
<h2>Two years later, my second post</h2>
…

在示例中，影像在兩個部落格文章之間建立了一個視覺分隔符。作者可以使用語義主題斷點 <hr> 元素並使用 CSS 為其設定藍色樣式（並且在更改部落格主題時不必更改影像），或者作者可以使用語義 <article> 元素包含每個帖子，或者兩者兼而有之。

<section role="feed">
  <article>
    <h2>My first blog post</h2>
    …
  </article>
  <hr />
  <article>
    <h2>Two years later, my second post</h2>
    …
  </article>
</section>

[role="feed"] > hr {
  height: 3px;
  background-color: blue;
}

不需要可訪問名稱。

分隔符角色可用於將元素識別為選單中專案組之間的視覺分隔符，例如 menuitemradio 或 menuitemcheckbox 元素組。

如果分隔符可聚焦，則在內容的兩個部分之間提供可見邊界，並允許使用者透過更改其位置來更改其分隔的兩個部分的相對大小，則必須將 aria-valuenow 的值設定為反映分隔符當前位置的數字，並且在值發生更改時必須更新該值。如果 aria-valuemin 和 aria-valuemax 未分別設定為預設值 0 和 100，則也應包含它們。

如果存在多個可聚焦的分隔符，則應使用 aria-label 包含可訪問名稱。

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

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

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

由於 separator 的後代是演示性的，因此以下程式碼等效

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

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

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

aria-orientation（分隔符的預設值為水平）

預設情況下，separator 角色的分割線假定為水平。該值可以包含並設定為水平、未定義（除非另有指定，否則其他角色的預設值）或垂直。

aria-valuenow

如果分隔符可聚焦且具有已知值，則 aria-valuenow 定義當前值。如果不可聚焦或值未知，則不要包含此屬性。

aria-valuemin（預設值為 0）

如果分隔符可聚焦且最小值不是 0，則使用 aria-valuemin 包含最小值。如果

aria-valuemax（預設值為 100）

如果分隔符可聚焦且最大值不是 100，則使用 aria-valuemax 包含一個等於或大於 aria-valuemin 的值。

aria-valuetext

如果分隔符可聚焦且 aria-valuenow 在為使用者提供可用資訊方面不是最佳選擇，則將讀取包含的 aria-valuetext 內容，而不是 aria-valuenow 值。

• 主題斷點 HTML <hr> 元素
• 選單欄中的示例分隔符