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>