Barrierefreie IBAN-Eingabefelder
Das Mini-Widget von embed.js verknüpft jedes Eingabefeld über ein echtes label/for-Paar, setzt sichtbare Fokusstile und begrenzt die Eingabelänge über maxlength. Das Ergebnisfeld ist aktuell nicht als aria-live-Region ausgezeichnet.
| label/for-Verknüpfung | vorhanden |
|---|---|
| Sichtbarer Fokusstil | vorhanden |
| aria-live auf dem Ergebnisfeld | nicht vorhanden (Stand dieser Prüfung) |
Das per data-iban-rechner eingebundene Mini-Widget aus embed.js erzeugt für jedes Eingabefeld ein echtes, über for/id verknüpftes <label>-Element – etwa „Bankleitzahl" für das BLZ-Feld und „Kontonummer" für das Kontonummernfeld –, statt sich allein auf einen Platzhaltertext zu verlassen. Die Eingabefelder sind zusätzlich über maxlength (8 Zeichen für die Bankleitzahl, 10 für die Kontonummer) und inputmode="numeric" begrenzt beziehungsweise für numerische Eingabe optimiert.
Für die Tastaturbedienung setzt das mitgelieferte CSS einen sichtbaren Fokusstil (Rahmenfarbe plus Schattenring) sowohl für die Eingabefelder als auch für den Herkunftshinweis-Link, und unterstützt zusätzlich das dunkle Farbschema über prefers-color-scheme.
Ein Punkt zur ehrlichen Einordnung: Das Ergebnisfeld, in dem der Validierungs- oder Suchtreffer angezeigt wird, ist im aktuellen Code nicht zusätzlich mit einem aria-live-Attribut ausgezeichnet. Bei Nutzung von Screenreadern wird eine nach der Eingabe erscheinende Erfolgs- oder Fehlermeldung dadurch nicht automatisch vorgelesen, sondern muss vom Nutzer aktiv aufgesucht werden. Wer dieses Widget einbindet und eine automatische Ansage benötigt, sollte das Ergebnisfeld in einer eigenen Integration entsprechend ergänzen.
Passende Tools
- IBAN-Rechner – Kostenloser IBAN-Rechner: IBAN prüfen, aus BLZ und Kontonummer berechnen, Bank per BIC-Suche finden.
Häufige Fragen
Nicht automatisch – das Ergebnisfeld ist aktuell nicht als aria-live-Region ausgezeichnet.
Quellen
Repository-Quelle: public/iban-core.js, public/embed.js, public/embed-branded.js, public/widget.html, public/api.html, routes/api.js, server.js (Stand dieser Sitzung, live gegen den tatsaechlichen Code geprueft).