ARIA: Rolle `form`

Die Rolle form kann verwendet werden, um eine Gruppe von Elementen auf einer Seite zu identifizieren, die eine ähnliche Funktionalität wie ein HTML-Formular bieten. Das Formular wird nicht als Landmarkenregion behandelt, es sei denn, es hat einen zugänglichen Namen.

<div role="form" id="contact-info" aria-label="Contact information">
  <!-- form content -->
</div>

Dies ist ein Formular, das die Kontaktinformationen eines Benutzers sammelt und speichert.

Beschreibung

Ein form-Landmark identifiziert einen Inhaltsbereich, der eine Sammlung von Elementen und Objekten enthält, die in ihrer Gesamtheit ein Formular bilden, wenn keine andere benannte Landmarke angemessen ist (z. B. main oder search).

Verwenden Sie das HTML-Element <form> wenn möglich. Das <form>-Element definiert eine form-Landmarke, sofern es einen zugänglichen Namen hat (z. B. aria-labelledby, aria-label oder title). Stellen Sie sicher, dass jedes Formular in einem Dokument ein einzigartiges Label hat, um den Benutzern den Zweck des Formulars zu verdeutlichen. Dieses Label sollte für alle Benutzer sichtbar sein, nicht nur für Nutzer von unterstützenden Technologien. Verwenden Sie die Landmarke search anstelle der Landmarke form, wenn das Formular zur Suche genutzt wird.

Verwenden Sie role="form", um einen Bereich der Seite zu identifizieren; verwenden Sie es nicht, um jedes Formularfeld zu identifizieren. Auch wenn Sie die form-Landmarke anstelle von <form> verwenden, sollten Sie dennoch native HTML-Formularkontrollen wie <button>, <input>, <select> und <textarea> nutzen.

Zugehörige WAI-ARIA-Rollen, Zustände und Eigenschaften

Keine rollenspezifischen Zustände oder Eigenschaften.

Tastaturinteraktionen

Keine rollenspezifischen Tastaturinteraktionen.

Erforderliche JavaScript-Funktionen

onsubmit

Der onSubmit-Ereignishandler behandelt das Ereignis, das ausgelöst wird, wenn das Formular übermittelt wird. Alles, was kein <form> ist, kann nicht übermittelt werden, daher müssten Sie JavaScript verwenden, um einen alternativen Mechanismus zur Datenübermittlung zu erstellen, zum Beispiel mit fetch().

Beispiele

<div role="form" id="send-comment" aria-label="Add a comment">
  <label for="username">Username</label>
  <input
    id="username"
    name="username"
    autocomplete="nickname"
    autocorrect="off"
    type="text" />

  <label for="email">Email</label>
  <input
    id="email"
    name="email"
    autocomplete="email"
    autocapitalize="off"
    autocorrect="off"
    spellcheck="false"
    type="text" />

  <label for="comment">Comment</label>
  <textarea id="comment" name="comment"></textarea>

  <input value="Comment" type="submit" />
</div>

Es wird empfohlen, <form> zu verwenden.

<form id="send-comment" aria-label="Add a comment">…</form>

Barrierefreiheitsbedenken

Sparsam verwenden

Landmark-Rollen sollen größere Gesamtabschnitte des Dokuments identifizieren. Die Verwendung von zu vielen Landmark-Rollen kann "Lärm" in Screenreadern verursachen und es schwierig machen, das Gesamt-Layout der Seite zu verstehen.

Eingaben sind keine Formulare

Sie müssen role="form" nicht auf jedem Formular-Element (Eingaben, Textbereiche, Selects usw.) deklarieren. Es sollte auf dem HTML-Element deklariert werden, das die Formularelemente umschließt. Idealerweise verwenden Sie das <form>-Element als umschließendes Element und deklarieren nicht role="form".

Suche

Wenn ein Formular zur Suche verwendet wird, sollten Sie den spezialisierteren Wert role="search" verwenden.

Landmarken beschriften

Jedes <form>-Element und jede form-Rolle, die als Landmarke offengelegt werden muss, muss einen zugänglichen Namen erhalten. Dieser Name ermöglicht es einem Benutzer von unterstützenden Technologien, den Zweck der Formular-Landmarke schnell zu verstehen.

Verwenden Sie aria-labelledby, aria-label oder title auf demselben Element, dem role="form" zugewiesen wurde, um ihm einen zugänglichen Namen zu geben.

Verwendung von role="form"

<div role="form" id="gift-cards" aria-label="Purchase a gift card">
  <!-- form content -->
</div>

Redundante Beschreibungen

Screenreader kündigen die Art der Rolle der Landmarke an. Daher brauchen Sie nicht in ihrer Bezeichnung zu beschreiben, was die Landmarke ist. Zum Beispiel kann eine Deklaration von role="form" mit aria-label="Contact form" redundant als "contact form form" angekündigt werden.

Beste Praktiken

Bevorzugen Sie HTML

Die Verwendung des <form>-Elements wird automatisch kommunizieren, dass ein Abschnitt die Rolle form hat. Wann immer möglich, bevorzugen Sie dessen Verwendung.

Spezifikationen

Siehe auch

• Das <form>-Element
• Das <legend>-Element
• form (role): Accessible Rich Internet Applications (WAI-ARIA) 1.1