Formulare

Labels Muss

Jedes Eingabefeld muss ein sichtbares, programmatisch verknüpftes Label haben.

<!-- Richtig: Explizites Label -->
<label for="email">E-Mail-Adresse</label>
<input type="email" id="email" name="email">

<!-- Richtig: Implizites Label -->
<label>
  E-Mail-Adresse
  <input type="email" name="email">
</label>

<!-- Falsch: Kein Label -->
<input type="email" placeholder="E-Mail">

Gruppierung Muss

Zusammengehörige Felder (z.B. Radio-Buttons, Checkboxen) müssen mit <fieldset> und <legend> gruppiert werden.

<fieldset>
  <legend>Bevorzugte Kontaktart</legend>
  <label><input type="radio" name="contact" value="email"> E-Mail</label>
  <label><input type="radio" name="contact" value="phone"> Telefon</label>
</fieldset>

Fehlermeldungen Muss

• Fehler müssen in Textform beschrieben werden (nicht nur durch Farbe)
• Fehlermeldungen müssen programmatisch mit dem Feld verknüpft sein (aria-describedby)
• Felder mit Fehlern müssen als aria-invalid="true" markiert werden
• Fehler sollen beim Auftreten angekündigt werden (role="alert" oder aria-live)

Pflichtfelder Muss

Pflichtfelder müssen mit required oder aria-required="true" gekennzeichnet werden. Zusätzlich soll visuell erkennbar sein, welche Felder erforderlich sind.

Autocomplete Muss

Felder für persönliche Daten müssen das passende autocomplete-Attribut verwenden (WCAG 1.3.5).

<input type="text" autocomplete="given-name" name="vorname">
<input type="text" autocomplete="family-name" name="nachname">
<input type="email" autocomplete="email" name="email">
<input type="tel" autocomplete="tel" name="telefon">

Redundante Eingaben vermeiden Muss

Bereits eingegebene Informationen dürfen nicht erneut abgefragt werden (WCAG 3.3.7), es sei denn, es ist aus Sicherheitsgründen notwendig.