Warum ist die rein visuelle Anordnung von Radio-Buttons ohne logische Gruppierung für Screenreader-Nutzer problematisch?

Die rein visuelle Anordnung von Radio-Buttons (z. B. durch CSS-Positionierung, Tabellen oder Abstände), ohne sie im Code logisch zu gruppieren, stellt für Screenreader-Nutzer ein erhebliches Barrierefreiheits-Problem dar.

Hier sind die Hauptgründe, warum das problematisch ist:

1. Fehlender Kontext (Die "Frage" fehlt)

Für einen sehenden Nutzer ist der Zusammenhang durch die räumliche Nähe klar: Oben steht die Frage "Wie möchten Sie bezahlen?", darunter kommen die Optionen "PayPal", "Kreditkarte" etc. Ein Screenreader-Nutzer navigiert oft von Formularelement zu Formularelement (z. B. mit der Tab-Taste). Ohne eine logische Gruppierung (wie <fieldset> und <legend>) hört der Nutzer beim Anspringen des Radio-Buttons nur:

• "Radio-Button nicht ausgewählt, PayPal"

Der Nutzer weiß in diesem Moment jedoch nicht, wozu diese Option gehört. Die übergeordnete Frage wird vom Screenreader nicht automatisch vorgelesen, wenn sie nur als normaler Text irgendwo darüber steht.

2. Fehlende Information über die Gruppengröße

Wenn Radio-Buttons korrekt gruppiert sind, gibt der Screenreader wertvolle Metadaten aus, zum Beispiel:

• "Auswahlknopf 1 von 3"

Ohne logische Gruppierung fehlen diese Informationen. Der Nutzer weiß nicht, wie viele Optionen zur Verfügung stehen oder ob er sich gerade in einer zusammengehörigen Liste von Auswahlmöglichkeiten befindet.

3. Verlust der Zusammengehörigkeit bei mehreren Gruppen

Stellen Sie sich vor, ein Formular hat zwei Fragen (z. B. "Geschlecht" und "Zahlungsart"), die jeweils Radio-Buttons nutzen. Wenn diese nicht logisch gruppiert sind, verschwimmen sie für einen Screenreader-Nutzer zu einer langen, unübersichtlichen Liste von Knöpfen. Der Nutzer kann nicht sicher sein, wo die eine Entscheidung endet und die nächste beginnt.

4. Probleme bei der Tastaturnavigation

In einem korrekt gruppierten Radio-Button-Set bewegt man sich normalerweise so:

• Tab: Springt in die Gruppe hinein (zum ausgewählten Element).
• Pfeiltasten: Wechseln zwischen den Optionen innerhalb der Gruppe.

Wenn die semantische Struktur fehlt, kann es passieren, dass das Standard-Verhalten der Tastaturnavigation gestört ist oder der Nutzer die logische Abfolge der Bedienung nicht versteht, da der Fokuspfad nicht mit der visuellen Erwartung übereinstimmt.

Die Lösung: Semantisches HTML

Um diese Probleme zu vermeiden, müssen Radio-Buttons zwingend gruppiert werden.

Negativ-Beispiel (nur visuell):

<p>Wählen Sie eine Farbe:</p> <!-- Nur Text, kein Bezug für Screenreader -->
<input type="radio" name="farbe" id="rot"> <label for="rot">Rot</label>
<input type="radio" name="farbe" id="blau"> <label for="blau">Blau</label>

Positiv-Beispiel (logisch gruppiert):

<fieldset>
  <legend>Wählen Sie eine Farbe:</legend> <!-- Wird beim Fokus der Buttons vorgelesen -->
  <input type="radio" name="farbe" id="rot">
  <label for="rot">Rot</label>

  <input type="radio" name="farbe" id="blau">
  <label for="blau">Blau</label>
</fieldset>

Was passiert im Positiv-Beispiel? Sobald der Nutzer den ersten Radio-Button mit dem Tabulator fokussiert, sagt der Screenreader: "Gruppenbezeichnung: Wählen Sie eine Farbe. Radio-Button rot, 1 von 2, nicht ausgewählt." Der Kontext ist sofort klar.