Barrierefreie Formulare & Modals: 5 Best Practices für React & Astro

Formulare und Dialogfenster (Modals) sind die kritischsten Interaktionspunkte jeder Website. Wenn Nutzer hier auf Barrieren stoßen, brechen Registrierungen, Kontaktaufnahmen und Bestellungen ab.

Hier sind die 5 wichtigsten Regeln für barrierefreie Formulare.

---

1. Jedes Eingabefeld benötigt ein echtes <label>

Ein placeholder ist kein Ersatz für ein Label. Screenreader lesen Placeholders unzuverlässig vor, und sobald Text eingegeben wird, verschwindet der Hinweis.

<!-- Richtig -->
<label for="user-email" class="block text-sm font-bold">
  E-Mail-Adresse <span aria-hidden="true">*</span>
</label>
<input id="user-email" type="email" required autocomplete="email" />

---

2. Fehlermeldungen mit aria-describedby verknüpfen

Wenn die Validierung fehlschlägt, muss der Screenreader den Fehlertext beim Fokussieren des fehlerhaften Feldes sofort ansagen.

<input
  id="user-email"
  type="email"
  aria-invalid="true"
  aria-describedby="email-error"
/>
<p id="email-error" class="text-red-600 text-xs mt-1" role="alert">
  Bitte geben Sie eine gültige E-Mail-Adresse ein.
</p>

---

3. Tastaturfokus-Management in Modals (Focus Trap)

Beim Öffnen eines Modals:

1. Fokus auf das erste interaktive Element oder die Überschrift setzen.
2. Der Tab-Schlüssel darf das Modal nicht verlassen (Focus Trap).
3. Druck auf die Escape-Taste schließt das Modal und setzt den Fokus zurück auf den auslösenden Button.

---

4. Nie outline: none ohne Ersatz verwenden

Der Standard-Fokusring ist für Tastaturnutzer lebensnotwendig. Wenn Sie den Standard-Stil anpassen möchten, nutzen Sie :focus-visible:

button:focus-visible {
  outline: 2px solid #0D9488;
  outline-offset: 3px;
  border-radius: 8px;
}

---

Fazit

Mit standardkonformen HTML-Elementen und minimaler ARIA-Unterstützung schaffen Sie barrierefreie Formulare, die sowohl Konversionsraten steigern als auch alle WCAG 2.2 Kriterien erfüllen.