ARIA: separator 角色

描述

分隔符是用於分隔和區分內容部分或選單項組的分割線。分隔符有兩種型別：一種是提供可見邊界的靜態結構，與 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;
}

不需要可訪問名稱。

可聚焦的分隔符

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

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

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

所有後代都是展示性的

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

例如，考慮以下包含標題的 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>

關聯的 WAI-ARIA 角色、狀態和屬性

aria-orientation（separator 的預設值為 horizontal）

預設情況下，separator 角色的分隔符假定為水平的。可以包含此值並將其設定為 horizontal、undefined（其他角色的預設值，除非另有規定）或 vertical。

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> 元素
• 選單欄中的分隔符示例