9.3.3.1 Fehlererkennung
Fehlermeldung im Checkout wird nicht angesagt
Betroffen Checkout, Schritt Lieferadresse
Screenshot
Was wir gefunden haben
Bleibt die Postleitzahl leer, erscheint die Fehlermeldung ausschließlich visuell. Sie steht als eigener Absatz neben dem Feld, ohne Verbindung dazu. Nach dem Absenden springt der Fokus zurück an den Seitenanfang.
Fundstelle
src/checkout/AddressForm.vue, Zeile 84
Selektor: #billing_postcode
<label for="plz">PLZ</label>
<input id="plz" name="plz">
<p class="error">Bitte geben Sie eine gültige PLZ ein.</p>
Wer kommt hier nicht weiter
Wer die Seite mit einem Screenreader bedient, bekommt nichts mitgeteilt. Das Formular wirkt, als sei nichts passiert. Ohne fremde Hilfe ist die Bestellung an dieser Stelle beendet. Auch stark vergrößernde Nutzerinnen sehen die Meldung häufig nicht, weil sie außerhalb des sichtbaren Ausschnitts liegt.
Lösungsvorschlag
Meldung mit dem Feld verknüpfen, den Fehlerzustand auszeichnen und den Fokus nach dem Absenden in das erste fehlerhafte Feld setzen.
<label for="plz">PLZ</label>
<input id="plz" name="plz"
aria-invalid="true"
aria-describedby="plz-fehler">
<p class="error" id="plz-fehler">Bitte geben Sie eine gültige PLZ ein.</p>
Umsetzungsaufwand Gering. Betrifft die Formularkomponente, nicht die Architektur. Gilt anschließend für alle Formulare, die sie verwenden.
An dieser Stelle nachgewiesen. Dasselbe Muster tritt erfahrungsgemäß auch an weiteren Stellen der Anwendung auf.