ARIA: menuitemcheckbox 角色

描述

選單和選單欄中的專案是選單項。選單項有三種類型：menuitem、menuitemradio 和 menuitemcheckbox。

這三個元素只能包含在具有 menu 或 menubar 角色的元素中，或者由它們擁有，還可以選擇性地巢狀在具有 group 角色的分組元素中。巢狀在 menu 或 menubar 中，或由其擁有（參見 aria-owns）會將選單項標識為相關控制元件。

選單項，包括 menuitemcheckbox 元素，可以包含在 group 元素中，或用具有 separator 角色的元素分隔，或者其他等效的本地角色，例如 <fieldset> 和 <hr>。

包含 menuitemcheckbox 角色的選單項必須包含 aria-checked 屬性，以向輔助技術公開復選框的狀態，除非使用 <input type="checkbox">，在這種情況下應使用 checked 屬性。

與 checkbox 型別 <input> 的 checked 屬性類似，menuitemcheckbox 的 aria-checked 屬性指示選單項是否已勾選（true）、未勾選（false）或表示一組其他選單項的子選單，其中包含混合的勾選和未勾選值（mixed）。mixed 值類似於複選框的 indeterminate 屬性，它提供了第三種狀態，既不勾選也不取消勾選。

需要一個可訪問名稱。理想情況下，可訪問名稱應來自關聯的 <label> 元素（如果使用 <input type="checkbox">）或可見的後代內容。如果標籤或後代內容不足，並且最好使用引用非後代內容的 aria-labelledby，或者使用 aria-label，則這兩個 ARIA 屬性將隱藏其他後代內容，使其對輔助技術不可見。

如果集合中的所有元素都不存在於 DOM 中，請包含 aria-setsize 和 aria-posinset 屬性。在 menuitemcheckbox 上指定 aria-setsize 和 aria-posinset 時，應相對於選單中專案的總數（不包括任何分隔符）來設定值。

menuitemcheckbox 元素可以包含短語內容，但不能包含互動式內容作為後代，也不能包含指定了 tabindex 屬性的後代。

所有後代都是展示性的

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

例如，考慮以下 menuitemcheckbox 元素，它包含一個標題。

<div role="menuitemcheckbox"><h6>Name of my checkbox</h6></div>

由於 menuitemcheckbox 的後代是表示性的，因此以下程式碼是等效的：

<div role="menuitemcheckbox">
  <h6 role="presentation">Name of my checkbox</h6>
</div>

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

<div role="menuitemcheckbox">Name of my checkbox</div>

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

menu 角色

提供使用者可以呼叫的常見操作或功能的列表的控制元件。

menubar 角色

類似於 menu，用於一組常用的命令，這些命令保持可見並通常水平呈現。

group 角色

menu 或 menubar 中 menuitemcheckbox 元素組的容器。

aria-checked（必需）

設定為 true、false 或 mixed，它指示 menuitemcheckbox 的當前“已勾選”狀態。

鍵盤互動

當 menu 開啟或 menubar 獲得焦點時，鍵盤焦點會放在第一個專案上。選單和選單欄中的所有專案都是可聚焦的，包括所有 menuitemcheckbox 元素。

如果 menuitemcheckbox 位於 menubar 的子選單中，或者由選單按鈕開啟的選單中，則必須透過程式設計實現以下鍵盤互動。

Enter

切換 menuitemcheckbox 的 aria-checked 狀態並關閉選單。

空格

切換 menuitemcheckbox 的 aria-checked 狀態。不關閉選單。

Escape

關閉選單。在選單欄中，將焦點移至父選單項。

右箭頭

關閉子選單。在選單欄中，將焦點移至選單欄中的下一個專案，如果有子選單則開啟它。

左箭頭

關閉選單。在選單欄中，將焦點移至選單欄中的上一個專案，如果有子選單則開啟它。

向下箭頭

將焦點移至選單中的下一個專案。如果焦點在最後一個專案上，則將焦點移至第一個專案。

向上箭頭

將焦點移至選單中的上一個專案。如果焦點在第一個專案上，則將焦點移至最後一個專案。

Home

將焦點移至選單中的第一個專案。

End

將焦點移至選單中的最後一個專案。

字元

將焦點移至名稱以鍵入字元開頭的下一個專案。如果沒有任何專案的名稱以鍵入字元開頭，則焦點不移動。

必需的 JavaScript

所需的事件處理程式

onclick

處理使用者滑鼠點選複選框和關聯標籤，這將透過更改 aria-checked 屬性的值來更改複選框的狀態，並使複選框在視覺上顯示為已勾選或未勾選給視障使用者。

onKeyDown

處理使用者按下 Space 鍵來更改複選框狀態的情況，透過更改 aria-checked 屬性的值來更改複選框的狀態，並使複選框在視覺上顯示為已勾選或未勾選給視障使用者。還處理了鍵盤導航部分中列出的所有按鍵。

示例

<li role="menuitemcheckbox" tabindex="-1" aria-checked="false">Purple</li>

tabindex="-1" 使 menuitemcheckbox 可聚焦，但不在頁面製表符序列中。如果我們包含 aria-checked="true"，它將表示 menuitemcheckbox 已勾選，並且我們將使用屬性選擇器 [role='menuitemcheckbox'][aria-checked='true'] 在視覺上將選定狀態樣式化為已勾選。相反，aria-checked="false" 的存在會向輔助技術表明 menuitemcheckbox 是可勾選的，但當前未勾選。可訪問名稱“purple”來自內容。

選中狀態的視覺外觀是一個已勾選的複選框，我們可以使用 生成的內容 來建立它，使其可見並與內容顏色相同，方法是使用 CSS 屬性選擇器 和 繼承 顏色來同步 aria-checked 值。

[role="menuitemcheckbox"]::before {
  display: inline-block;
  content: "";
  color: transparent;
  width: 1em;
  text-align: center;
  outline: 1px solid;
  margin-inline-end: 2px;
  font-family: sans-serif;
}
[role="menuitemcheckbox"][aria-checked="true"]::before {
  color: inherit;
  content: "X";
}

優先使用 HTML

ARIA 的第一條規則是：如果原生 HTML 元素或屬性具有您需要的語義和行為，請使用它，而不是重新用途一個元素並新增 ARIA 角色、狀態或屬性使其可訪問。因此，建議使用原生的 HTML 複選框 表單控制元件，而不是使用 JavaScript 和 ARIA 來重新建立複選框的功能。

規範

另見

• menuitemradio 角色
• checkbox 角色
• <input type="checkbox">