aria-multiselectable

Das Standardverhalten von Auswahl-Listen, wie zum Beispiel <select>, ist, dass nur ein Element oder eine Option ausgewählt werden kann. Standardmäßig oder aus Gewohnheit gehen Benutzer, denen eine Liste präsentiert wird, davon aus, dass sie nur ein einzelnes Element auswählen können, es sei denn, sie werden darauf hingewiesen, dass mehrere Auswahlen möglich sind. Das Attribut aria-multiselectable informiert Nutzer von unterstützenden Technologien darüber, dass sie mehr als ein Element aus den derzeit auswählbaren Elementen auswählen können, wenn sie dies wünschen. Listen und Bäume sind Beispiele für Rollen, die es Benutzern ermöglichen könnten, mehr als ein Element gleichzeitig auszuwählen.

Wenn der Benutzer ein oder mehrere Elemente auswählt, denken Sie daran, die ausgewählten Nachkommen mit aria-selected="true" als ausgewählt zu markieren, und nicht ausgewählte aber auswählbare Nachkommen haben aria-selected="false" gesetzt. Wenn ein Element nicht auswählbar ist, lassen Sie das Attribut aria-selected ganz weg, da seine Anwesenheit den Benutzer darüber informiert, dass das Element auswählbar ist.

Wenn ein Baum, ein Raster, eine Tab-Liste oder eine Listenbox die Auswahl von mehr als einem Knoten unterstützt, hat das Element mit der Rolle grid, listbox, tablist oder tree das Attribut aria-multiselectable auf true gesetzt. Andernfalls wird aria-multiselectable entweder auf false gesetzt oder der Standardwert von false ist impliziert.

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

Diese Listenbox unterstützt die Mehrfachauswahl, daher setzen wir das Element mit der Rolle listbox auf aria-multiselectable="true". Alle ausgewählten Optionen haben aria-selected auf true gesetzt. Alle Optionen, die nicht ausgewählt, aber auswählbar sind, haben aria-selected auf false gesetzt. Hätten wir Optionen eingeschlossen, die deaktiviert oder auf andere Weise nicht auswählbar sind, hätten wir das Attribut aria-selected ganz weggelassen. Das Attribut einzuschließen, selbst ohne Wert oder explizit auf false gesetzt, zeigt Nutzern unterstützender Technologien an, dass das Element auswählbar ist.

Die erste Regel der ARIA-Nutzung lautet: "Wenn Sie eine native Funktion mit der erforderlichen Semantik und dem Verhalten, die bereits integriert sind, verwenden können, anstatt ein Element neu zu verwenden und eine ARIA-Rolle, einen Zustand oder eine Eigenschaft hinzuzufügen, um es zugänglich zu machen, tun Sie dies." Anstatt eine ungeordnete Liste zu erstellen, die tabindex, ARIA und JavaScript erfordert, um Text in auswählbare Optionen zu verwandeln, könnten wir ein natives Multiselect verwenden: das <select>-Element hat ein Boolean-Attribut multiple. Wenn es enthalten ist, kann der Benutzer mehrere Optionen auswählen. Wenn nicht, kann nur eine einzelne Option ausgewählt werden.

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

Diese HTML-<select>-Version ist zugänglich und interaktiv und benötigt kein ARIA oder JavaScript, um zu funktionieren.

Wenn das obige nicht nach Ihren Wünschen gestaltbar ist, können Sie auch eine Liste auswählbarer Optionen mit HTML-Checkboxen erstellen, die ebenfalls semantisch, fokussierbar und mit CSS unendlich gestaltbar ist:

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

Anstatt aria-selected="true", schließen Sie das checked-Attribut ein. Der Browser erledigt den Rest.

true

Mehr als ein Element im Widget kann gleichzeitig ausgewählt werden.

false

Es kann nur ein Element ausgewählt werden.

Element.ariaMultiSelectable

Die ariaMultiSelectable-Eigenschaft, Teil der Element-Schnittstelle, spiegelt den Wert des aria-multiselectable-Attributs wider.

ElementInternals.ariaMultiSelectable

Die ariaMultiSelectable-Eigenschaft, Teil der ElementInternals-Schnittstelle, spiegelt den Wert des aria-multiselectable-Attributs wider.

Verwendet in Rollen:

• grid
• listbox
• tablist
• tree

Vererbt in Rollen:

• treegrid

• HTML <select>-Element
• HTML <option>-Element
• HTML <input>-Element
• multiple-Attribut
• aria-selected