ARIA: form-Rolle

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

Verwenden Sie das HTML <form>-Element, wenn möglich. 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 eindeutiges 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 von assistiven 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 kennzeichnen. Auch wenn Sie die Formular-Landmarke anstelle von <form> verwenden, sollten Sie native HTML-Formularelemente wie <button>, <input>, <select>, und <textarea> verwenden.

Keine rollenspezifischen Zustände oder Eigenschaften.

Keine rollenspezifischen Tastaturinteraktionen

onsubmit

Der onSubmit-Ereignis-Handler behandelt das Ereignis, das ausgelöst wird, wenn das Formular abgeschickt wird. Alles, was kein <form> ist, kann nicht abgeschickt werden, daher müssten Sie JavaScript verwenden, um einen alternativen Datenübermittlungsmechanismus 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 sind dafür gedacht, größere Gesamtabschnitte des Dokuments zu identifizieren. Eine zu häufige Verwendung von Landmarken-Rollen kann "Rauschen" in Screenreadern erzeugen, was es schwierig macht, das Gesamtlayout der Seite zu verstehen.

Sie müssen nicht für jedes Formularelement (Inputs, Textbereiche, Auswahlfelder usw.) role="form" deklarieren. Es sollte auf dem HTML-Element deklariert werden, das die Formularelemente umgibt. Idealerweise verwenden Sie 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 Formularrolle, die als Landmarke angezeigt werden muss, muss einen zugänglichen Namen erhalten. Dieser Name ermöglicht es einem Benutzer von assistiven Technologien, schnell den Zweck der Formularlandmarke zu verstehen.

Verwenden Sie ein aria-labelledby, aria-label oder title auf demselben Element, dem role="form" gegeben 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 den Typ der Rolle an, die die Landmarke darstellt. Daher müssen Sie nicht im Label beschreiben, was die Landmarke ist. Beispielsweise kann eine Deklaration von role="form" mit einem aria-label="Kontaktformular" redundant als "Kontaktformular Formular" angekündigt werden.

Die Verwendung des <form>-Elements kommuniziert automatisch, dass ein Abschnitt die Rolle form hat. Wenn möglich, bevorzugen Sie die Verwendung dieses Elements.

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