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 属性。浏览器会完成其余的工作。