Fehlerhafte Darstellungen im Edge

[Gunnar Bittersmann]

@@einsiedler

<button 
aria-controls="exp_MainMenu" aria-expanded="false">
<span class="Sandwich" aria-hidden="true"></span>  <!-- <<< DAS hier ist das Sandwich Button -->

Das leere span-Element, soll dazu dienen, ein Icon als Hintergrundbild anzuzeigen? Dafür brauchst du kein Element im HTML; das ginge auch mit button::before-Pseudoelement im Stylesheet.

(Allerdings könnten Screenreader ein unverständliches Zeichen vorlesen, wenn du die Icons von Fontawesome als Webfont einbindest. Besser ist es, die Icons als SVG einzubinden.)

Unter&shy;menü                                     <!-- <<< das hier wird nicht angezeigt / versteckt --> 
</button>

Da allerdings brauchst du ein Element. Wie willst du den Text sonst verstecken?

<button>
	<span class="visually-hidden>Untermenü öffnen/schließen</span>
</button>

bzw. wenn du das Icon gar nicht als Hintergrundbild einbaust:

<button>
	<svg aria-hidden="true"><use xlink:href="…"/></svg>
	<span class="visually-hidden>Untermenü öffnen/schließen</span>
</button>

Wenn du mehrere solcher Buttons hast, sollte die Beschriftung aussagekräfiger sein und angeben, welches Untermenü da jeweils geöffnet/geschlossen wird. Ansonsten liest ein Screenreader „Untermenü öffnen/schließen, Button – Untermenü öffnen/schließen, Button – Untermenü öffnen/schließen, Button – Untermenü öffnen/schließen, Button“ vor.

wobei: [hidden] { display: none; }

Besser: [hidden] { display: none !important }

LLAP 🖖