Menü mit details und summary im Screenreader VoiceOver

[Marc]

Hej alle,

ich finde gerade den Wiki-Artikel nicht zu dem Menü mit summary und details, sonst würde ich den hier verlinken. Schickt mir den gerne zu, dann passe ich diesen Beitrag hier an.

Jedenfalls habe ich ein (anderes) vorlesen lassen und ein Video dazu bereit gestellt, da könnt ihr hören, was der Screenreader daraus macht. Ich habe es auch erläutert.

Gerne in den YouTube-Kanal-hochladen, mit Untertiteln versehen und dann den Link unten anpassen.

Video „Menü mit details und summary im Screenreader VoiceOver“

Marc (marctrix)

[JürgenB]

Hallo Marc,

hier der Link: https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/zugängliche_Dropdown-Navigation

Gruß
Jürgen

[Matthias Scharwies]

Servus!

Hallo Marc,

Der ist noch im Test-Wiki: HTML/Tutorials/Navigation/Flyout-Menü

hier der Link: https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/zugängliche_Dropdown-Navigation

Gruß
Jürgen

Herzliche Grüße

Matthias Scharwies

Sind grad auf Rad-Tour und sitzen jetzt im Eiscafé und warten , dass es aufhört zu regnen!

[Der Martin]

Hallo Matthias,

Sind grad auf Rad-Tour und sitzen jetzt im Eiscafé und warten , dass es aufhört zu regnen!

tja, Pech gehabt. 😟
Hier im Remstal ist es bedeckt, aber recht freundlich.

Tipp: Nächstes Mal einen Schirm oder Regenklamotten mitnehmen.
Dann regnet's garantiert nicht.

Einen schönen Tag noch
 Martin

[Matthias Scharwies]

Servus!

Hallo Matthias,

Sind grad auf Rad-Tour und sitzen jetzt im Eiscafé und warten , dass es aufhört zu regnen!

Tipp: Nächstes Mal einen Schirm oder Regenklamotten mitnehmen.
Dann regnet's garantiert nicht.

Wir sind doch Beamte und überfürsorgliche Eltern: Windjacke, Helm, Luftpumpe und Medikit gehören zur Standardausrüstung - es war aber auch nach 5 min vorbei, das Eis hatte länger gedauert. → Hier in Franken regnet es zuwenig.

Bald werden hier noch Regentänze aufgeführt, um die Böden wieder mit Niederschlag zu versorgen.

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Marc,

vielen Dank für die Vorführung meines Fiddles.

Ich habe gerade einmal mit Windows Narrator herumgespielt - der angeblich gaaanz toll sein soll. Aber ich finde, das Teil ist maximal verwirrend. Ich wollte mal so tun, als sei ich blind, und das Einstellungen-Menü des Narrators damit erkunden (was er ja EIGENTLICH perfekt können sollte). Oh Boy…

Jetzt müsste ich also lernen, wie man dieses Menü so gestaltet, dass es mit Sprachausgabe besser zusammenarbeitet. Oder meinst Du, dass das mit details/summary nicht möglich ist?

Welchen Screenreader (als Windows User) könnte ich zum Testen verwenden? NVDA? In Narrator steckt mir zu viel "Narr" und "Tor" drin…

Rolf

[Matthias Scharwies]

Servus!

Hallo Marc,

vielen Dank für die Vorführung meines Fiddles.

Ich habe gerade einmal mit Windows Narrator herumgespielt - der angeblich gaaanz toll sein soll. Aber ich finde, das Teil ist maximal verwirrend. Ich wollte mal so tun, als sei ich blind, und das Einstellungen-Menü des Narrators damit erkunden (was er ja EIGENTLICH perfekt können sollte). Oh Boy…

Jetzt müsste ich also lernen, wie man dieses Menü so gestaltet, dass es mit Sprachausgabe besser zusammenarbeitet. Oder meinst Du, dass das mit details/summary nicht möglich ist?

Welchen Screenreader (als Windows User) könnte ich zum Testen verwenden? NVDA? In Narrator steckt mir zu viel "Narr" und "Tor" drin…

Ich habe diesen Artikel gefunden:

https://www.hassellinclusion.com/blog/accessible-accordions-part-2-using-details-summary/

Dort werden …

• Dragon NaturallySpeaking für Windows, 2019 am besten mit IE11

• JAWS 18 for Windows, auch optimalerweise für IE11, Probleme mit FF64 mittlerweile gibt's ja aber FF99

• NVDA 2018.4 for Windows, am besten mit Firefox

• Voiceover with Safari

• Talkback with Chrome 64 on Android 8

ausprobiert.

Fazit in den Kommentaren: Es funzt mit details, nur :hover auf summary wird nicht erkannt, das habe ich im Tutorial hinzugefügt.

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

ich habe mir jetzt NVDA installiert. 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?!?!? Wieso wird das Hamburgerzeichen nicht vorgelesen? Wie soll man das unterdrücken (außer durch einen leergelassenen list-style-type und ::before Tricksereien)?

Aber ich kann nicht sagen, dass ich mit NVDA zufriedener wäre. Oder ich bin mit meinem beiden Augen zu blöd, um das Ding richtig zu verwenden.

Rolf

[Marc]

Hej Rolf,

ich habe mir jetzt NVDA installiert.

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

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.

😉

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.

😂

Aber ich kann nicht sagen, dass ich mit NVDA zufriedener wäre. Oder ich bin mit meinem beiden Augen zu blöd, um das Ding richtig zu verwenden.

Das ist auch nicht so einfach. Es ist auch nicht wirklich schwierig, aber ein bisschen Einführung wäre sehr sinnvoll…

Marc (marctrix)

[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

[Marc]

Hej Matthias,

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.

Doch, es ist ja richtig, was der Screenreader ausgibt und die Bedienung klappt auch einwandfrei. Nur ist es etwas ungewöhnlich, dass es für ein Menü eine "Zusammenfassung" gibt. Wenn der Text der lautet "Hauptnavigation" und man davon ausgeht (und das darf man), dass Blinde wissen wie man ein Standard-HTML-Element bedient, gibt es rein prüftechnisch keinen Grund abzuwerten.

Es ist nicht "schön", aber es funktioniert durchaus.

Insbesondere die Möglichkeit, das Element mittels ESC-Taste zu schließen, würde ich aber noch mittels JS nachrüsten den Nutzern zu liebe.

Marc (marctrix)

[Matthias Scharwies]

Guten Morgen,

hier das neue Kapitel:

• HTML/Tutorials/Navigation/Flyout-Menü

Ich hatte aus aktuellem Anlass (Interesse eines Ex-Schülers beim Wiki-Workshop; Foren-Diskussion „oben oder unten?“) das Navigations-Tutorial noch mal durchgeschaut und gemerkt, dass wir da eben nix zwischen den CSS-Dropdowns und der Mega-JS-Lösung haben.

Ich wollte ne zugängliche Flyout-Navigation machen. Dabei habe ich entgegen der bisherigen Praxis ein bisschen JS in die HTML-Tutorials eingefügt, um die aria-Attribute entsprechend zu toggeln.

Alternative mit details

Rolf hatte mir folgendes geschrieben:

Grundsätzlich möchte ich die Frage stellen, warum man heutzutage noch das Rad neu erfinden muss. Der IE ist tot, und die heutigen Browser verfügen über das details-Rad. Es gibt natürlich die kleine Schwierigkeit mit dem Dreieck… aber dann stellt sich die Frage nicht, ob man JS hat oder nicht.

Deshalb dies: Flyout-Menü - Alternative:_details

Welche der beiden Varianten jetzt zu bevorzugen ist, würde ich gerne auch wissen und weiter diskutieren.

Herzliche Grüße

Matthias Scharwies

[JürgenB]

Hallo Matthias,

Menüs mit button

• sind bekannt: „das macht man so“,
• benötigen einige Aria-Attribute, da jegliche Semantik fehlt,
• benötigen schon für die Grundfunktionalität „auf- und zuklappen“ Javascript.

Menüs mit details/summary

• sind was Neues,
• benötigen fast keine Aria-Attribute, da das „auf- und zuklappen“ ihre Bestimmung ist,
• benötigen für die Grundfunktionalität kein Javascript.

Beide Varianten benötigen aber einiges an Javascript, um sie wirklich funktionstüchtig zu machen:

• setzen/ändern der benötigten Aria-Attribute,
• Schließen bei ESC,
• Schließen beim Verlassen mit Tabulator, Klick oder Touch außerhalb.

Manche fordern auch noch eine Bedienung mit den Pfeiltasten, andere meinen, das benötigt man nur bei Bedienmenüs, nicht bei Navigationsmenüs.

Wenn die Symbole vor den Schaltflächen vorgelesen werden wären da nichtlesbare UTF-8-Zeichen eine Option?

Diese Variante im Wiki funktioniert nur deswegen nicht richtig ohne Javascript, weil ich hier noch den IE11 und den alten MS-Edge unterstütze. Wenn die beiden ignoriert werden können, kann da noch etwas vereinfacht werden.

Gruß
Jürgen

[Rolf B]

Hallo Jürgen und die anderen,

was ich mich nun eigentlich frage und was ich aus Marcs Antworten noch nicht so ganz klar herauslese: Ist es zielführend und sinnvoll, den Code in meinem Fiddle weiterzuentwickeln und als Vorschlag ins Wiki zu bringen? Kann man durch geeignete Ergänzung mit aria-Attributen^[1] die Merkwürdigkeiten in der auralen Bedienung beheben?

Oder ist das ein Irrweg, und man sollte bei dem "bewährten" Konzept mit einem Button bleiben? Die Menge auraler Quirks von Jürgens details-Menü hat - glaube ich - auch noch keiner überprüft.

Rolf

---

1. Nein, Ariafizierung oder Ariasierung sind keine guten Wörter dafür ↩︎

[JürgenB]

Hallo Rolf,

… Die Menge auraler Quirks von Jürgens details-Menü hat - glaube ich - auch noch keiner überprüft.

Vielleicht kann ja @Marc noch mal meine Version durch VoiceOver laufen lassen. Ich habe es mal ausprobiert, aber ohne Einarbeiten komme ich mit VoiceOver nicht klar. Für das „X“ und das Hamburgermenü-Zeichen habe ich UTF-8-Zeichen genommen, die sollten eigentlich nicht vorgelesen werden.

Aber bevor du etwas Neues bastelst, vielleicht ist es ja einfacher, meine Version zu verkleinern. Drei Ebenen müssen für den Anfang nicht sein, und auf den Details-Polyfill kann man in einem Anfängertutorial auch verzichten. Schließen bei ESC und Klick/Touch außerhalb des Menüs sollte aber schon rein. Denn unsere Tutorials werden oft direkt übernommen.

Gruß
Jürgen

[Matthias Scharwies]

Servus!

Hallo Rolf,

… Die Menge auraler Quirks von Jürgens details-Menü hat - glaube ich - auch noch keiner überprüft.

Vielleicht kann ja @Marc noch mal meine Version durch VoiceOver laufen lassen. Ich habe es mal ausprobiert, aber ohne Einarbeiten komme ich mit VoiceOver nicht klar. Für das „X“ und das Hamburgermenü-Zeichen habe ich UTF-8-Zeichen genommen, die sollten eigentlich nicht vorgelesen werden.

Aber bevor du etwas Neues bastelst, vielleicht ist es ja einfacher, meine Version zu verkleinern. Drei Ebenen müssen für den Anfang nicht sein, und auf den Details-Polyfill kann man in einem Anfängertutorial auch verzichten.

Bis zum 15.06. sind es noch sechs Wochen! Yeah!

Schließen bei ESC und Klick/Touch außerhalb des Menüs sollte aber schon rein. Denn unsere Tutorials werden oft direkt übernommen.

Gruß
Jürgen

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

verdammt - ich war überzeugt, ich hätte das gestern gepostet. Aber der Beitrag ist nicht da. Vermutlich ruht er noch im localStorage meines Heim PCs, an dem ich jetzt nicht sitze.

Ich habe die details Version nochmal bearbeitet und eine Videopräsentation dazu gemacht. Das ist kein Tutorial, es ist auch nicht kein Video für den Self-Channel, es soll nur für die Diskussion sein. Und es soll auch nicht final sein - Marcs Kommentare in seinem Video konnte man so verstehen, als habe er das so aufgefasst.

Um Flyout-Menüs im Selfchannel zu präsentieren, muss man noch was tun. Und man bräuchte ggf. Snippets von mehreren Screenreadern, um die Unterschiede vorzustellen. Dafür müsste nam dann erst ein Script vorbereiten, an Hand dessen man mit dem Screenreader durch das Menü geht.

https://youtu.be/XwwRMFAFteA

Eine Untersuchung der Button-Lösung mit NVDA habe ich auch noch nicht gemacht, das kommt heute abend.

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

verdammt - ich war überzeugt, ich hätte das gestern gepostet. Aber der Beitrag ist nicht da. Vermutlich ruht er noch im localStorage meines Heim PCs, an dem ich jetzt nicht sitze.

Mir auch schon passiert! ;-)

Ich habe die details Version nochmal bearbeitet und eine Videopräsentation dazu gemacht. Das ist kein Tutorial, es ist auch nicht kein Video für den Self-Channel, es soll nur für die Diskussion sein. Und es soll auch nicht final sein - Marcs Kommentare in seinem Video konnte man so verstehen, als habe er das so aufgefasst.

Um Flyout-Menüs im Selfchannel zu präsentieren, muss man noch was tun. Und man bräuchte ggf. Snippets von mehreren Screenreadern, um die Unterschiede vorzustellen. Dafür müsste nam dann erst ein Script vorbereiten, an Hand dessen man mit dem Screenreader durch das Menü geht.

https://youtu.be/XwwRMFAFteA

Eine Untersuchung der Button-Lösung mit NVDA habe ich auch noch nicht gemacht, das kommt heute abend.

Ich werde (Ende der Woche) die details-Lösung im SELFWiki mit ein bisschen JS aufpeppen.

Problem: unterschiedliche Erwartungen.

Erwartung 1: Aufklapp-Elemente werden mit [ESC] oder einem Klick auf die Seite außerhalb beendet.

Erwartung 2: Blinde öffnen die details-Box, kennen kein [Esc] und würden von einer durch einen Klick geschlossenen Box verwirrt, da sie dies nicht erwarten.

Ich werde auf jeden Fall das mit [ESC] implementieren und evtl. versuchen, die Symbole anstelle mit list-style mit SVG zu realisieren. Evtl wird dann das Vorlesen besser!

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

list-style-type: url(...) gibt es nicht. Wenn Du SVG verwenden willst, musst Du es ähnlich machen wie ich.

Mit einem SVG könnte man aber auch das Hintergrundbild des Summary-Elements setzen - man müsste es dann nur als display: block definieren und die Größe festlegen.

Die Version, die ich im Video zeige, ist noch nirgends online; das hole ich noch nach.

Rolf

[Marc]

Hej Matthias,

Problem: unterschiedliche Erwartungen.

Erwartung 2: Blinde öffnen die details-Box, kennen kein [Esc] und würden von einer durch einen Klick geschlossenen Box verwirrt, da sie dies nicht erwarten.

Das geht ja auf meine Kappe. Ich habe mich da geirrt. Meine Annahme: wenn man über den letzten Link hinaus tabbt und später zurück zum Menü will, wundert man sich womöglich, wo die Links hin sind, die man vorher geöffnet hatte.

Wenn ich die Vorführung so sehe merke ich: das war Quatsch. Man landet dann ja auf dem Button und bekommt "reduziert" angesagt. Das kapiert man.

Marc (marctrix)

[Marc]

Hej JürgenB,

Vielleicht kann ja @Marc noch mal meine Version durch VoiceOver laufen lassen.

Ist das diese hier:

https://wiki.selfhtml.org/extensions/Selfhtml/frickl.php/Beispiel:CSS_Menüs9.html#view_result

Wie öffne ich die Unterebenen mit der Tastatur?

Marc (marctrix)

[JürgenB]

Hallo Marc,

du findest das Beispiel mit der Navigation hier:

https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Menue_mit_details.html

Gruß
Jürgen

[Marc]

Hej JürgenB, https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Menue_mit_details.html

Hier die passende Voice-Over-Ausgabe (extra langsam) 😉

Marc (marctrix)

[JürgenB]

Hallo Marc,

das ist ja grauenhaft. Ich bin jetzt fast bei Null angefangen:

<details>
	<summary>Hier steht meine Überschrift</summary>
	<p>Und hier kommt dann noch der ganze Text.</p>
</details>

und habe mir das mit VoiceOver vorlesen lassen, einfach schrecklich. Wenn die anderen Vorleser genauso sind, kann man details/summary vergessen. 😟

Gruß
Jürgen

[Marc]

Hej JürgenB,

das ist ja grauenhaft.

und habe mir das mit VoiceOver vorlesen lassen, einfach schrecklich. Wenn die anderen Vorleser genauso sind, kann man details/summary vergessen. 😟

Ich will dich weiß Gott nicht davon abhalten, etwas besseres zu erstellen, Wenn du das kannst.

Ich kann das aber mit keinem Gesetz verlangen, denn das alles as du erstellt hast ist laut gültigen Vorgaben bedienbar und damit zugänglich.

Gut, dass du selber merkst, dass da trotzdem viel Luft nach oben ist und wenn man so eine Webseite selber nicht bedienen möchte, ist das der beste Anreiz etwas besseres zu machen.

Barrierefreie Menüs sind aber nicht gerade geeignet für einen Einstieg in die barrierefreie Entwicklung. Das ist vermutlich mit das komplexeste überhaupt.

Also überlege dir, wie du weiter vorgehen willst. Versuchst du dich dran, werde ich dich unterstützen. Du weißt ja wodrauf es ankommt und hast jetzt vielleicht zum ersten Mal eine genaue Vorstellung wo du hin willst.

Marc (marctrix)

[JürgenB]

Hallo @Marc,

meine Baustelle ist im Moment nicht, wie ich eine Navigation mit details/summary hinbekomme, sondern was ich mit details/summary machen muss, damit sie überhaupt vernünftig vorgelesen werden. Du beschäftigst dich ja schon länger mit „Vorlesebrowsern“, kann man da erwarten, dass das noch besser wird?

Gruß
Jürgen

[Marc]

Hej JürgenB,

meine Baustelle ist im Moment nicht, wie ich eine Navigation mit details/summary hinbekomme, sondern was ich mit details/summary machen muss, damit sie überhaupt vernünftig vorgelesen werden. Du beschäftigst dich ja schon länger mit „Vorlesebrowsern“, kann man da erwarten, dass das noch besser wird?

Was soll denn da besser werden? Die Elemente sind dafür gedacht, Inhalte zu verbergen und bei entsprechender Interaktion wieder anzuzeigen. Sie sagen an, dass es etwas zu öffnen und dass es eine Zusammenfassung gibt. Ist doch perfekt - es sei denn man setzt sie für Menüs ein, wofür sie nicht gedacht sind. Dann macht die Ausgabe natürlich nicht wirklich Sinn.

Aber das liegt dann nicht am Programm. Jedes Element kommt ja mit Semantik, oft wird die auch ausgegeben (z.B. "Texteingabefeld", "Taste" usw)

Die Software macht hier, was sie soll, insofern wird da sicher auch nichts "besser".

Marc (marctrix)

[Marc]

Hej Rolf,

was ich mich nun eigentlich frage und was ich aus Marcs Antworten noch nicht so ganz klar herauslese: Ist es zielführend und sinnvoll, den Code in meinem Fiddle weiterzuentwickeln und als Vorschlag ins Wiki zu bringen? Kann man durch geeignete Ergänzung mit aria-Attributen[^1] die Merkwürdigkeiten in der auralen Bedienung beheben?

Nein, aria wirkt sich ja auf die Semantik aus. Wenn du die änderst, verhält sich das details-Element nicht mehr wie ein details-Element und es macht gar keinen Sinn das überhaupt zu nutzen.

Wie das bedient wird, wissen Nutzer und es verhält sich korrekt. Als Zusammenfassung solltest du halt etwas sprechendes angeben, z.B. "Hauptnavigation". Dann weiß ein Blinder Nutzer, hier was ihn erwartet, wenn er die Details öffnet - nämlich die in der Zusammenfassung angekündigte Hauptnavigation.

Es ist und bleibt eine nicht ganz saubere Verwendung von "summary & details", aber ich glaube, jeder wird damit klar kommen.

Empfehlen würde ich das nicht unbedingt. Es fühlt sich auch etwas "quirky" an: Menüs verhalten sich eigentlich anders.

Marc (marctrix)

[Rolf B]

Hallo Marc,

der primäre Sinn ist, die Aufklappfunktion auch ohne JavaScript zu haben. D.h. ohne JS hat man das automatische Schließen nicht, aber alles andere klappt. Ob das ein relevantes Kriterium ist, kann man natürlich diskutieren...

Rolf

[Gunnar Bittersmann]

@@JürgenB

wären da nichtlesbare UTF-8-Zeichen eine Option?

Sowas gibt’s nicht. Es gibt auch keine lesabren UTF-8-Zeichen. Es gibt keine UTF-8-Zeichen.

🖖 Живіть довго і процвітайте

[JürgenB]

Hallo Gunnar,

wären da nichtlesbare UTF-8-Zeichen eine Option?

Sowas gibt’s nicht. Es gibt auch keine lesabren UTF-8-Zeichen. Es gibt keine UTF-8-Zeichen.

wäre schön, wenn du mich nicht nur kritisiert, sonder auch korrigiert hättest. Wäre nichtlesbare Unicode-Zeichen besser?

Wobei die Idee schlecht ist, weil so etwas wie das ☰, × oder ► wohl auch vorgelesen werden.

… lesabren …

ist das eine Mischung aus lesbar und readable? 😀

Gruß
Jürgen

[Tabellenkalk]

Hallo,

… lesabren …

ist das eine Mischung aus lesbar und readable? 😀

Egal. Auf jeden Fall gibt es das nicht…

Gruß
Kalk

[Rolf B]

Hallo JürgenB,

das Himmelstrigramm ☰ wird zumindest vom NVDA nicht vorgelesen, ein Multiplikations-X dagegen schon.

Ich finde, dass der NVDA das nicht tun sollte. Das Problem ist scheinbar, dass summary zumindest im Chrome-Browser ein display: list-item Element ist. Es hat aber nicht die Rolle eines Listenelements, sondern die Defaultrolle "button". Und bei einem Button erwarte ich nicht, dass ein Ding, das der visuellen Darstellung dient, von einem Reader vorgelesen wird. Offenbar wird der NVDA vom "display:list-item" verwirrt. Aber wer bin ich schon, dass ich zu sowas eine Meinung haben könnte…

Ein Workaround ist, das summary-Element auf display:block zu setzen (dann verschwindet zumindest bei mir das Default-Symbol zum Öffnen automatisch), den Text "Menü" in einem aria-label unterzubringen und das Symbol entweder in einem span mit aria-hidden=true zu verstecken oder es gleich als Bild zu malen. Im einfachen Fall als Hintergrundbild, und wenn man Spaß an Spielereien hat, als inline SVG, das man mittels CSS Animation beim Öffnen von ☰ in X morphed. Ich habe das schonmal irgendwo fertig gesehen, finde es aber nicht wieder.

Ist aber auch nicht schwer

Wobei ich da lieber @keyframes genommen hätte, aber die bring ich nicht dazu, beim Schließen rückwärts zu laufen. Grummel

Rolf

[Gunnar Bittersmann]

@@JürgenB

Es gibt keine UTF-8-Zeichen.

wäre schön, wenn du mich nicht nur kritisiert, sonder auch korrigiert hättest. Wäre nichtlesbare Unicode-Zeichen besser?

Ja! Nicht Zeichensatz und Zeichencodierung durcheinanderbringen!

Wobei die Idee schlecht ist, weil so etwas wie das ☰, × oder ► wohl auch vorgelesen werden.

Léonie Watson hatte in ihrem Vortrag auf der beyond tellerrand auch demonstriert, wie sich <button>×</button> im Screenreader^[1] anhört: „muliplication sign button“.

Das ist natürlich keine vernünftige Beschriftung für den Button. So geht’s richtig:

<button>
  <span aria-hidden="true">×</span>
  <span class="visually-hidden">Close</span>
</button>

mit dem üblichen CSS für .visually-hidden.

… lesabren …

ist das eine Mischung aus lesbar und readable? 😀

Ein fauler Kompromiss. Scheint mir weder besonders lesbar noch besonders readable zu sein.

🖖 Живіть довго і процвітайте

---

1. für uns langsam gestellt; bei ihrer üblichen Geschwindigkeit hätten wir wohl nichts verstanden ↩︎

[Rolf B]

Hallo Gunnar,

Muss man visually hidden nehmen? Ich habe das nicht so intensiv verfolgt... Geht nicht aria-label?

Rolf

[Der Martin]

Hallo Rolf,

Muss man visually hidden nehmen? Ich habe das nicht so intensiv verfolgt... Geht nicht aria-label?

du hast heute unentschuldigt gefehlt. 😉
Sonst hättest du Gunnar direkt fragen können.

Einen schönen Tag noch
 Martin

[Rolf B]

Hallo Martin,

du hast heute unentschuldigt gefehlt.

Haben wir mittlerweile offiziell einen Wochentakt? Aber wie auch immer, ich war mal wieder im Büro, um 19:15 zu Hause und habe mir dann einen Abend mit der Frau Gemahlin genehmigt.

Rolf

[Der Martin]

Moin Rolf,

du hast heute unentschuldigt gefehlt.

Haben wir mittlerweile offiziell einen Wochentakt?

Offiziell? Nein, nicht dass ich wüsste.
Nur dass du bisher fast jedes Mal dabei warst, sozusagen zum harten Kern gehörst.

Aber wie auch immer, ich war mal wieder im Büro, um 19:15 zu Hause und habe mir dann einen Abend mit der Frau Gemahlin genehmigt.

Sehr gut. Prioritäten setzen. 😀

Einen schönen Tag noch
 Martin

[Gunnar Bittersmann]

@@Rolf B

Muss man visually hidden nehmen? Ich habe das nicht so intensiv verfolgt... Geht nicht aria-label?

Ginge zur Not auch. Es ist aber immer besser, Inhalt in HTML-Elementen zu haben, nicht in Attributwerten. U.a. weil AFAIK automatische Übersetzer Attributwerte nicht übersetzen (hier bspw. „Close“ in „Schließen“).

Bei aria-labelledby hätte man den Inhalt auch in einem (anderen) Element:

<button aria-labelledby="close">
  <span aria-hidden="true">×</span>
</button>
⋮

<button aria-labelledby="close">
  <span aria-hidden="true">×</span>
</button>
⋮

<p id="close" hidden="">close</p>

🖖 Живіть довго і процвітайте

[Gunnar Bittersmann]

@@Gunnar Bittersmann

<button aria-labelledby="close">
  <span aria-hidden="true">×</span>
</button>

Etwas viel des Guten. aria-label und aria-labelledby ersetzen ja den Elementinhalt (in AT), sodass das span mit aria-hidden nicht nötig ist.

<button aria-labelledby="close">×</button>

🖖 Живіть довго і процвітайте

[Samuel fiedler]

Hallo Matthias Scharwies!

hier das neue Kapitel:

• HTML/Tutorials/Navigation/Flyout-Menü

Dann wurde da (im Abschnitt mit dem Script) ein < beim <!DOCTYPE html> vergessen…

Au revoir,
Samuel Fiedler

[Matthias Scharwies]

Servus!

Hallo Matthias Scharwies!

hier das neue Kapitel:

• HTML/Tutorials/Navigation/Flyout-Menü

Dann wurde da (im Abschnitt mit dem Script) ein < beim <!DOCTYPE html> vergessen…

Nur das < (ist beim Kopieren verschwunden!), aber das reicht ja schon!

Merci!

Au revoir,
Samuel Fiedler

À bientôt!

Matthias Scharwies