Menü mit details und summary im Screenreader VoiceOver

[Matthias Scharwies]

Servus!

Hej Rolf,

ich habe mir jetzt NVDA installiert.

Zusammen mit FF ist das die Kombination, die auch unter Blinden sehr beliebt ist.

Danke. Wir müssen uns mal mittelfristig überlegen, mit welchen Screenreadern wir unsere Seiten testen und dies auch im SELF-Wiki dokumentieren.

Der liest mir das X ebenfalls vor, das ich mittels list-style-type anzeigen lasse. Und das ist merkwürdig, wieso wird ein list-style-type vorgelesen?!?!?

Na du möchtest das doch - oder zumindest deine Nutzer. Oder sollen die nicht erstens, zweitens, drittens usw ausgegeben bekommen, nur weil sie blind sind.

Es geht hier ja nicht um Listen, sondern um die Gestaltung des Pfeils von summary. Da ist es natürlich blöd, dass dort eben "X" anstelle von "Schließen" vorgelsen wird.

😉

Wieso wird das Hamburgerzeichen nicht vorgelesen? Wie soll man das unterdrücken (außer durch einen leergelassenen list-style-type und ::before Tricksereien)?

Nutz einen sinnvollen Wert. :before wird auch ausgegeben.

😂

In der oberen Variante ohne details wird eben davon abgeraten:

<button>
  Menu
  <span class="close-icon">×</span>
  <span class="burger-icon">☰</span>
</button>

Im Tutorial:

Diese Methode hat '''mehrere''' Nachteile:

• Bildschirmlesegeräte werden diese Symbole mit ihrem Namen vorlesen, was sehr verwirrend ist.
  • ×: menu times, toggle button navigation 1 item
  • ☰: menu trigram for heaven, toggle button navigation 1 item<br> Zumindest sollten sie vor Screenreadern mit dem Attribut [[aria-hidden]] verborgen werden.

Insofern ist ein Menü mit button und JS, das die Interaktivität liefert und mit aria-Attributen den Zustand anzeigt, schon besser.

Es gibt nirgendwo Tutorials oder Diskussionen, die den Einsatz von Details für so ein disclosure widget ablehnen; aber so ganz funzt es bei den Screenreadern wohl noch nicht.

Herzliche Grüße

Matthias Scharwies