aria-multiselectable

Das Standardverhalten von Auswahllisten, wie etwa bei <select>, besteht darin, dass nur ein Element oder eine Option ausgewählt werden kann. Standardmäßig oder nach Konvention wird davon ausgegangen, dass ein Benutzer, dem eine Liste präsentiert wird, aus der er ein Element auswählen muss, nur ein einzelnes Element auswählen kann, es sei denn, er wird anders informiert. Das Attribut aria-multiselectable dient dazu, Benutzer assistiver Technologien darüber zu informieren, dass sie mehr als ein Element aus den aktuell auswählbaren Elementen auswählen können, wenn sie es wünschen. Listen und Bäume sind Beispiele für Rollen, die Benutzern möglicherweise erlauben, mehr als ein Element gleichzeitig auszuwählen.

Wenn der Benutzer ein oder mehrere Elemente auswählt, sollten Sie daran denken, die ausgewählten Nachkommen als ausgewählt zu kennzeichnen, indem Sie aria-selected="true" setzen, und für auswählbare Nachkommen, die nicht ausgewählt sind, aria-selected="false" setzen. Wenn ein Element nicht auswählbar ist, lassen Sie das Attribut aria-selected ganz weg, da seine Anwesenheit den Benutzer informiert, dass das Element auswählbar ist.

Wenn ein Baum, Raster, eine Tab-Liste oder Listenauswahl die Auswahl von mehr als einem Knoten unterstützt, hat das Element mit der Rolle grid, listbox, tablist oder tree aria-multiselectable auf true gesetzt. Andernfalls wird aria-multiselectable entweder auf false gesetzt oder der Standardwert false wird 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 Listenauswahl unterstützt Mehrfachauswahl, daher setzen wir das Element mit der Rolle listbox mit 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 anderweitig nicht auswählbar waren, hätten wir das Attribut aria-selected ganz weggelassen. Die Einbeziehung des Attributs, selbst ohne Wert oder explizit auf false gesetzt, zeigt Benutzern assistiver Technologien an, dass das Element auswählbar ist.

Die erste Regel der ARIA-Nutzung besagt: "Wenn Sie eine native Funktion mit der von Ihnen benötigten Semantik und dem erforderlichen Verhalten verwenden können, anstatt ein Element neu zu verwenden und eine ARIA-Rolle, Zustand oder Eigenschaft hinzuzufügen, um es zugänglich zu machen, dann tun Sie dies." Anstatt eine ungeordnete Liste zu erstellen, die tabindex, ARIA und JavaScript erfordert, um Text in auswählbare Optionen zu verwandeln, hätten wir ein natives Mehrfachauswahl-Element verwenden können: Das <select>-Element verfügt über ein Boolean-Attribut multiple. Wenn enthalten, 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 keine ARIA oder JavaScript, um zu funktionieren.

Wenn das obige nicht nach Ihrem Geschmack stilisiert werden kann, können Sie auch eine Liste von auswählbaren Optionen mit HTML-Checkboxen erstellen, die ebenfalls semantisch, fokussierbar und mit CSS unendlich stilisierbar sind:

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

Anstelle von aria-selected="true" fügen Sie das checked-Attribut hinzu. 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