Rolle Landmarke

`form`

Ein Landmark für ein Formular — eine Sammlung von Eingabeelementen, die Daten übermitteln. Ein <form>-Element wird NUR dann als Form-Landmark exponiert, wenn es einen zugänglichen Namen besitzt. Ohne Namen ist es lediglich ein Formular, kein Landmark.

Verwendung

Für ein inhaltlich bedeutsames Formular — Registrierung, Checkout, Kontakt, Profilbearbeitung — das als Landmark navigierbar sein soll. Wie bei region wird das <form>-Element NUR dann zu einem Form-Landmark hochgestuft, wenn es einen zugänglichen Namen besitzt (aria-label oder aria-labelledby).

Der zugängliche Name eines Formulars sollte seinen Zweck beschreiben: „Kontaktformular“, „Registrierung“, „Profil bearbeiten“. Generische Bezeichnungen wie „Formular“ sind zu vermeiden — sie sind redundant mit der Rollenansage.

Handelt es sich um ein Suchformular, ist stattdessen <search> (oder role="search") zu verwenden — der Search-Landmark ist spezifischer.

Ein einfaches Newsletter-Abonnement mit einem Eingabefeld oder ein einzelnes Suchfeld rechtfertigt den Form-Landmark nicht. Er sollte Formularen mit mindestens drei aussagekräftigen Eingaben und einem klar definierten Zweck vorbehalten bleiben.

Beschriftung

Immer erforderlich — ohne Namen wird das <form> nicht zum Landmark. Bei mehreren Formularen auf einer Seite (ein Kommentarformular UND ein Newsletter-Abonnement) MUSS jedes einen eigenen, eindeutigen Namen erhalten.

aria-labelledby mit Verweis auf eine sichtbare Überschrift ist gegenüber aria-label vorzuziehen, da es den sichtbaren Titel mit der Landmark-Ansage verknüpft.

Häufige Fehler

<form> ohne aria-label / aria-labelledby. Kein Landmark — Nutzende können es nicht per Landmark-Navigation ansteuern.
aria-label="Formular" — redundant.
<form role="search"> kombiniert mit aria-label="Suche". Der Search-Landmark deckt das bereits ab; die Form-Rolle würde einen Konflikt erzeugen.
Login- und Registrierungsformular beide mit der Bezeichnung „Anmelden“ — im Landmark-Menü nicht unterscheidbar.
Ein einzelnes Eingabefeld in <form> einschließen und als Form-Landmark auszeichnen. Zu weit gefasst; der Landmark bietet keinen Mehrwert.

Beispiel

<form aria-labelledby="contactHeading">
  <h2 id="contactHeading">Kontakt</h2>
  <label>Name <input type="text" name="name" required></label>
  <label>E-Mail <input type="email" name="email" required></label>
  <label>Nachricht <textarea name="message" required></textarea></label>
  <button type="submit">Senden</button>
</form>