<input>

Das Herzstück von <input> ist das type-Attribut. Es bestimmt, was der Nutzer sieht und eingeben kann. Wenn du kein type angibst, ist der Standard text, ein einfaches einzeiliges Textfeld. Genauso wichtig wie der Typ ist das Label: Jedes Eingabefeld braucht ein <label>, damit Nutzer wissen, was sie eingeben sollen.

Ein <label> ist nicht nur ein beschreibender Text, es hat zwei konkrete Vorteile: Erstens vergrößert es die Klickfläche, denn wenn du auf das Label klickst, fokussiert der Browser automatisch das zugehörige Eingabefeld. Das ist besonders bei kleinen Elementen wie Checkboxen und Radio-Buttons hilfreich. Zweitens liest ein Screenreader das Label vor, wenn ein blinder Nutzer das Feld fokussiert. Ohne Label hört er nur “Eingabefeld, leer”, was nicht hilfreich ist.

• <input> ist ein Void-Element: Es hat keinen schließenden Tag, du schreibst einfach <input>
• Das type-Attribut bestimmt Aussehen und Verhalten, von Textfeld bis Farbauswahl
• Standard-Typ ist text, wenn kein type angegeben wird
• Verknüpfe jedes Input immer mit einem <label>: entweder über for/id oder indem du das <input> innerhalb des <label> platzierst

Wichtige type-Werte

Das <input>-Element ist eines der am häufigsten genutzten interaktiven Elemente im Web, und gleichzeitig eines, bei dem Barrierefreiheit oft zu kurz kommt. Hier die wichtigsten Punkte:

Label-Verknüpfung ist nicht optional. Jedes <input> braucht ein <label>. Es gibt zwei Wege: Entweder über for/id (<label for="email"> + <input id="email">) oder indem du das <input> direkt im <label> platzierst (<label>E-Mail: <input></label>). Beide Varianten funktionieren gleich gut für Screenreader. Ohne Label hört ein blinder Nutzer nur “Eingabefeld, leer” und hat keine Ahnung, was er eingeben soll.

aria-describedby für Hilfetexte und Fehlermeldungen. Wenn unter einem Feld ein Hinweis steht (z.B. “Mindestens 8 Zeichen”), verknüpfe ihn mit aria-describedby. Der Screenreader liest dann beim Fokussieren des Feldes: “Passwort, Eingabefeld. Mindestens 8 Zeichen.” Das funktioniert genauso für Fehlermeldungen.

<label for="pw">Passwort:</label>
<input type="password" id="pw" aria-describedby="pw-help">
<span id="pw-help">Mindestens 8 Zeichen</span>

required und aria-invalid richtig einsetzen. Das required-Attribut signalisiert Screenreadern, dass ein Feld ausgefüllt werden muss. Wenn die Validierung fehlschlägt, setze aria-invalid="true" auf das Feld. Der Screenreader sagt dann “ungültig” beim Fokussieren.

Fokus-Management bei dynamischen Formularen. Wenn nach einer Aktion neue Felder erscheinen oder eine Fehlermeldung eingeblendet wird, setze den Fokus programmatisch auf das relevante Element. Nutzer, die nur mit der Tastatur arbeiten, sehen und hören sonst nicht, dass sich etwas geändert hat.

• Kein <label>: Ein Eingabefeld ohne Label ist wie ein Formularfeld ohne Beschriftung. Sehende Nutzer können vielleicht aus dem Kontext schließen, was gemeint ist, aber ein Screenreader liest nur “Eingabefeld, leer” vor. Verknüpfe jedes <input> entweder über <label for="id"> oder indem du das Input direkt im <label> platzierst.

• Fehlender name: Ohne name-Attribut werden die Daten beim Absenden nicht an den Server übermittelt. Das Feld ist dann zwar sichtbar und bedienbar, aber seine Eingabe verschwindet einfach beim Absenden.

• Radio-Buttons ohne gemeinsamen name: Wenn Radio-Buttons nicht denselben name haben, funktioniert die Einfachauswahl nicht. Der Nutzer kann dann mehrere Optionen gleichzeitig auswählen, was den Sinn von Radio-Buttons verfehlt.

• type="number" für Telefonnummern oder PLZ: Telefonnummern können mit + beginnen und Leerzeichen oder Bindestriche enthalten, das erlaubt number nicht. Postleitzahlen wie 01234 verlieren die führende Null, weil number sie als Zahl 1234 interpretiert. Verwende type="tel" für Telefonnummern und type="text" mit pattern-Attribut für Postleitzahlen.

Basis-Typen (text, password, checkbox, radio) werden universell unterstützt. Auch Typen wie date, color und range werden von allen modernen Browsern unterstützt. Unbekannte Typen fallen automatisch auf text zurück.

• Chrome

  Komplett

• Firefox

  Komplett

• Safari

  Komplett

• Edge

  Komplett

• Opera

  Komplett

Eingabefelder werden von den meisten Email-Clients aus Sicherheitsgründen nicht unterstützt. Interaktive Formularelemente werden in der Regel entfernt.

• Apple Mail

  Teilweise

  Zeigt Eingabefelder an, aber Interaktion und Absenden funktionieren nicht zuverlässig.

• Gmail

  Keine

  Gmail entfernt input-Elemente komplett aus dem HTML.

• Outlook

  Keine

  Outlook entfernt Formularelemente aus Sicherheitsgründen vollständig.

• Thunderbird

  Teilweise

  Zeigt Eingabefelder an, Funktionalität ist aber eingeschränkt.

• Yahoo Mail

  Keine

  Yahoo Mail entfernt Formular-Elemente aus dem HTML.