aria-multiselectable

aria-multiselectable 屬性指示使用者可以從當前可選擇的後代中選擇多個專案。

描述

選擇列表（例如 <select>）的預設行為是隻能選擇一個專案或選項。預設情況下或按照慣例，當用戶被呈現一個必須從中選擇專案的列表時，他們假設他們只能選擇一個專案，除非另行通知。aria-multiselectable 屬性是告知輔助技術使用者，如果他們選擇，他們可以從當前可選擇的專案中選擇多個專案的方法。列表和樹是可能允許使用者一次選擇多個專案的示例角色。

注意：允許進行多項選擇時，請告知使用者允許多個值，並提供有關如何提供多個值的說明，例如“要選擇多個值，請在選擇時按住 Control 鍵”。

與 `aria-selected` 一起使用

當用戶選擇一個或多個專案時，請記住使用 aria-selected="true" 將選定的後代設定為已選中，並將未選中的可選擇的後代設定為 aria-selected="false"。如果元素不可選擇，則完全省略 aria-selected 屬性，因為它的存在會告知使用者該專案是可選擇的。

如果樹、網格、選項卡列表或列表框支援選擇多個節點，則具有角色 grid、listbox、tablist 或 tree 的元素將 aria-multiselectable 設定為 true。否則，aria-multiselectable 則設定為 false 或隱式使用預設值 false。

示例

html

<p id="colorOptions">Choose the colors for your flag.</p>
<ul
  tabindex="0"
  role="listbox"
  aria-labelledby="colorOptions"
  aria-multiselectable="true">
  <li id="red" role="option" aria-selected="false">Red</li>
  <li id="orange" role="option" aria-selected="false">Orange</li>
  <li id="yellow" role="option" aria-selected="false">Yellow</li>
  <li id="green" role="option" aria-selected="false">Green</li>
  <li id="blue" role="option" aria-selected="false">Blue</li>
  <li id="purple" role="option" aria-selected="false">Purple</li>
  <li id="magenta" role="option" aria-selected="false">Hot pink</li>
  <li id="lightpink" role="option" aria-selected="true">Light pink</li>
  <li id="white" role="option" aria-selected="true">White</li>
  <li id="lightblue" role="option" aria-selected="true">Light blue</li>
  <li id="black" role="option" aria-selected="false">Black</li>
  <li id="brown" role="option" aria-selected="false">Brown</li>
</ul>

此列表框支援多項選擇，因此我們使用 aria-multiselectable="true" 設定具有角色 listbox 的元素。所有選中的選項都將 aria-selected 設定為 true。所有未選中但可選擇的選項都將 aria-selected 設定為 false。如果我們包含了被停用的或以其他方式不可選擇的選項，我們就會完全省略 aria-selected 屬性。即使沒有值或明確設定為 false，包含該屬性也會告知輔助技術使用者該專案是可選擇的。

ARIA 使用的第一條規則是“如果可以使用具有所需語義和行為的內建本機功能，而不是重新利用元素並新增 ARIA 角色、狀態或屬性使其可訪問，則應使用本機功能。”我們本可以使用一個本機多選框（<select> 元素具有一個布林型 multiple 屬性），而不是建立一個需要 tabindex、ARIA 和 JavaScript 的無序列表來將文字轉換為可選擇的選項。如果包含該屬性，使用者可以選擇多個選項。如果沒有，則只能選擇一個選項。

html

<label for="flagcolors"> Choose the colors for your flag. </label>
<select multiple id="flagcolors">
  <option value="red">Red</option>
  <option value="orange">Orange</option>
  <option value="yellow">Yellow</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
  <option value="purple">Purple</option>
  <option value="magenta">Hot pink</option>
  <option value="lightpink" selected>Light pink</option>
  <option value="white" selected>White</option>
  <option value="lightblue" selected>Light blue</option>
  <option value="black">Black</option>
  <option value="brown">Brown</option>
</select>

此 HTML <select> 版本是可訪問且互動式的，不需要 ARIA 或 JavaScript 即可執行。

如果上述樣式無法滿足您的需求，您還可以使用 HTML 複選框建立一個可選擇選項列表，它也是語義化的、可聚焦的，並且可以使用 CSS 無限地設定樣式。

html

<fieldset>
  <legend>Choose the colors for your flag.</legend>
  <ul>
    <li>
      <label><input type="checkbox" name="fc" value="red" />Red</label>
    </li>
    <li>
      <label><input type="checkbox" name="fc" value="orange" />Orange</label>
    </li>
    <li>
      <label><input type="checkbox" name="fc" value="yellow" />Yellow</label>
    </li>
    <li>
      <label><input type="checkbox" name="fc" value="green" />Green</label>
    </li>
    <li>
      <label><input type="checkbox" name="fc" value="blue" />Blue</label>
    </li>
    <li>
      <label><input type="checkbox" name="fc" value="purple" />Purple</label>
    </li>
    <li>
      <label><input type="checkbox" name="fc" value="magenta" />Hot pink</label>
    </li>
    <li>
      <label
        ><input type="checkbox" name="fc" value="lightpink" checked />Light
        pink</label
      >
    </li>
    <li>
      <label
        ><input type="checkbox" name="fc" value="white" checked />White</label
      >
    </li>
    <li>
      <label
        ><input type="checkbox" name="fc" value="lightblue" checked />Light
        blue</label
      >
    </li>
    <li>
      <label><input type="checkbox" name="fc" value="black" />Black</label>
    </li>
    <li>
      <label><input type="checkbox" name="fc" value="brown" />Brown</label>
    </li>
  </ul>
</fieldset>