2 Flyout-Menüs im Wiki

[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