ARIA：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>

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

ARIA 使用的第一條規則是“如果你可以使用具有所需語義和行為的原生功能，而不是重新利用元素並新增 ARIA 角色、狀態或屬性使其可訪問，那麼就這樣做。”與其建立一個需要 tabindex、ARIA 和 JavaScript 來將文字轉換為可選擇選項的無序列表，我們可以使用原生多選：<select> 元素具有一個布林 multiple 屬性。如果包含該屬性，使用者可以選擇多個選項。如果不包含，則只能選擇單個選項。

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>

與其使用 aria-selected="true"，不如包含 checked 屬性。瀏覽器會完成其餘的工作。