Verifizierungscode

Verwendung

Die Komponente wird im Verlauf des Registrierungsprozesses benötigt, damit Nutzende den ihnen zugesandten 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 Schnittstellen 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 wird der Rahmen rot eingefärbt.

Der Versuch, fehlerhafte Eingaben abzuschicken führt zu einem entsprechenden Fehlerhinweis.

Do’s and Don’ts

So:

Idealerweise als einzelnen, isolierten Schritt im Prozess abbilden

So nicht:

Copy & Paste unterbinden

Design

Typografie

Visualisierung der CSS-Regeln zu Ziffer 1 bis 4 aus der folgenden Tabelle. — Typografische Elemente der Eingabefelder

Spalte 1 enthält die Ziffern aus der Abbildung zu den nach Elementen gruppierten Regeln in Spalten 2 bis 4.
	Objekt	Eigenschaft	Wert
1	Element: Label
	Schriftart	`font`	`BundesSans`
	Schriftgrad	`font-size`	`1rem`
	Zeilenhöhe	`line-height`	`1.25`
	Schriftschnitt	`font-weight`	`700`
	Schriftfarbe	`color`	`#1F3347`
2	Element: Eingabetext
	Schriftart	`font`	`BundesSans`
	Schriftgrad	`font-size`	`1.2rem`
	Zeilenhöhe	`line-height`	`1.25`
	Schriftschnitt	`font-weight`	`400`
	Schriftfarbe	`color`	`#1F3347`
3	Element: Hilfetext
	Schriftart	`font`	`BundesSans`
	Schriftgrad	`font-size`	`.9rem`
	Zeilenhöhe	`line-height`	`1.25`
	Schriftschnitt	`font-weight`	`400`
	Schriftfarbe	`color`	`#596877`
4	Element: Bindestrich
	Schriftart	`font`	`BundesSans`
	Schriftgrad	`font-size`	`1.2rem`
	Zeilenhöhe	`line-height`	`1.25`
	Schriftschnitt	`font-weight`	`400`
	Schriftfarbe	`color`	`#1F3347`

Abstände

Über alle Breakpoints

Visualisierung der CSS-Regeln zu Ziffer 5 bis 8 aus der folgenden Tabelle. — Dimensionen der Eingabefelder

Spalte 1 enthält die Ziffern aus der Abbildung zu den nach Elementen gruppierten Regeln in Spalten 2 bis 4.
	Objekt	Eigenschaft	Wert
5	Element: Label
5	Außenabstand	`margin`	`0 0 .25rem 0`
6	Element: Hilfe- und Fehlertext (Microcopy)
6	Außenabstand	`margin`	`.25rem 0 0 0`
7	Element: Textfeld
7	Eingebettete Komponente: Input Text. Besonderheit: Der Text im Eingabefeld ist etwas größer (1.2rem).
8	Element: Bindestrich
8	Innenabstand	`padding`	`.5rem`

Zustände

Visualisierung der CSS-Regeln zu Ziffer 9 bis 17 aus der folgenden Tabelle.

Spalte 1 enthält die Ziffern aus der Abbildung zu den nach Elementen gruppierten Regeln in Spalten 2 bis 4.
	Objekt	Eigenschaft	Wert
9	Element: Hover — Textfeld
9	Siehe Komponente: Input Text.
10	Element: Focus — Textfeld
10	Siehe Komponente: Input Text.
11	Element: Active — Textfeld
11	Siehe Komponente: Input Text.
12	Element: readonly — Label
12	Schriftfarbe	`color`	`#596877`
13	Element: readonly — Textfeld
13	Siehe Komponente: Input Text.
14	Element: readonly — Bindestrich
14	Schriftfarbe	`color`	`#596877`
15	Element: Disabled — Label
15	Schriftfarbe	`color`	`#C9CED3`
16	Element: Disabled — Textfeld
16	Siehe Komponente: Input Text.
17	Element: Disabled — Bindestrich
17	Schriftfarbe	`color`	`#C9CED3`

Fehlervalidierung

Visualisierung der CSS-Regeln zu Ziffer 18 aus der folgenden Tabelle.

Spalte 1 enthält die Ziffern aus der Abbildung zu den nach Elementen gruppierten Regeln in Spalten 2 bis 4.
	Objekt	Eigenschaft	Wert
18	Element: Fehlertext
	SVG (Icon)	`src`	`error-circle-filled.svg`
	Schriftgrad (Icon)	`font-size`	`1rem`
	Zeilenhöhe (Icon)	`line-height`	`1.125`
	Abstand	`gap`	`.25rem`
	Schriftfarbe (Fehlertext)	`color`	`#CD1408`
	Außenabstand (Fehlertext)	`margin`	`.25rem 0 0`

Code

HTML

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.

Optional: autocomplete="one-time-code" gibt Browsern weitere Hinweise zum Zweck der Komponente, um diese mit den gewünschten Werten befüllen zu können.

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

<div class="ds-verification-code" data-desy-verificationcode>
  <fieldset class="verification-code__wrapper ds-form-check-group" data-desy-verificationcode-fieldset data-desy-verificationcode-validation="true" aria-describedby="code-verification-1-info">
    <legend class="ds-form-check-group__legend">Verifizierungscode</legend>
    <div class="d-inline-flex align-items-center">
      <label for="code-verification-1-1" class="form-label visually-hidden">1 von 4</label>
      <input type="text" name="code-verification-1-1" class="form-control verification-code__input" id="code-verification-1-1" data-desy-verificationcode-input minlength="4" maxlength="4" pattern="^[a-zA-Z0-9]*$" required size="4" placeholder="0000">
      <span>-</span>
      <label for="code-verification-1-2" class="form-label visually-hidden">2 von 4</label>
      <input type="text" name="code-verification-1-2" class="form-control verification-code__input" id="code-verification-1-2" data-desy-verificationcode-input minlength="4" maxlength="4" pattern="^[a-zA-Z0-9]*$" required size="4" placeholder="0000">
      <span>-</span>
      <label for="code-verification-1-3" class="form-label visually-hidden">3 von 4</label>
      <input type="text" name="code-verification-1-3" class="form-control verification-code__input" id="code-verification-1-3" data-desy-verificationcode-input minlength="4" maxlength="4" pattern="^[a-zA-Z0-9]*$" required size="4" placeholder="0000">
      <span>-</span>
      <label for="code-verification-1-4" class="form-label visually-hidden">4 von 4</label>
      <input type="text" name="code-verification-1-4" class="form-control verification-code__input" id="code-verification-1-4" data-desy-verificationcode-input minlength="4" maxlength="4" pattern="^[a-zA-Z0-9]*$" required size="4" placeholder="0000">
    </div>
  </fieldset>
  <input type="hidden" name="code-verification-1" id="code-verification-1" data-desy-verificationcode-input-hidden>
  <div class="invalid-feedback" id="code-verification-1-error" data-desy-verificationcode-error-message role="alert">
    <span class="ds-icon-error-circle-filled" aria-hidden="true"  ></span>
    <span>Dieser Code ist ungültig. Bitte geben sie den 16-stelligen Code im alphanumerischen Format ein (z. B. Ab12…)</span>
  </div>
  <div class="form-text" id="code-verification-1-info">Hilfetext</div>
</div>

Inputfelder des Verifizierungscodes ohne Komponentenvalidierung, 16-stellig

<div class="ds-verification-code" data-desy-verificationcode>
  <fieldset class="verification-code__wrapper ds-form-check-group" data-desy-verificationcode-fieldset aria-describedby="code-verification-2-info">
    <legend class="ds-form-check-group__legend">Verifizierungscode</legend>
    <div class="d-inline-flex align-items-center">
      <label for="code-verification-2-1" class="form-label visually-hidden">1 von 4</label>
      <input type="text" name="code-verification-2-1" class="form-control verification-code__input" id="code-verification-2-1" data-desy-verificationcode-input minlength="4" maxlength="4" required size="4" placeholder="0000">
      <span>-</span>
      <label for="code-verification-2-2" class="form-label visually-hidden">2 von 4</label>
      <input type="text" name="code-verification-2-2" class="form-control verification-code__input" id="code-verification-2-2" data-desy-verificationcode-input minlength="4" maxlength="4" required size="4" placeholder="0000">
      <span>-</span>
      <label for="code-verification-2-3" class="form-label visually-hidden">3 von 4</label>
      <input type="text" name="code-verification-2-3" class="form-control verification-code__input" id="code-verification-2-3" data-desy-verificationcode-input minlength="4" maxlength="4" required size="4" placeholder="0000">
      <span>-</span>
      <label for="code-verification-2-4" class="form-label visually-hidden">4 von 4</label>
      <input type="text" name="code-verification-2-4" class="form-control verification-code__input" id="code-verification-2-4" data-desy-verificationcode-input minlength="4" maxlength="4" required size="4" placeholder="0000">
    </div>
  </fieldset>
  <input type="hidden" name="code-verification-2" id="code-verification-2" data-desy-verificationcode-input-hidden>
  <div class="form-text" id="code-verification-2-info">Hilfetext</div>
</div>

Inputfelder des Verifizierungscodes mit Komponentenvalidierung, 12-stellig

<div class="ds-verification-code" data-desy-verificationcode>
  <fieldset class="verification-code__wrapper ds-form-check-group" data-desy-verificationcode-fieldset data-desy-verificationcode-validation="true" aria-describedby="code-verification-3-info">
    <legend class="ds-form-check-group__legend">Verifizierungscode</legend>
    <div class="d-inline-flex align-items-center">
      <label for="code-verification-3-1" class="form-label visually-hidden">1 von 3</label>
      <input type="text" name="code-verification-3-1" class="form-control verification-code__input" id="code-verification-3-1" data-desy-verificationcode-input minlength="4" maxlength="4" pattern="^[a-zA-Z0-9]*$" required size="4" placeholder="0000">
      <span>-</span>
      <label for="code-verification-3-2" class="form-label visually-hidden">2 von 3</label>
      <input type="text" name="code-verification-3-2" class="form-control verification-code__input" id="code-verification-3-2" data-desy-verificationcode-input minlength="4" maxlength="4" pattern="^[a-zA-Z0-9]*$" required size="4" placeholder="0000">
      <span>-</span>
      <label for="code-verification-3-3" class="form-label visually-hidden">3 von 3</label>
      <input type="text" name="code-verification-3-3" class="form-control verification-code__input" id="code-verification-3-3" data-desy-verificationcode-input minlength="4" maxlength="4" pattern="^[a-zA-Z0-9]*$" required size="4" placeholder="0000">
    </div>
  </fieldset>
  <input type="hidden" name="code-verification-3" id="code-verification-3" data-desy-verificationcode-input-hidden>
  <div class="invalid-feedback" id="code-verification-3-error" data-desy-verificationcode-error-message role="alert">
    <span class="ds-icon-error-circle-filled" aria-hidden="true"  ></span>
    <span>Dieser Code ist ungültig. Bitte geben sie den 12-stelligen Code im alphanumerischen Format ein (z. B. Ab12…)</span>
  </div>
  <div class="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.

Relevante BITV-Anforderungen

Bitte beachten Sie, dass es zum Thema Barrierefreie Authentifizierung neue Vorgaben in der aktualisierten WCAG 2.2 gibt, die berücksichtigt werden müssen.

Weitere Attribute

autofocus: 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.