🐞 Bug: Alternativtexte von "Fehler-Icons" werden im Firefox nicht vorgelesen/erkannt.

AntnSaj commented 4 days ago

Link to the code that reproduces this issue:

Can you categorise where the error occurs?

Which browser or operating system do you used to test KoliBri?

Firefox 128.3.1esr (64-Bit) ChromeVersion 130.0.6723.59 (Offizieller Build) (64-Bit)

How to reproduce issue?

Mit einem Screenreader im Formularmodus zu den Eingabefeldern navigieren, die eine Fehlermeldung haben

Current vs. Expected:

Im Chrome wird anstelle des "Fehlericons" (Großes X in einem Kreis) das Wort "Error" ausgegeben, wie im nachfolgenden Screenshot zu erkennen ist. 2024-11-18_10h14_41 Bei Betrachtung im Firefox wird dieser Text nicht ausgegeben (Siehe nachfolgender Screenshot). 2024-11-18_10h15_25 Dieses Verhalten Tritt sowohl mit Jaws als auch NVDA auf.

Environment informations:

https://public-ui.github.io/v2/sample-react/#/input-number/basic

deleonio commented 3 hours ago

@AntnSaj: Wenn es in einem Browser geht, dann ist die Wahrscheinlichkeit, dass die Implementierung korrekt ist, hoch. Hier handelt es sich offensichtlich um eine Browser-spezifische Schwäche, bei der Weitergabe des Accessibility-Trees.

deleonio commented 3 hours ago

Statement: Firefox liest `aria-label` nicht vor

Firefox hat derzeit bekannte Einschränkungen bei der Unterstützung von aria-label in bestimmten Kontexten. Im vorliegenden Beispiel wird das aria-label für das Icon (<i aria-label="Error">) nicht korrekt vorgelesen. Dies kann daran liegen, dass Firefox für SVG- oder dekorative Icons in Kombination mit ARIA-Attributen nicht konsistent arbeitet.

Hintergrund:

Technische Ursache: Firefox setzt in einigen Fällen den Fokus nicht korrekt auf Elemente mit aria-label, insbesondere wenn diese als role="img" oder in verschachtelten Strukturen eingebettet sind.
Workaround: Alternativ könnten andere ARIA-Attribute, wie aria-labelledby oder eine explizitere Fokushandhabung, ausprobiert werden. Auch die Verwendung eines visually hidden Textes direkt in der Nähe des interaktiven Elements könnte die Barrierefreiheit erhöhen.

Empfehlung:

Überprüfung auf anderen Browsern: Testen Sie das Verhalten in Chrome, Edge oder Safari, um sicherzustellen, dass das Problem spezifisch für Firefox ist.
Zusätzliche Tests mit Screenreadern: Verifizieren Sie das Verhalten mit JAWS, NVDA oder VoiceOver, um die Auswirkungen auf Benutzer zu verstehen.
Fallbacks: Erwägen Sie die Verwendung eines textuellen Feedbacks oder alternativer ARIA-Strategien, um die Barrierefreiheit zu gewährleisten.

Dieses Problem sollte weiter evaluiert und ggf. als Bug an Mozilla gemeldet werden.

deleonio commented 3 hours ago

aria-labelled-by ist leider auch keine Lösung

deleonio commented 3 hours ago

aria-label am kol-icon

public-ui / kolibri