ARIA: form-Rolle

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

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.

Keine rollspezifischen Zustände oder Eigenschaften.

Keine rollspezifischen Tastaturinteraktionen

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().

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

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.

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.

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

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"

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

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.

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