Ein Formular ist schnell gebaut. Ein paar Felder, ein Absenden-Button – fertig. Doch was, wenn es komplizierter wird? Der Nutzer aus mehreren Optionen eine Auswahl treffen muss? Auch mehrere Optionen wählen darf?
Typische Situationen gibt es viele: Die Auswahl von Interessen, Benachrichtigungsarten oder verfügbare Termine. Es geht also nicht um eine Entscheidung, sondern um mehrere gleichzeitig.
Auf den ersten Blick wirkt das unspektakulär. Technisch stehen dafür sogar fertige HTML-Elemente bereit. Damit scheint die Sache erledigt. Schaut man aber genauer hin, zeigt sich: Mehrfachauswahl ist keine reine Formsache. Die Art der Umsetzung beeinflusst, wie verständlich die Auswahl ist, wie sicher sie bedient werden kann und wie gut sie für unterschiedliche Nutzungssituationen funktioniert.
Bevor wir uns einzelne Lösungen ansehen, lohnt es sich daher, zunächst zu klären, was eine Mehrfachauswahl eigentlich leisten muss.
Was eine Mehrfachauswahl leisten muss
Mehrfachauswahl klingt erstmal nach einer Kleinigkeit. Mehrere Häkchen setzen, fertig. In der Praxis steckt aber mehr dahinter, denn es geht nicht nur darum, dass technisch mehrere Werte abgeschickt werden. Es geht darum, ob die Auswahl verständlich bleibt, ob man den Überblick behält und ob die Bedienung sich selbstverständlich anfühlt.
Damit das funktioniert, müssen ein paar Dinge gleichzeitig zusammenkommen. Die Optionen müssen klar als zusammengehörige Gruppe erkennbar sein. Gleichzeitig muss deutlich werden, dass hier mehrere Entscheidungen möglich sind – und nicht nur eine. Wer auswählt, braucht außerdem jederzeit eine verlässliche Rückmeldung: Was ist gerade aktiv, was nicht? Wenn dieser Überblick verloren geht, fühlt sich die Auswahl schnell unsicher an.
Auch die einzelnen Entscheidungen sollten unabhängig voneinander funktionieren. Eine Option auswählen, eine andere wieder abwählen – ohne Nebenwirkungen, ohne versteckte Logik. Dazu kommt die Orientierung: Besonders bei längeren Listen darf man nicht das Gefühl bekommen, in einer Auswahl „zu verschwinden“.
Und dann ist da noch die Bedienung selbst. Eine gute Mehrfachauswahl erklärt sich von allein. Wenn erst geraten werden muss, ob eine Tastenkombination nötig ist oder wie mehrere Einträge markiert werden, wird aus einer simplen Aufgabe plötzlich eine kleine Denksportübung. Das betrifft nicht nur Mausbedienung, sondern genauso Tastatur, Touch und Screenreader.
Kurz gesagt: Mehrfachauswahl muss übersichtlich, eindeutig und ohne Spezialwissen bedienbar sein. Das ist die Messlatte, an der sich die technischen Lösungen im nächsten Schritt messen lassen.
Umsetzung mit Multiselect
Für Mehrfachauswahl bringt HTML ein eigenes Element mit: <select multiple>. Auf den ersten Blick sieht es aus wie eine ganz normale Auswahlliste. Mehrere Einträge stehen untereinander, man kann hineinklicken – wirkt vertraut. Genau hier beginnt aber schon die erste Besonderheit: Die Darstellung erinnert an eine einfache Auswahl, das Verhalten ist jedoch ein anderes.
<label for="skills">Label</label>
<select id="skills" multiple size="6">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>Statt einzelne Optionen einfach an- oder auszuschalten, werden Einträge in dieser Liste markiert. Mehrere gleichzeitig auszuwählen klappt oft nur mit Tastenkombinationen wie Strg oder Shift. Dieses Muster kennt man eher aus Dateiordnern oder Tabellen. In Formularen rechnet man damit normalerweise nicht.
Genau da wird es schnell hakelig. Klickt man eine Option ohne gedrückte Zusatztaste an, bleibt nur dieser eine Eintrag ausgewählt. Alles andere verschwindet. Die Auswahl fühlt sich dadurch nicht besonders stabil an – ein unbedachter Klick, und mehrere Entscheidungen sind wieder weg.
Auch das Abwählen ist nicht wirklich selbsterklärend. Es ist nicht so, dass man eine Option wie einen Schalter einfach wieder ausschaltet. Stattdessen wird erneut markiert, oft wieder mit Tastenkombination. Das Ganze fühlt sich weniger nach einzelnen Entscheidungen an und mehr danach, eine Liste zu bearbeiten.
Der gewählte Zustand wird meist nur über die Hintergrundfarbe gezeigt. Bei längeren Listen kann das schnell unübersichtlich werden. Wenn Kontraste nicht sauber umgesetzt sind, wird es zusätzlich schwierig zu erkennen, was gerade aktiv ist.
Technisch funktioniert das Multiselect also grundsätzlich wie gedacht. Die Bedienung hat aber ihre Tücken.
Umsetzung mit HTML Checkboxen
Checkboxen funktionieren auf den ersten Blick viel einfacher. Jede Option ist ein eigener Schalter, den man unabhängig von den anderen an- oder ausschalten kann. Klickt man eine Option, passiert genau das, was man erwartet: Ein Häkchen erscheint oder verschwindet – fertig. Keine geheimen Tastenkombinationen, keine Überraschungen.
<fieldset>
<legend>Label</legend>
<label>
<input type="checkbox" value="1">
Option 1
</label>
<label>
<input type="checkbox" value="2">
Option 2
</label>
<label>
<input type="checkbox" value="3">
Option 3
</label>
</fieldset>Weil jede Auswahl ein eigenes Element ist, bleibt der Überblick leichter erhalten. Man sieht sofort, welche Optionen aktiviert sind und welche nicht. Auch bei längeren Listen verliert man nicht so leicht den Faden, und man kann jederzeit einzelne Optionen abwählen, ohne die anderen versehentlich zu verändern.
Checkboxen lassen sich außerdem gut gruppieren. Mit <fieldset> und <legend> kann man optisch und semantisch klarmachen, dass alle Optionen zusammengehören. Für den Nutzer wirkt das wie ein klar abgegrenzter Bereich. Man versteht sofort: Hier kann ich mehrere Entscheidungen treffen.
Kurz gesagt: Checkboxen wirken wie eine Reihe kleiner, selbstständiger Entscheidungen. Sie sind übersichtlich, verständlich und stabil und werden genau deshalb im Alltag oft als die unkompliziertere Lösung für eine Mehrfachauswahl wahrgenommen.
Ein Blick auf das ARIA‑Listbox‑Pattern
Multiselect sind also mitunter schwer zu bedienen, eine lange Liste an Checkboxen nimmt aber viel Platz weg. Was, wenn man beides kombinieren könnte? Eine intuitive Bedienung ohne Tastaturbefehle, aber platzsparend?
Wenn native HTML‑Elemente wie <select multiple> oder Checkboxen an ihre Grenzen stoßen, kann das ARIA‑Listbox‑Pattern helfen. Es beschreibt, wie eine Liste von Optionen zugänglich umgesetzt wird – inklusive der Möglichkeit, mehrere Elemente auszuwählen.
Im Kern ist eine Listbox eine Liste von Auswahlmöglichkeiten, bei der jede Option eine eigene Rolle (option) hat. Mit dem Attribut aria-multiselectable="true" wird der Mehrfachauswahl-Modus aktiviert. So weiß ein Screenreader oder eine Tastaturbedienung sofort: Hier können mehrere Optionen gleichzeitig ausgewählt werden.
Die Bedienung ist recht intuitiv:
- Pfeiltasten bewegen den Fokus durch die Liste
- Space oder Enter wählt die aktuelle Option aus oder hebt die Auswahl auf
- Shift+Pfeiltasten oder Strg+Kombinationen sind optional, je nach Implementierung
Das Pattern sorgt dafür, dass die Auswahl sichtbar, nachvollziehbar und stabil bleibt – genau die Punkte, die beim klassischen Multiselect oft Probleme bereiten. ABer: es ist eben nur ein Pattern, also ein Vorschlag. Wenn man es so machen würde, dann wäre es gut. Für die Umsetzung ist man im Gegensatz zu den nativen HTML-Elementen selbst verantwortlich. Das heißt, für eine gute Listbox braucht es HTML, CSS und JavaScript.
Kurz gesagt: Die ARIA-Listbox ist ein zugänglicher, flexibler Ersatz für Multiselect-Elemente oder Checkbox-Gruppen, wenn man sicherstellen möchte, dass wirklich alle Nutzer die Auswahl verstehen und bedienen können, man aber gleichzeitig die Optik der Selectbox haben möchte.
Weitergehende Details und Beispiele zum Listbox‑Pattern gibt es direkt in der ARIA‑Authoring‑Practices‑Dokumentation beim W3C:
https://www.w3.org/WAI/ARIA/apg/patterns/listbox/
Hier gibt es mehr Tipps und Tricks zum Thema ARIA:
- FAQ: Was ist WAI-ARIA?
- ARIA Rollen und Attribute – was sie bringen und was nicht
- Echtzeit-Updates mit ARIA Live Region
- aria-hidden oder display: none – Inhalte barrierefrei ausblenden
- Icon-Buttons richtig beschriften – so werden sie mit aria-label und co. barrierefrei
Fazit – Welche Mehrfachauswahl soll es denn nun sein?
Alle drei lösen dasselbe Problem: mehrere Optionen auswählen. Klingt einfach. Ist es aber nicht immer.
Multiselect ist schlank und spart Platz. Sie machen es einem aber nicht immer einfach, genau das zu wählen, was man möchte. Klick ohne Strg? Alles weg. Lange Listen? Schnell unübersichtlich. Sie sind eher was für Nutzer, die wissen, was sie tun – ein eingeschräänkter, gut geschulter Personenkreis.
Checkboxen sind kleine, intuitive Schalter. An, aus, alles sichtbar. Übersicht behalten? Kein Problem. Sie funktionieren mit Maus, Tastatur oder per Touch, die beiden zustände sind in den meisten Fällen deutlich unterscheidbar und verständlich (hier bitte keine Experimente! Aus = Maus und An = Antilope klingt witzig, bringt nur nichts). Sie nehmen zwar mehr Platz ein, aber dafür passiert nichts Überraschendes.
ARIA-Listbox ist wie das Upgrade: sauber strukturiert, Status jeder Option immer sichtbar, Mehrfachauswahl barrierefrei möglich. Sie sind ideal, wenn einem die nativen Elemente nicht reichen – aber auch mit viel Arbeit verbunden.
Kurz gesagt:
- Checkboxen – unkompliziert und stabil.
- Multiselect – platzsparend, aber etwas tückisch.
- ARIA-Listbox – flexibel, zugänglich, aber aufwendig.
Am Ende zählt der Kontext: Wer benutzt das Formular? Wie lang ist die Liste? Welche Geräte? Erst dann kann man entscheiden, was wohl die beste Lösung ist.