ARIA: form-Rolle

Ein form-Landmark 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 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 den Zweck des Formulars verständlich zu machen. Dieses Label sollte für alle Benutzer sichtbar sein, nicht nur für Benutzer von Hilfstechnologien. Verwenden Sie die search-Landmarke anstelle der form-Landmarke, wenn das Formular für Suchfunktionen verwendet wird.

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

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 eingereicht wird. Alles, was kein <form> ist, kann nicht eingereicht werden, daher müssten Sie JavaScript verwenden, um einen alternativen Datenübermittlungsmechanismus 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> anstelle zu verwenden.

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

Landmarkenrollen sind dazu gedacht, größere Abschnitte des Dokuments zu identifizieren. Die Verwendung von zu vielen Landmarkenrollen kann ein "Rauschen" in Bildschirmlesern erzeugen, was es schwierig macht, das Gesamtlayout der Seite zu verstehen.

Es ist nicht erforderlich, role="form" bei jedem Formularelement (Inputs, Textbereiche, Auswahlen, usw.) zu 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 Sie role="form" nicht.

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 sein muss, muss einen zugänglichen Namen erhalten. Dieser Name ermöglicht es einem Benutzer von Hilfstechnologien, den Zweck der Formular-Landmarke schnell zu erfassen.

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

Verwendung von role="form"

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

Redundante Beschreibungen

Bildschirmleser geben die Art der Rolle der Landmarke an. Daher brauchen Sie nicht zu beschreiben, was die Landmarke in ihrem Label ist. Zum Beispiel könnte eine Deklaration von role="form" mit aria-label="Contact form" redundant als "Kontaktformular Formular" angekündigt werden.

Die Verwendung des <form>-Elements teilt automatisch mit, dass ein Abschnitt die Rolle form hat. Wenn überhaupt möglich, bevorzugen Sie es, es zu verwenden.

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