ARIA: Form-Rolle

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

Verwenden Sie nach Möglichkeit das HTML-<form>-Element. Das <form>-Element definiert eine form-Landmark, wenn es einen zugänglichen Namen hat (z. B. aria-labelledby, aria-label oder title). Stellen Sie sicher, dass jedes Formular in einem Dokument einen eindeutigen Beschriftung hat, um den Benutzern den Zweck des Formulars zu verdeutlichen. Diese Beschriftung sollte für alle Benutzer sichtbar sein, nicht nur für Benutzer von Hilfstechnologien. Verwenden Sie die search-Landmark anstelle der form-Landmark, 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 Formularfeld zu identifizieren. Auch wenn Sie die Form-Landmark anstelle von <form> verwenden, werden Sie ermutigt, native HTML-Formularelemente wie <button>, <input>, <select> und <textarea> zu nutzen.

Keine rollenspezifischen Zustände oder Eigenschaften.

Keine rollenspezifischen Tastaturinteraktionen.

onsubmit

Der onSubmit-Event-Handler behandelt das Ereignis, das ausgelöst wird, wenn das Formular abgesendet wird. Alles, was kein <form> ist, kann nicht abgesendet werden, daher müssten Sie JavaScript verwenden, um einen alternativen Datenübermittlungsmechanismus zu bauen, zum Beispiel 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>

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

Sie müssen nicht role="form" auf jedem Formularelement (Eingabefelder, Textbereiche, Auswahlen usw.) deklarieren. Es sollte auf dem HTML-Element deklariert werden, das die Formularelemente umschließt. Idealerweise verwenden Sie das <form>-Element als Umschlagselement 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 Landmark dargestellt werden muss, muss einen zugänglichen Namen erhalten. Dieser Name ermöglicht es einem Benutzer von Hilfstechnologie, den Zweck der Form-Landmark schnell 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 die Art der Rolle der Landmark bekannt. Daher müssen Sie in deren Beschriftung nicht beschreiben, was die Landmark ist. Zum Beispiel kann eine Deklaration von role="form" mit einem aria-label="Contact form" redundant als "contact form form" angesagt werden.

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

• Das <form>-Element
• Das <legend>-Element