html mit Adi Prinz

Formularfelder eindeutig beschriften

Jedes Formularfeld benötigt eine verständliche Beschriftung. Das for-Attribut des label-Elements muss mit der id des zugehörigen Formularfeldes übereinstimmen.

<label for="vorname">
  Vorname:
</label>

<input
  type="text"
  id="vorname"
  name="vorname">
    

Wird die Beschriftung angeklickt, erhält das zugehörige Formularfeld den Fokus. Das erleichtert besonders die Bedienung kleiner Checkboxen und Optionsfelder.

Ein Formularfeld mit dem Label umschließen

Alternativ kann ein Formularfeld direkt innerhalb eines label-Elements stehen. Eine Zuordnung mit for und id ist dann technisch nicht zwingend erforderlich.

<label>
  Suchbegriff:
  <input
    type="search"
    name="suchbegriff">
</label>
    

Die ausdrückliche Zuordnung mit for und id ist häufig übersichtlicher und lässt sich flexibler gestalten:

<label for="suchbegriff">
  Suchbegriff:
</label>

<input
  type="search"
  id="suchbegriff"
  name="suchbegriff">
    

Sichtbare Beschriftungen verwenden

Beschriftungen sollten grundsätzlich sichtbar bleiben. Ein placeholder ist kein Ersatz für ein label, da er nach Beginn der Eingabe verschwindet.

<label for="email">
  E-Mail-Adresse:
</label>

<input
  type="email"
  id="email"
  name="email"
  placeholder="name@beispiel.at">
    

Der Platzhalter kann ein Beispiel oder einen zusätzlichen Hinweis enthalten. Die eigentliche Bedeutung des Feldes gehört in die sichtbare Beschriftung.

Einen zugänglichen Namen bereitstellen

Screenreader benötigen für jedes bedienbare Formularfeld einen zugänglichen Namen. Dieser wird am besten durch ein korrekt zugeordnetes label bereitgestellt.

Weitere Möglichkeiten sind:

• aria-label enthält die Beschriftung direkt im Element.
• aria-labelledby verweist auf ein sichtbares beschriftendes Element.
• Standardwerte oder der Inhalt einer Schaltfläche können ebenfalls einen zugänglichen Namen liefern.

<button
  type="button"
  aria-label="Suchfeld leeren">
  &times;
</button>
    

aria-label sollte nur verwendet werden, wenn keine geeignete sichtbare Beschriftung möglich ist. Eine sichtbare Beschriftung hilft allen Benutzern.

Eine vorhandene Überschrift als Beschriftung verwenden

Mit aria-labelledby kann ein Formularbereich durch bereits sichtbaren Text beschriftet werden.

<div
  role="group"
  aria-labelledby="kontaktart-ueberschrift">

  <p id="kontaktart-ueberschrift">
    Bevorzugte Kontaktart
  </p>

  <!-- Formularfelder -->
</div>
    

Für zusammengehörige Checkboxen und Optionsfelder sind fieldset und legend normalerweise die semantisch bessere Lösung.

Zusammengehörige Felder gruppieren

Mit fieldset werden zusammengehörige Formularfelder gruppiert. Das legend-Element beschreibt die gesamte Gruppe.

<fieldset>
  <legend>
    Bevorzugte Kontaktart
  </legend>

  <input
    type="radio"
    id="kontakt-email"
    name="kontaktart"
    value="email">

  <label for="kontakt-email">
    E-Mail
  </label>

  <input
    type="radio"
    id="kontakt-telefon"
    name="kontaktart"
    value="telefon">

  <label for="kontakt-telefon">
    Telefon
  </label>
</fieldset>
    

Ein Screenreader kann die Gruppenbeschriftung zusammen mit der Beschriftung des einzelnen Optionsfeldes ausgeben. Dadurch bleibt der Zusammenhang verständlich.

Zusätzliche Hinweise mit aria-describedby verbinden

Ergänzende Informationen können über aria-describedby mit einem Formularfeld verbunden werden. Der Wert enthält die id des beschreibenden Elements.

<label for="passwort">
  Passwort:
</label>

<input
  type="password"
  id="passwort"
  name="passwort"
  minlength="8"
  aria-describedby="passwort-hinweis"
  required>

<p id="passwort-hinweis">
  Verwenden Sie mindestens 8 Zeichen.
</p>
    

Die Beschreibung ergänzt das label. Sie ersetzt nicht den zugänglichen Namen des Formularfeldes.

Mehrere Hinweise miteinander verbinden

Ein Formularfeld kann auf mehrere beschreibende Elemente verweisen. Die einzelnen id-Werte werden durch Leerzeichen getrennt.

<input
  type="text"
  id="benutzername"
  name="benutzername"
  aria-describedby="benutzername-hinweis benutzername-fehler"
  required>

<p id="benutzername-hinweis">
  Verwenden Sie 5 bis 20 Zeichen.
</p>

<p id="benutzername-fehler">
  Dieser Benutzername ist bereits vergeben.
</p>
    

Ein Fehlertext sollte nur dann eingeblendet und mit dem Feld verbunden werden, wenn tatsächlich ein Fehler besteht.

Pflichtfelder verständlich kennzeichnen

Pflichtfelder sollten mit dem HTML-Attribut required ausgezeichnet und zusätzlich sichtbar gekennzeichnet werden.

<label for="nachname">
  Nachname (Pflichtfeld):
</label>

<input
  type="text"
  id="nachname"
  name="nachname"
  required>
    

Wird ein Sternchen verwendet, muss dessen Bedeutung vor dem Formular erklärt werden:

<p>
  Mit * gekennzeichnete Felder sind Pflichtfelder.
</p>

<label for="nachname">
  Nachname *
</label>

<input
  type="text"
  id="nachname"
  name="nachname"
  required>
    

Die Kennzeichnung darf nicht ausschließlich durch eine Farbe erfolgen. Begriffe wie „Pflichtfeld“ oder ein erklärtes Symbol sind eindeutiger.

Passende Werte für autocomplete verwenden

Das Attribut autocomplete beschreibt die Bedeutung persönlicher Eingabefelder. Browser und unterstützende Programme können dadurch passende gespeicherte Daten anbieten.

<input
  type="text"
  name="vorname"
  autocomplete="given-name">

<input
  type="text"
  name="nachname"
  autocomplete="family-name">

<input
  type="email"
  name="email"
  autocomplete="email">

<input
  type="tel"
  name="telefon"
  autocomplete="tel">
    

Häufig verwendete Werte sind:

• name – vollständiger Name
• given-name – Vorname
• family-name – Nachname
• email – E-Mail-Adresse
• tel – Telefonnummer
• street-address – vollständige Straßenadresse
• postal-code – Postleitzahl
• country-name – Name des Landes
• current-password – aktuelles Passwort
• new-password – neu festzulegendes Passwort

Passende Autovervollständigung kann die Eingabe vereinfachen und Fehler vermeiden. Der Wert autocomplete="off" sollte daher nicht ohne triftigen Grund verwendet werden.

Den Eingabezweck eindeutig festlegen

Neben der sichtbaren Beschriftung sollten passende Eingabetypen und Attribute verwendet werden. Dadurch können Browser eine geeignete Bildschirmtastatur und zusätzliche Eingabehilfen anbieten.

<label for="telefon">
  Telefonnummer:
</label>

<input
  type="tel"
  id="telefon"
  name="telefon"
  autocomplete="tel">
    

<label for="postleitzahl">
  Postleitzahl:
</label>

<input
  type="text"
  id="postleitzahl"
  name="postleitzahl"
  inputmode="numeric"
  autocomplete="postal-code">
    

inputmode unterstützt die Eingabe, führt aber selbst keine Validierung durch. Zulässige Werte müssen bei Bedarf zusätzlich geprüft werden.

Eine verständliche Reihenfolge einhalten

Formularfelder sollten im HTML in derselben Reihenfolge stehen, in der sie visuell dargestellt und inhaltlich bearbeitet werden.

• Zusammengehörige Felder werden gemeinsam angeordnet.
• Die Reihenfolge folgt einem verständlichen Ablauf.
• Pflichtfelder und Eingabeformate werden frühzeitig erklärt.
• Die Submit-Schaltfläche steht nach den zugehörigen Feldern.
• CSS verändert die visuelle Reihenfolge nicht widersprüchlich.

Eine logische HTML-Reihenfolge ist besonders für Tastaturbenutzer und Screenreader wichtig. Mit positiven tabindex-Werten sollte keine künstliche Tabulatorreihenfolge aufgebaut werden.

Praxisbeispiel: Gut beschriftetes Kontaktformular

Das Beispiel verwendet sichtbare Beschriftungen, passende Autovervollständigung, verständliche Hinweise sowie fieldset und legend für die Gruppe der Optionsfelder.

Formulare mit der Tastatur bedienen

Mit der Tabulatortaste bewegt sich der Fokus normalerweise zum nächsten bedienbaren Element. Mit Umschalt + Tab wird das vorherige Element ausgewählt.

• Tab – zum nächsten bedienbaren Element wechseln
• Umschalt + Tab – zum vorherigen Element wechseln
• Leertaste – Checkboxen aktivieren oder deaktivieren
• Pfeiltasten – zwischen zusammengehörigen Optionsfeldern wechseln
• Enter – eine Schaltfläche betätigen oder ein Formular absenden
• Esc – je nach Element einen Vorgang abbrechen

Native HTML-Formularelemente besitzen bereits ein geeignetes Tastaturverhalten. Eigene Steuerelemente aus div- oder span-Elementen benötigen dagegen zusätzliche Tastaturunterstützung und passende ARIA-Eigenschaften.

Native Formularelemente bevorzugen

Für Formulare sollten möglichst die vorgesehenen HTML-Elemente verwendet werden. Sie sind ohne zusätzliche Programmierung mit der Tastatur bedienbar und werden von Hilfstechnologien erkannt.

<button type="submit">
  Formular absenden
</button>
    

Eine Schaltfläche sollte nicht unnötig nachgebaut werden:

<div class="button">
  Formular absenden
</div>
    

Ein div-Element besitzt weder die Bedeutung noch das Tastaturverhalten einer Schaltfläche. Auch ein role="button" ergänzt nicht automatisch die erforderliche Bedienung mit Enter und der Leertaste.

Eine logische Tabulatorreihenfolge beibehalten

Die Reihenfolge der fokussierbaren Elemente richtet sich grundsätzlich nach ihrer Position im HTML. Diese Reihenfolge sollte dem sichtbaren und inhaltlichen Ablauf des Formulars entsprechen.

<label for="vorname">
  Vorname:
</label>

<input
  type="text"
  id="vorname"
  name="vorname">

<label for="nachname">
  Nachname:
</label>

<input
  type="text"
  id="nachname"
  name="nachname">

<button type="submit">
  Absenden
</button>
    

Mit CSS Grid oder Flexbox kann die sichtbare Reihenfolge verändert werden. Die Tastaturreihenfolge folgt jedoch weiterhin dem HTML.

Eine abweichende sichtbare Reihenfolge kann verwirrend sein, weil der Fokus scheinbar unkontrolliert über die Seite springt. HTML-Reihenfolge und Darstellung sollten daher übereinstimmen.

tabindex richtig einsetzen

Mit dem Attribut tabindex kann beeinflusst werden, ob ein Element über die Tabulatortaste erreichbar ist.

• tabindex="0" fügt ein Element entsprechend seiner HTML-Position in die natürliche Tabulatorreihenfolge ein.
• tabindex="-1" entfernt ein Element aus der Tabulatorreihenfolge. Mit JavaScript kann es weiterhin fokussiert werden.
• Positive Werte wie tabindex="1" erzeugen eine künstliche Reihenfolge und sollten vermieden werden.

<div
  id="formularmeldung"
  tabindex="-1">
  Bitte korrigieren Sie die markierten Felder.
</div>
    

const meldung = document.querySelector("#formularmeldung");

meldung.focus();
    

Native Eingabefelder, Links und Schaltflächen benötigen normalerweise kein tabindex="0". Sie sind bereits Bestandteil der natürlichen Tabulatorreihenfolge.

Den Tastaturfokus sichtbar machen

Browser kennzeichnen ein fokussiertes Element normalerweise durch einen Rahmen oder eine Umrandung. Diese sichtbare Fokusmarkierung darf nicht ersatzlos entfernt werden.

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: 3px solid #0d6efd;
  outline-offset: 3px;
}
    

Folgende Gestaltung ist problematisch:

*:focus {
  outline: none;
}
    

Wird die Standardmarkierung entfernt, muss sie durch eine mindestens ebenso deutliche eigene Fokusgestaltung ersetzt werden.

Tastaturfokus mit :focus-visible gestalten

Die Pseudoklasse :focus-visible wird verwendet, wenn der Browser eine sichtbare Fokusmarkierung für erforderlich hält. Das ist insbesondere bei einer Bedienung mit der Tastatur der Fall.

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 3px solid #0d6efd;
  outline-offset: 3px;
}
    

Im Unterschied dazu gilt :focus immer dann, wenn ein Element fokussiert ist – unabhängig davon, ob der Fokus durch Tastatur, Maus oder JavaScript gesetzt wurde.

Bei Texteingabefeldern kann der Browser auch nach einem Mausklick eine sichtbare Fokusmarkierung anzeigen. Der Browser entscheidet anhand des Elements und der Eingabemethode, wann :focus-visible zutrifft.

Formularbereiche mit :focus-within hervorheben

Die Pseudoklasse :focus-within gilt für ein Element, wenn es selbst oder eines seiner untergeordneten Elemente den Fokus besitzt.

.formulargruppe:focus-within {
  border-color: #0d6efd;
  background-color: #f0f7ff;
}
    

Die Hervorhebung des umgebenden Bereichs kann die Orientierung erleichtern. Das fokussierte Eingabefeld benötigt trotzdem eine eigene sichtbare Fokusmarkierung.

Ausreichenden Kontrast für den Fokus verwenden

Die Fokusmarkierung muss sich deutlich vom Hintergrund und vom Element unterscheiden. Eine kaum sichtbare Farbänderung reicht nicht aus.

.form-control:focus-visible {
  outline: 3px solid #084298;
  outline-offset: 3px;
  border-color: #084298;
}
    

Eine Kombination aus Umrandung, Abstand und veränderter Rahmenfarbe ist meistens deutlicher als eine einzelne schwache Farbänderung.

Die Fokusmarkierung sollte auf hellen und dunklen Bereichen geprüft werden. Sie darf auch bei vergrößerter Darstellung oder unter Windows in kontrastreichen Anzeigemodi nicht verloren gehen.

Fokussierte Elemente nicht verdecken

Ein fokussiertes Formularfeld darf nicht vollständig durch feststehende Kopfzeilen, Cookie-Hinweise oder andere überlagernde Elemente verdeckt werden.

input,
select,
textarea,
button {
  scroll-margin-top: 6rem;
  scroll-margin-bottom: 2rem;
}
    

scroll-margin-top kann zusätzlichen Abstand schaffen, wenn ein fokussiertes Element automatisch in den sichtbaren Bereich gescrollt wird.

Die tatsächliche Bedienung muss trotzdem geprüft werden. Eine CSS-Eigenschaft allein verhindert nicht jede mögliche Überlagerung durch feste Elemente.

Ausreichend große Bedienflächen bereitstellen

Checkboxen, Optionsfelder, Schaltflächen und andere Bedienelemente sollten leicht getroffen werden können. Das ist auf Touchscreens ebenso wichtig wie für Benutzer mit eingeschränkter Feinmotorik.

.form-check-label {
  display: inline-block;
  padding: 0.5rem;
  cursor: pointer;
}

button {
  min-height: 44px;
  padding: 0.5rem 1rem;
}
    

Durch ein korrekt zugeordnetes label kann auch der Beschriftungstext angeklickt oder angetippt werden. Dadurch wird die Bedienfläche wesentlich größer.

Ausreichend Abstand zwischen Bedienelementen lassen

Eng nebeneinanderliegende Schaltflächen erhöhen das Risiko, versehentlich die falsche Aktion auszulösen. Besonders kritische Aktionen benötigen eine klare Trennung.

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
    

Eine gefährliche Aktion wie „Löschen“ sollte sich nicht nur farblich, sondern auch durch eine eindeutige Beschriftung von den anderen Aktionen unterscheiden.

Den Fokus mit JavaScript gezielt setzen

Nach einer deutlichen Änderung der Seite kann es sinnvoll sein, den Fokus gezielt auf einen wichtigen Bereich zu setzen. Das betrifft beispielsweise eingeblendete Fehlermeldungen oder neu geöffnete Dialogfenster.

const fehlermeldung = document.querySelector("#fehlermeldung");

fehlermeldung.focus();
    

Damit ein normalerweise nicht fokussierbares Element den Fokus erhalten kann, wird häufig tabindex="-1" verwendet:

<div
  id="fehlermeldung"
  tabindex="-1"
  role="alert">
  Bitte korrigieren Sie die markierten Eingaben.
</div>
    

Der Fokus sollte nur gezielt verschoben werden, wenn dies die Orientierung verbessert. Unerwartete Fokuswechsel während der Eingabe können Benutzer verwirren.

Zum ersten fehlerhaften Feld wechseln

Bei einem ungültigen Formular kann der Fokus nach der Prüfung auf das erste fehlerhafte Feld gesetzt werden.

const formular = document.querySelector("#anmeldung");

formular.addEventListener("submit", function (event) {
  if (!formular.checkValidity()) {
    event.preventDefault();

    const erstesFehlerhaftesFeld =
      formular.querySelector(":invalid");

    if (erstesFehlerhaftesFeld) {
      erstesFehlerhaftesFeld.focus();
    }
  }
});
    

Zusätzlich sollte am Beginn des Formulars eine verständliche Fehlerzusammenfassung stehen. Nur ein Fokuswechsel erklärt noch nicht, welche Eingaben fehlerhaft sind.

Ein Formular mit der Tastatur testen

Ein einfacher Tastaturtest zeigt viele Bedienungsprobleme schnell auf. Dabei wird die Maus vorübergehend nicht verwendet.

1. Mit Tab durch alle Formularfelder wechseln.
2. Prüfen, ob der Fokus jederzeit deutlich sichtbar ist.
3. Die Reihenfolge der fokussierten Elemente kontrollieren.
4. Checkboxen mit der Leertaste bedienen.
5. Optionsfelder mit den Pfeiltasten auswählen.
6. Auswahllisten ausschließlich mit der Tastatur bedienen.
7. Das Formular mit der Tastatur absenden.
8. Fehlermeldungen und Fokusverhalten überprüfen.

Eine erfolgreiche Mausbedienung beweist noch keine vollständige Tastaturbedienbarkeit. Beide Eingabemethoden müssen getrennt geprüft werden.

Praxisbeispiel: Tastaturfreundliche Anmeldung

Das Beispiel verwendet native Formularelemente, eine logische HTML-Reihenfolge, deutlich sichtbare Fokusmarkierungen und ausreichend große Bedienflächen.