Die Komponente wird im Verlauf des Registrierungsprozesses benötigt, damit Nutzende den ihnen zugesandten acht- oder zwölfstelligen Code als zusätzlichen Authentifizierungsfaktor eingeben können.
Interaction Design
Die erlaubten alphanumerischen Eingaben können händisch nacheinander oder per Kopieren und Einfügen z. B. aus einer SMS getätigt werden. Betriebssysteme wie iOS oder Android stellen hierfür entsprechende APIs bereit.
Bei geteilten Eingabefeldern wird nach dem erfolgreichen Ausfüllen eines Feldes solange der Fokus in das darauffolgende Feld gesetzt, bis das Ende der möglichen Eingaben erreicht ist; bei fehlerhaften Eingaben verbleibt der Fokus im betroffenen Feld.
Der Versuch, fehlerhafte Eingaben abzuschicken führt zu einem entsprechenden Fehlerhinweis.
Do’s and Dont’s
So:
Idealerweise als einzelnen, isolierten Schritt im Prozess abbilden
So nicht:
Copy & Paste unterbinden
Design
Typografie
Typografische Elemente der Eingabefelder
Spalte 1 enthält die Ziffern aus der Abbildung zu den nach Elementen gruppierten Regeln in Spalten 2 bis 4.
Die Felder, die den Verifizierungscode bilden benötigen jeweils eine eigene Beschriftung (sog. „Accessible Name“) in Form von visuell versteckten <label>-Elementen oder aria-label-Attributen.
Eine clientseitige Plausibilitätsprüfung wird über den regulären Ausdruck pattern="^[a-zA-Z0-9]*$" bei gleichzeitiger Verwendung des required-Attributs erreicht.
WAI-ARIA
Formularelemente müssen zwingend über das aria-describedby-Attribut mit den dazugehörigen Info- und Fehler-Texten verknüpft sein. Bitte beachten Sie, dass Screenreader hier typischerweise die Reihenfolge der IDs berücksichtigen und verknüpfte Texte dementsprechend in der Sortierung der IDs vorlesen, d. h. diese muss der visuellen und logischen Reihenfolge der Oberfläche entsprechen.
Sofern kein <fieldset> mit einer sprechenden Legende verwendet werden kann, muss die Gruppe an ihrem Elternelement über die ARIA-Rolle role="group" zusammengefasst werden.
JavaScript
Für die Verifizierung muss die Datei verificationCode.js oder main.min.js eingebunden sein.
Inputfelder des Verifizierungscodes mit Komponentenvalidierung, 16-stellig
<divclass="ds-verification-code"data-desy-verificationcode> <fieldsetclass="d-inline-flex verification-code__wrapper"data-desy-verificationcode-fieldsetdata-desy-verificationcode-validation="true"aria-describedby="code-verification-1-info"> <legendclass="visually-hidden">Verifizierungscode</legend> <labelfor="code-verification-1-1"class="form-label visually-hidden">1 von 4</label> <inputtype="text"name="code-verification-1-1"class="form-control verification-code__input"id="code-verification-1-1"data-desy-verificationcode-inputminlength="4"maxlength="4"pattern="^[a-zA-Z0-9]*$"requiredsize="4"placeholder="0000"> <span>-</span> <labelfor="code-verification-1-2"class="form-label visually-hidden">2 von 4</label> <inputtype="text"name="code-verification-1-2"class="form-control verification-code__input"id="code-verification-1-2"data-desy-verificationcode-inputminlength="4"maxlength="4"pattern="^[a-zA-Z0-9]*$"requiredsize="4"placeholder="0000"> <span>-</span> <labelfor="code-verification-1-3"class="form-label visually-hidden">3 von 4</label> <inputtype="text"name="code-verification-1-3"class="form-control verification-code__input"id="code-verification-1-3"data-desy-verificationcode-inputminlength="4"maxlength="4"pattern="^[a-zA-Z0-9]*$"requiredsize="4"placeholder="0000"> <span>-</span> <labelfor="code-verification-1-4"class="form-label visually-hidden">4 von 4</label> <inputtype="text"name="code-verification-1-4"class="form-control verification-code__input"id="code-verification-1-4"data-desy-verificationcode-inputminlength="4"maxlength="4"pattern="^[a-zA-Z0-9]*$"requiredsize="4"placeholder="0000"> </fieldset> <inputtype="hidden"name="code-verification-1"id="code-verification-1"data-desy-verificationcode-input-hidden> <divclass="invalid-feedback"id="code-verification-1-error"data-desy-verificationcode-error-messagerole="alert"> <spanclass="ds-icon-error-circle-filled"aria-hidden="true"></span> <span>Dieser Code ist ungültig. Bitte geben sie den Code vierstellig im alphanumerischen Format ein (z.B. Ab12)</span> </div> <divclass="form-text"id="code-verification-1-info">Hilfetext</div> </div>
Inputfelder des Verifizierungscodes ohne Komponentenvalidierung, 16-stellig
<divclass="ds-verification-code"data-desy-verificationcode> <fieldsetclass="d-inline-flex verification-code__wrapper"data-desy-verificationcode-fieldsetaria-describedby="code-verification-2-info"> <legendclass="visually-hidden">Verifizierungscode</legend> <labelfor="code-verification-2-1"class="form-label visually-hidden">1 von 4</label> <inputtype="text"name="code-verification-2-1"class="form-control verification-code__input"id="code-verification-2-1"data-desy-verificationcode-inputminlength="4"maxlength="4"requiredsize="4"placeholder="0000"> <span>-</span> <labelfor="code-verification-2-2"class="form-label visually-hidden">2 von 4</label> <inputtype="text"name="code-verification-2-2"class="form-control verification-code__input"id="code-verification-2-2"data-desy-verificationcode-inputminlength="4"maxlength="4"requiredsize="4"placeholder="0000"> <span>-</span> <labelfor="code-verification-2-3"class="form-label visually-hidden">3 von 4</label> <inputtype="text"name="code-verification-2-3"class="form-control verification-code__input"id="code-verification-2-3"data-desy-verificationcode-inputminlength="4"maxlength="4"requiredsize="4"placeholder="0000"> <span>-</span> <labelfor="code-verification-2-4"class="form-label visually-hidden">4 von 4</label> <inputtype="text"name="code-verification-2-4"class="form-control verification-code__input"id="code-verification-2-4"data-desy-verificationcode-inputminlength="4"maxlength="4"requiredsize="4"placeholder="0000"> </fieldset> <inputtype="hidden"name="code-verification-2"id="code-verification-2"data-desy-verificationcode-input-hidden> <divclass="form-text"id="code-verification-2-info">Hilfetext</div> </div>
Inputfelder des Verifizierungscodes mit Komponentenvalidierung, 12-stellig
<divclass="ds-verification-code"data-desy-verificationcode> <fieldsetclass="d-inline-flex verification-code__wrapper"data-desy-verificationcode-fieldsetdata-desy-verificationcode-validation="true"aria-describedby="code-verification-3-info"> <legendclass="visually-hidden">Verifizierungscode</legend> <labelfor="code-verification-3-1"class="form-label visually-hidden">1 von 3</label> <inputtype="text"name="code-verification-3-1"class="form-control verification-code__input"id="code-verification-3-1"data-desy-verificationcode-inputminlength="4"maxlength="4"pattern="^[a-zA-Z0-9]*$"requiredsize="4"placeholder="0000"> <span>-</span> <labelfor="code-verification-3-2"class="form-label visually-hidden">2 von 3</label> <inputtype="text"name="code-verification-3-2"class="form-control verification-code__input"id="code-verification-3-2"data-desy-verificationcode-inputminlength="4"maxlength="4"pattern="^[a-zA-Z0-9]*$"requiredsize="4"placeholder="0000"> <span>-</span> <labelfor="code-verification-3-3"class="form-label visually-hidden">3 von 3</label> <inputtype="text"name="code-verification-3-3"class="form-control verification-code__input"id="code-verification-3-3"data-desy-verificationcode-inputminlength="4"maxlength="4"pattern="^[a-zA-Z0-9]*$"requiredsize="4"placeholder="0000"> </fieldset> <inputtype="hidden"name="code-verification-3"id="code-verification-3"data-desy-verificationcode-input-hidden> <divclass="invalid-feedback"id="code-verification-3-error"data-desy-verificationcode-error-messagerole="alert"> <spanclass="ds-icon-error-circle-filled"aria-hidden="true"></span> <span>Dieser Code ist ungültig. Bitte geben sie den Code vierstellig im alphanumerischen Format ein (z.B. Ab12)</span> </div> <divclass="form-text"id="code-verification-3-info">Hilfetext</div> </div>
Barrierefreiheit
Es bietet sich an, die Felder in ein gruppierendes Element zu setzen. Dies kann ein Fieldset mit einer entsprechend getexteten sichtbaren Legend sein; sollte dies aus Platzgründen nicht möglich sein, so kann hier auch role="group" an einem Eltern-Element mit weiterhin sichtbarer Beschriftung in Form einer Zwischenüberschrift vergeben werden.
Von der Verwendung dieses Attributs zur automatischen Fokussierung von Formularelementen durch den Browser wird in den meisten Anwendungsfällen abgeraten. Begründete Ausnahmen kann es in Fällen geben, wenn eine Maske mit hoher Wahrscheinlichkeit genau diesen einen Zweck verfolgt, wie dies zum Beispiel bei der Eingabe eines Verifizierungscodes der Fall sein kann.
accesskey
Das accesskey-Attribut darf in öffentlich zugänglichen Anwendungen nicht verwendet werden, da es signifikante Probleme in der Barrierefreiheit hervorruft. Weitere Informationen dazu finden Sie bei MDN accesskey.
tabindex
Das tabindex-Attribut darf nicht mit positiven Werten verwendet werden, sondern nur zum Fokusmanagement oder zur Herstellung der Tastaturbedienbarkeit von nicht auf Standardelementen basierten Widgets (tabindex="0" oder tabindex="-1"). Weitere Informationen dazu finden Sie bei MDN tabindex.
minlength / maxlength
Bei Feldern mit Mengenbegrenzung verfügen Screenreader über eigene Methoden, um das Erreichen des Maximums auszugeben. Weitere ARIA-Attribute sind hier also unnötig, da diese eine unnötige Dopplung darstellen und schlimmstenfalls mit den Screenreader-eigenen Methoden kollidieren würden.
Testhinweise & Akzeptanzkriterien
Name:
Attribute for="$IDREF" sind an den visuell versteckten Labels vergeben und zeigen auf das korrekte Formularelement mit der entsprechenden ID.
Rolle:
Wird in den Screenreadern JAWS, NVDA und VoiceOver als „Eingabefeld“ identifiziert. Ein umgebendes Eltern-Element identifiziert sich als Gruppe.
Fokus:
Erhält einen deutlich sichtbaren Fokus bei Tastaturbedienung bzw. Swipe auf Touch-UIs. Bei manueller Eingabe wird der Fokus nach Eingabe in das nächste Eingabefeld gesetzt.
Tastatur- & Maus-Bedienung:
Gemeinsam mit dem zugeordneten Label, fokussiert wird immer das Formularelement, nicht das Label. Das dem Label zugeordnete Formularelement reagiert grundsätzlich nur auf die Standard-Tasten bzw. -Tastenkombinationen der jeweiligen Betriebssysteme. Kopieren und Einfügen darf bei diesem Muster nicht per JavaScript unterbunden werden.
Sprachbedienung:
Der Sprachbefehl mit dem sichtbaren Label-Text fokussiert das zugeordnete Formularelement.
Darstellung:
Der Schriftgrad kann Browser- oder Systemseitig um bis zu 200 % vergrößert werden, ohne dass Informationen verloren gehen. Bis zu 400 % müssen Inhalte so umbrechen, dass sie ohne horizontales Scrollen verfügbar sind.
