ARIA: form-Rolle

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

html
<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.

Warnung: Verwenden Sie ein HTML-<form>-Element, um Ihre Formularsteuerelemente zu enthalten, anstatt der ARIA-form-Rolle, es sei denn, Sie haben einen sehr guten Grund. Das HTML-<form>-Element reicht aus, um unterstützenden Technologien mitzuteilen, dass es ein Formular gibt.

Beschreibung

Eine form-Landmarke identifiziert einen Inhaltsbereich, der eine Sammlung von Elementen und Objekten enthält, die insgesamt ein Formular bilden, wenn keine andere benannte Landmarke geeignet ist (z.B. main oder search).

Hinweis: Die Verwendung des <form>-Elements wird automatisch einen Inhaltsabschnitt als form-Landmarke kommunizieren, wenn ihm ein zugänglicher Name bereitgestellt wird. Entwickler sollten immer bevorzugen, das richtige semantische HTML-Element zu verwenden, anstatt ARIA zu verwenden.

Verwenden Sie nach Möglichkeit das HTML-<form>-Element. Das <form>-Element definiert eine form-Landmarke, wenn 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 Benutzern den Zweck des Formulars verständlich zu machen. Dieses Label sollte für alle Benutzer sichtbar sein, nicht nur für Benutzer von unterstützenden Technologien. Verwenden Sie die search-Landmarke anstelle der form-Landmarke, wenn das Formular für Suchfunktionen verwendet wird.

Verwenden Sie role="form", um einen Bereich der Seite zu identifizieren; verwenden Sie es nicht, um jedes Formularelement zu identifizieren. Auch wenn Sie die Form-Landmarke anstelle von <form> verwenden, wird empfohlen, native HTML-Formularsteuerelemente wie <button>, <input>, <select> und <textarea> zu verwenden.

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

Keine rollspezifischen Zustände oder Eigenschaften.

Tastaturinteraktionen

Keine rollspezifischen Tastaturinteraktionen

Erforderliche JavaScript-Funktionen

onsubmit

Der onSubmit-Event-Handler behandelt das Ereignis, das ausgelöst wird, wenn das Formular abgeschickt wird. Alles, was kein <form> ist, kann nicht abgeschickt werden, deshalb müssten Sie JavaScript verwenden, um einen alternativen Datenübertragungsmechanismus zu erstellen, beispielsweise mit fetch().

Beispiele

html
<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.

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

Zugänglichkeitsbedenken

Sparsam verwenden

Landmarkenrollen sind dazu gedacht, größere gesamte Abschnitte des Dokuments zu identifizieren. Die Verwendung zu vieler Landmarkenrollen kann "Geräusche" in Screenreadern erzeugen, was es schwierig macht, das Gesamtlayout der Seite zu verstehen.

Eingaben sind keine Formulare

Sie müssen nicht role="form" auf jedem Formularelement (Eingaben, Textbereiche, Auswahlfelder, 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 role="form" nicht.

Suche

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

Landmarken beschriften

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

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

Verwendung von role="form"

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

Redundante Beschreibungen

Screenreader geben die Art der Rolle der Landmarke bekannt. Deshalb müssen Sie in der Beschriftung nicht beschreiben, was die Landmarke ist. Beispielsweise kann eine Deklaration von role="form" mit einem aria-label="Contact form" redundant als "Kontaktformular Formular" angekündigt werden.

Beste Praktiken

HTML bevorzugen

Die Verwendung des <form>-Elements wird automatisch kommunizieren, dass ein Abschnitt eine Rolle von form hat. Wenn möglich, ziehen Sie es vor, es zu verwenden.

Spezifikationen

Specification
Accessible Rich Internet Applications (WAI-ARIA)
# form
Unknown specification

Siehe auch