ARIA：menuitemradio 角色

描述

選單和選單欄中的項是選單項。選單項有三種類型：menuitem、menuitemcheckbox 和 menuitemradio。要在組內將勾選的選單項數量限制為一個，請在組內的所有元素上使用 menuitemradio 角色。

menuitemradio 是同一角色的一組元素中的一個可勾選的選單項，其中一次只能勾選其中一個。

三種菜單項元素只能包含在具有 menu 或 menubar 角色的元素內，或由其擁有，也可以選擇巢狀在具有 group 角色的分組元素內。巢狀或被其他方式擁有（參見 aria-owns）在 menu 或 menubar 中，會將選單項識別為相關的元件。

當子選單中的所有項都屬於同一個單選按鈕組時，group 由選單元素定義；不需要 group 元素。

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

與 radio 型別 <input> 的 checked 屬性類似，menuitemradio 的 aria-checked 屬性指示選單項是否被勾選（true）、未勾選（false）。與 menuitemcheckbox 不同，它沒有 mixed 值。

同一組中的 menuitemradio 一次只能勾選一個。當組中的一個項被勾選時，aria-checked 屬性設定為 true，而同一組中之前被勾選的 menuitemradio 元素（如果存在）則變為未勾選，透過將 aria-checked 屬性值切換為 false 實現。

如果希望組中可以勾選多個項，或者希望啟用勾選和取消勾選一項，請考慮使用 menuitemcheckbox。

如果 menu 或 menubar 包含多個 menuitemradio 元素組，或者 menu 包含一個 menuitemradio 元素組以及其他不相關的 menuitem 元素和/或 menuitemcheckbox 元素，請將每個相關的 menuitemradio 元素集包含在 group 元素中，或使用 separator 元素將 menuitemradio 元素組與其他選單項分隔開（或者使用具有等效角色的 HTML 元素，例如 <fieldset> 分組或主題分隔符 <hr>）。

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

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

menuitemradio 元素可以包含短語內容，但不能包含互動式內容作為後代，也不能包含具有 tabindex 屬性的後代。

所有後代都是展示性的

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

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

<div role="menuitemradio"><h6>Name of my radio button</h6></div>

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

<div role="menuitemradio">
  <h6 role="presentation">Name of my radio button</h6>
</div>

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

<div role="menuitemradio">Name of my radio button</div>

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

menu 角色

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

menubar 角色

類似於 menu，提供一組一致的常用命令，這些命令保持可見，通常呈水平排列。

group 角色

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

aria-checked (必需)

設定為 true 或 false，表示 menuitemradio 當前的“勾選”狀態。

鍵盤互動

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

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

Enter

如果未勾選，則勾選當前獲得焦點的 menuitemradio，並取消勾選同一組中任何其他已勾選的 menuitemradio 元素。同時關閉選單。

空格

如果未勾選，則勾選當前獲得焦點的 menuitemradio，並取消勾選同一組中任何其他已勾選的 menuitemradio 元素，而不關閉選單。

Escape

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

右箭頭

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

左箭頭

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

向下箭頭

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

向上箭頭

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

Home

將焦點移至選單中的第一項。

End

將焦點移至選單中的最後一項。

字元

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

必需的 JavaScript

所需的事件處理程式

onclick

處理單選按鈕和關聯標籤的滑鼠點選事件，這些事件將透過更改 aria-checked 屬性的值來更改單選按鈕的狀態，並改變單選按鈕的外觀，使其對視障使用者顯示為已勾選或未勾選。

onKeyDown

處理使用者按下 Space 鍵更改單選按鈕狀態的情況，透過更改 aria-checked 屬性的值來更改單選按鈕的狀態，並改變單選按鈕的外觀，使其對視障使用者顯示為已勾選或未勾選。還處理上面鍵盤導航部分列出的所有鍵。

示例

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

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

選定狀態的視覺外觀是已勾選的單選按鈕，我們可以使用 生成內容 來建立，使其可見並與內容顏色相同，透過 CSS 屬性選擇器 同步 aria-checked 值，並更改 background-color。

[role="menuitemradio"]::before {
  display: inline-block;
  content: "";
  width: 1em;
  height: 1em;
  padding: 0.1em;
  border: 2px solid #333333;
  border-radius: 50%;
  box-sizing: border-box;
  background-clip: content-box;
  margin-inline-end: 2px;
}
[role="menuitemradio"][aria-checked="true"]::before {
  background-color: purple;
}

不要使用 background 簡寫屬性，因為它會覆蓋我們用於建立單選按鈕效果的 background-clip 屬性。

優先使用 HTML

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

規範

另見

• radio 角色
• <input type="radio">