search

public-ui / kolibri

The accessible HTML-Standard
https://public-ui.github.io
European Union Public License 1.2
151 stars 33 forks source link

🐞 Bug: Problematische Navigation mit Screenreader im Tree #6451

Closed laske185 closed 1 month ago

laske185 commented 3 months ago

Fehlermeldung

Beschreibung des Fehlers

Beim Testen der Tree-Komponente wurden folgende Probleme festgestellt:

  1. Beim Fokussieren der Tree-Komponente wechselt der Screenreader nicht in den Formularmodus. Daher funktioniert die Navigation nur mit alt+Pfeiltasten.
  2. Beim Navigieren mit alt+Pfeiltasten sind nicht alle Elemente der Tree-Komponente erreichbar, und der Nutzer wird oft an den Anfang zurückgesetzt.
  3. Zudem ist für den Screenreader-Nutzer nicht ersichtlich, auf welcher Ebene er sich befindet und welcher Eintrag offen bzw. geschlossen ist.

Diese Probleme beeinträchtigen die Nutzbarkeit der Tree-Komponente für Screenreader-Nutzer erheblich.

Reproduktion

  1. Die Tree-Komponente mit einem Screenreader fokussieren.
  2. Versuchen durch die Tree-Komponente mit den Standard-Navigationsmethoden und den alt+Pfeiltasten zu navigieren.

Erwartetes Verhalten

Aktuelles Verhalten

Zusätzlicher Kontext

Folgendes ist uns beim testen der Tree Komponente aufgefallen: Beim fokussieren der tree Komponente wechselt der Screenreader nicht in den Formularmodus. Daher funktioniert die Navigation nur mit alt+Pfeiltasten. Beim navigieren mit alt+Pfeiltasten komme ich nicht an alle Elemente von der Tree Komponente und werde oft zurück an den Anfang gesetzt.

Weiterhin ist für den Screenreader Nutzenden nicht zu erkennen auf welcher Ebene sich dieser befindet und welcher Eintrag offen bzw. geschlossen ist.

Originally posted by @AntnSaj in #6160

deleonio commented 1 month ago

Bitte noch einmal mit der neusten Version nach testen: https://develop--kolibri-public-ui.netlify.app/

fohi17 commented 1 month ago

---------- A11y-Test ------------ Die oben genannten Probleme mit der Baumstruktur sind gelöst:

ABER meiner Meinung nach ist die Beschriftung noch falsch:

Das ist a) falschrum und b) irreführend, da es keine Vorschläge sind.

@deleonio Aus meiner Sicht sollte die zusätzliche Beschriftung entfernt werden. Stattdessen sollten die geschlossenen Einträge ein aria-expanded="false" bekommen. Dann wird übers aria jeweils der Status ausgegeben. Kann man mal diskutieren : )

deleonio commented 1 month ago

FYI @sdvg

sdvg commented 1 month ago

Danke für das Feedback @fohi17!

Ich habe die Änderungen genau wie vorgeschlagen umgesetzt: aria-expanded wird jetzt auch gesetzt, wenn es false ist. Das aria-label habe ich entfernt.

Könntest du noch einmal auf das Test-Deployment schauen, ob jetzt alles passt? https://github.com/public-ui/kolibri/pull/6673#issuecomment-2252821174

fohi17 commented 1 month ago

@sdvg Für die Ein- und Ausklappbaren Einträge klingt es für mich jetzt sehr gut. Allerding werden jetzt auch die Einträge ohne Untermenü (z.B. Home) als "eingeklappt" ausgegeben. Kann man das noch unterscheiden? Ist sonst verwirrend wenn man das gar nicht ausklappen kann. Sorry, so weit hab ich nicht gedacht.

sdvg commented 1 month ago

@fohi17 Da hätte ich auch mal dran denken können :)

aria-expanded wird jetzt nur noch bei den Links mit Kinderelementen gesetzt.

fohi17 commented 1 month ago

Wunderbar : ) ---------- A11y-Test erfolgreich ------------