Barrierefreiheit: lux-form-control-wrapper

[patrowe]

Wird ein Formcontrol als "requiered" markiert, wird dem Label oberhalb des Inputs ein "*" anghängt. Dieser wird von Screenreadern vorgelesen, hat aber für nicht-sehende Menschen keine Bedeutung und wirkt verwirrend. Daher soll dieses Element markiert werden, damit Screenreader es nicht vorlesen.

Akzeptanzkriterium Der "Required-Stern" hat das attribut aria-hidden erhalten.

[patrowe]

Die Anforderungen wurden umgesetzt

@DSeifer bitte Testen

Test

Vorbedingungen

• Den Branch für die Lux-Components herunterladen und das Demo starten
• Unter Windows den Screenreader NVDA starten
• Unter MacOs Voice-Over starten (Command+F5)

Durchführung

• Die Seite für Lux-Input-ac öffnen
• unter Konfiguration>Allgemein die Property "luxRequired" auf true setzen.
• mit Maus oder Tastatur zu dem obersten Input navigieren und die Ansage anhören

Zu erwartendes Ergebnis

• Hinter dem Label des Inputs wird ein * angezeigt
• Die Ansage des Screenreaders lautet "Label - Eingabefeld - Erforderlich"

[DSeifer]

Unter Windows 10 Enterprise 22H2 (19045.3324) und MacOS 13.5.2 mit den jeweils aktuellen Browserversionen nachgetestet: MacOS: Safari -> Sprachausgabe: 1. Versuch "Label - Stern - Placeholder" 2. Versuch "Label - Placeholder" -> ERR Firefox -> Sprachausgabe: "Label - Stern - erforderlich, Text bearbeiten" -> ERR Chrome -> Sprachausgabe: "Label - Stern - Placeholder" -> ERR

Windows: Edge -> Sprachausgabe: "Hauptsprungmarke - Label - Stern - Eingabefeld - Erforderlich - Das Feld enthält keinen gültigen Wert - Placeholder - leer" -> ERR Chrome -> Sprachausgabe: "Hauptsprungmarke - Label - Stern - Eingabefeld - Erforderlich - Das Feld enthält keinen gültigen Wert - Placeholder - leer" -> ERR Firefox -> Sprachausgabe: "Hauptsprungmarke - Label - Stern - Eingabefeld - Erforderlich - Ungültiger Eintrag - Das Feld enthält keinen gültigen Wert - Placeholder - leer" -> ERR

[patrowe]

Der Fehler wurde gefixt. @DSeifer bitte erneut testen.

[DSeifer]

Unter Windows 10 Enterprise 22H2 (19045.3324) und MacOS 13.5.2 mit den jeweils aktuellen Browserversionen nachgetestet:

Grundsätzlich fällt auf, dass der Text zu luxErrorMessage zunächst als "lorem ipsum ..." angezeigt wird. Erst wenn die Registerkarte "Erweitert" einmal geöffnet wurde, wird der dort hinterlegte Text angezeigt.

MacOS: Safari -> Sprachausgabe: "Label - Placeholder - Text erforderlich" -> OK Firefox -> Sprachausgabe: "Label - erforderlich, Text bearbeiten" -> OK Chrome -> Sprachausgabe: "Label - Placeholder - Text erforderlich" -> OK

Windows: Edge -> Sprachausgabe: "Hauptsprungmarke - Label - Eingabefeld - Erforderlich - Das Feld enthält keinen gültigen Wert - Placeholder - leer" -> OK Chrome -> Sprachausgabe: "Hauptsprungmarke - Label - Eingabefeld - Erforderlich - Das Feld enthält keinen gültigen Wert - Placeholder - leer" -> OK Firefox -> Sprachausgabe: "Hauptsprungmarke - Label - Eingabefeld - Erforderlich - Ungültiger Eintrag - Das Feld enthält keinen gültigen Wert - Placeholder - leer" -> OK