ARIA：menuitemcheckbox 角色

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

這三種元素只能包含在角色為 menu 或 menubar 的元素中，或者由這些元素擁有，可以選擇巢狀在角色為 group 的分組元素中。被巢狀在 menu 或 menubar 中，或者被它們擁有（參見 aria-owns）會識別這些選單項為相關的視窗小部件。

選單項，包括 menuitemcheckbox 元素，可以分組在 group 元素中，或者透過角色為 separator 的元素或其他等效的原生角色（如 <fieldset> 和 <hr>）分隔。

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

類似於 <input> 型別為 checkbox 的元素的 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 元素的所有子代元素，因為它是一個不支援語義子代的角色。

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

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

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

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

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

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

menu 角色

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

menubar 角色

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

group 角色

包含一組 menuitem 元素的容器，包括 menu 或 menubar 中的 menuitemcheckbox 元素。

aria-checked（必需）

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

當選單開啟，或選單欄獲得焦點時，鍵盤焦點將放置在第一個專案上。兩者中的所有專案都可獲得焦點，包括所有menuitemcheckbox元素。

如果menuitemcheckbox位於選單欄的子選單中，或位於使用選單按鈕開啟的選單中，則必須對以下鍵盤互動進行程式設計。

Enter

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

Space

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

Escape

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

右箭頭

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

左箭頭

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

下箭頭

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

上箭頭

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

Home

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

End

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

字元

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

必需的事件處理程式

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是可選中但當前未選中。可訪問的名稱“紫色”來自內容。

選中狀態的視覺外觀是一個選中的複選框，我們可以使用生成的內容來建立它，使其可見並與內容具有相同的顏色，透過使用 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";
}

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

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