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 angemessen 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 das Verständnis des Zwecks des Formulars zu erleichtern. Dieses Label sollte für alle Benutzer sichtbar sein, nicht nur für Benutzer unterstützender Technologie. Verwenden Sie die search-Landmarke statt 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 Formularlandmarke anstelle von <form> verwenden, sollten Sie native HTML-Formularelemente wie <button>, <input>, <select> und <textarea> verwenden.

Keine rollen-spezifischen Zustände oder Eigenschaften.

Keine rollen-spezifischen Tastaturinteraktionen.

onsubmit

Der onSubmit-Ereignishandler verarbeitet das Ereignis, das ausgelöst wird, wenn das Formular übermittelt wird. Alles, was nicht ein <form> ist, kann nicht übermittelt werden, daher müssten Sie JavaScript verwenden, um einen alternativen Mechanismus zur Datenübermittlung zu erstellen, z.B. 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>

Landmarken-Rollen sollen größere übergeordnete Abschnitte des Dokuments identifizieren. Die Verwendung zu vieler Landmarken-Rollen kann in Screenreadern "Rauschen" erzeugen, was es schwierig macht, das Gesamtlayout der Seite zu verstehen.

Sie müssen nicht role="form" auf jedes Formularelement (Eingaben, Textbereiche, Auswahlfelder, etc.) deklarieren. Es sollte auf dem HTML-Element deklariert werden, das die Formularelemente umschließt. Verwenden Sie idealerweise das <form>-Element als umschließendes Element und deklarieren Sie nicht role="form".

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

Jedes <form>-Element und jede form-Rolle, die als Landmarke sichtbar gemacht werden muss, muss einen zugänglichen Namen erhalten. Dieser Name ermöglicht es Benutzern unterstützender Technologie, schnell den Zweck der Formularlandmarke zu verstehen.

Verwenden Sie ein aria-labelledby, aria-label oder title auf demselben Element, das mit role="form" versehen 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 den Typ der Landmarkenrolle an. Daher müssen Sie in ihrem Label nicht beschreiben, was die Landmarke ist. Zum Beispiel 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 dies der Verwendung vor.

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