Synonyme: Erforderliche Formularfelder, Pflichteingabe, Required

Siehe auch: Fehlermeldung, Beschriftung, Elementstatus

Eine Pflichtfeldkennzeichnung ist ein visueller Indikator für Formularfelder, die ausgefüllt werden müssen. So kann z. B. mit einem Stern (*) beim Formularfeld darauf hingewiesen werden, dass ein Feld ausgefüllt werden muss.

Darstellung

Permalink "Darstellung"
Nr.EigenschaftBeschreibungKlassifizierungReferenz
198DarstellungPflichtfelder müssen visuell wahrnehmbar sein.

Hinweis 1: Anstelle der Pflichtfelder können auch die optionalen Felder gekennzeichnet werden.

Hinweis 2: Wenn aus dem Kontext die Pflichtfelder auch ohne Kennzeichnung erkennbar sind (z. B. auf einer Loginseite mit zwei Eingabefeldern für Username und Passwort), dann kann die Pflichtfeldkennzeichnung unterbleiben.

Hinweis 3: Pflichtfelder sollen in der Anwendung konsistent gekennzeichnet sein.

Hinweis 4: Bei Gruppen von Radiobuttons und Checkboxen soll die Pflichtfeldkennzeichnung bei der Beschriftung der Gruppe stehen, sofern ein beliebiges Element der Gruppe ausgewählt werden muss.

MussEN 301 549:
9.3.3.2, 11.3.3.2
199KontrastEine Pflichtfeldkennzeichnung in grafischer Form muss zum Hintergrund ein Kontrastverhältnis von mindestens 3:1 aufweisen. Eine Pflichtfeldkennzeichnung in Textform muss zum Hintergrund ein Kontrastverhältnis von mindestens 4,5:1 aufweisen.MussEN 301 549:
9.1.4.3, 11.1.4.3, 9.1.4.11, 11.1.4.11
200FarbePflichtfelder dürfen nicht ausschließlich über Farbe (z. B. eine abweichende Rahmenfarbe) gekennzeichnet sein.

Hinweis: Farbe kann als zusätzliches Mittel der Pflichtfeldkennzeichnung verwendet werden.

MussEN 301 549:
9.1.4.1, 11.1.4.1

Programmierung/Schnittstellen

Permalink "Programmierung/Schnittstellen"
Nr.EigenschaftBeschreibungKlassifizierungReferenz
201StatusDer Status Pflichtfeld muss an die Accessibility API übermittelt werden (siehe Accessibility API).

Hinweis 1: Die programmatische Pflichtfeldkennzeichnung soll über ein dafür vorgesehenes Attribut der Programmiersprache oder über den textlichen Zusatz im Accessible Name des Formularfeldes (z. B. den Stern) erfolgen. Die redundante programmatische Auszeichnung der Pflichtfelder per Attribut und Zusatz im Accessible Name Beschriftung soll vermieden werden.

Hinweis 2: Ist das Ausfüllen einer Formularfeldgruppe als verpflichtend gekennzeichnet, ohne dass jedes Feld der Gruppe ausgefüllt werden muss, soll die programmatische Pflichtfeldkennzeichnung nur bei der Gruppe und nicht bei jedem Feld erfolgen. In diesem Fall ist darauf zu achten, dass die Pflichtfeldkennzeichnung der Gruppe korrekt an die Accessibility API übermittelt.

MussEN 301 549:
9.1.3.1, 11.1.3.1, 9.3.3.2, 11.3.3.2, 9.4.1.2, 11.4.1.2

Praxistipp Pflichtfeldkennzeichnung

Permalink "Praxistipp Pflichtfeldkennzeichnung"

Pflichtfelder können mit einem entsprechenden textlichen Zusatz, wie z. B. „Pflichtfeld“ oder „erforderlich“ gekennzeichnet werden. Wenn die Mehrzahl der Felder Pflichtfelder sind, können alternativ auch die Felder, die nicht ausgefüllt werden müssen, gekennzeichnet werden, z. B. mit „optional“.

Die Pflichtfelder können auch mit einem Symbol gekennzeichnet werden. Etabliert hat sich dafür der Stern („*“), bei dem zumindest bei Fachanwendungen davon ausgegangen werden kann, dass er allen Nutzenden bekannt ist. Wird ein anderes Zeichen verwendet, so sollte dessen Bedeutung am Formularbeginn erläutert werden.

Praxistipp programmatische Kennzeichnung von Pflichtfeldern in Web-Anwendungen

Permalink "Praxistipp programmatische Kennzeichnung von Pflichtfeldern in Web-Anwendungen"

Screenreader-Ausgabe

Permalink "Screenreader-Ausgabe"
  • JAWS: erforderlich ungültiger Eintrag | erforderlich [nach der Rolle und vor dem Wert]
  • NVDA: erforderlich ungültiger Eintrag | erforderlich [nach der Rolle und vor dem Wert]
  • Windows Sprachausgabe: erforderlich ungültig | erforderlich [nach dem Wert]

Hinweis: Ein nicht-ausgefülltes Pflichtfeld, welches mit required ausgezeichnet wurde, befindet sich aufgrund der HTML-Spezifikation im Status fehlerhaft und wird deshalb von den Screenreadern als „ungültiger Eintrag“ bzw. „ungültig“ ausgegeben. Das Problem tritt bei Verwendung von aria-required nicht auf.

HTML

Permalink "HTML"

Pflichtfelder können mit dem required-Attribut ausgezeichnet werden.

  • Formularfelder, die mit required ausgezeichnet wurden, werden automatisch durch den Browser validiert und befinden sich im fehlerhaften Zustand, wenn sie nicht ausgefüllt wurden.
  • Formularfelder, die mit required ausgezeichnet wurden, sind visuell nicht automatisch als Pflichtfelder erkennbar. Sie besitzen allerdings einen Tooltip (z. B. „Bitte füllen Sie dieses Feld aus“), der jedoch für Tastaturnutzende und mit dem Screenreader nicht wahrnehmbar ist, da er nur beim Mouseover eingeblendet wird.
  • Ein Formular mit nicht ausgefüllten Pflichtfeldern kann standardmäßig nicht abgesendet werden. Stattdessen wird der Fokus in das erste fehlerhafte Feld gesetzt und der Tooltip als Fehlermeldung eingeblendet und vom Screenreader als Warnmeldung ausgegeben (analog zu role=alert). Diese Fehlermeldungen sind aus folgenden Gründen nicht barrierefrei:
    • Beim Verlassen des Feldes wird die Fehlermeldung automatisch ausgeblendet und kann nicht erneut eingeblendet werden.
    • Bei vielen Browsern werden die Fehlermeldungen nach wenigen Sekunden automatisch ausgeblendet, selbst wenn der Fokus im Feld verbleibt (z. B. bei Chrome und Edge).
    • Die Fehlermeldung wird nur beim ersten fehlerhaften Feld angezeigt. Weitere nicht ausgefüllte Pflichtfelder sind nicht als fehlerhaft zu erkennen.

Deshalb sollte bei Verwendung von required Folgendes beachtet werden:

  • Die Pflichtfelder müssen auch visuell als solche gekennzeichnet werden.
  • Die visuelle Pflichtfeldkennzeichnung sollte so ausgezeichnet werden, dass sie nicht vom Screenreader ausgegeben wird, um die redundante Ausgabe zu vermeiden.
  • Die Anwendung sollte eigene Fehlermeldungen bei allen nicht ausgefüllten Pflichtfeldern dauerhaft anzeigen.

Hinweis: Im Praxistipp zu Radiobuttons und Checkboxen sind Besonderheiten bezüglich deren Auszeichnung als Pflichtfelder erläutert.

Weitere Informationen 4.10.5.3.4 The required attribute - HTML Standard (whatwg.org)

ARIA

Permalink "ARIA"

Pflichtfelder können mit dem Attribut aria-required=true ausgezeichnet werden.

  • Formularfelder, die mit aria-required=true ausgezeichnet wurden, werden nicht automatisch durch den Browser validiert und befinden sich nicht im fehlerhaften Zustand, wenn sie nicht ausgefüllt wurden. Der fehlerhafte Zustand kann mit aria-invalid=true übermittelt werden.
  • Formularfelder, die mit aria-required=true ausgezeichnet wurden, sind visuell nicht automatisch als Pflichtfelder erkennbar.

Weitere Informationen: aria-required property - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org)

Informationen zu diesem Artikel

Datum:
5.10.2023
Lizenz:
CC-BY-SA 4.0
Version:
0.5

Gerne können Sie uns Feedback per E-Mail zu unserer Handreichung senden!