ARIA：menuitemradio 角色

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

menuitemradio 是一個可選中選單項，它是一組具有相同角色的元素的一部分，其中一次只能選中一個元素。

三個選單項元素只能包含在具有 menu 或 menubar 角色的元素中，或者由其擁有，可選地巢狀在具有 group 角色的組元素中。巢狀或以其他方式擁有（見 aria-owns）在 menu 或 menubar 中，將選單項標識為相關的視窗小部件。

當子選單中的所有專案都是同一個單選組的成員時，group 由選單元素定義；group 元素不是必需的。

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

類似於 <input> 的 checked 屬性，型別為 radio，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 元素（或具有等效角色的 HTML 元素，例如 <fieldset> 分組或主題斷裂 <hr> 分隔符）將 menuitemradio 元素與其他選單項分隔開。

需要一個可訪問名稱。理想情況下，可訪問名稱應來自關聯的 <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></li>

由於 menuitemradio 的子元素是表示性的，因此以下程式碼是等效的

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

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

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

menu 角色

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

menubar 角色

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

group 角色

用於包含一組menuitem元素的容器，包括menu或menubar內的menuitemradio元素。

aria-checked (必需)

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

當menu開啟或menubar獲得焦點時，鍵盤焦點將放在第一個專案上。這兩個中的所有專案都可獲得焦點，包括所有menuitemradio元素。

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

Enter

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

Space

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

Escape

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

Right Arrow

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

Left Arrow

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

Down Arrow

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

Up Arrow

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

Home

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

End

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

Character

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

必需的事件處理程式

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”來自內容。

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

[role="menuitemradio"]::before {
  display: inline-block;
  content: "";
  width: 1em;
  height: 1em;
  padding: 0.1em;
  border: 2px solid #333;
  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 屬性。

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

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