@@Gabriele > 1. In dem [Beispiel](https://codepen.io/Gabriele1/pen/bNpwbaj) ```html,bad <button id="hamburger-toggle" class="hamburger-button" aria-label="Menü öffnen/schließen"> <span class="line"></span> <span class="line"></span> <span class="line"></span> </button> ``` Wo haste denn den Unsinn her? HTML-Elemente zum Zeichen von Figuren?[^cssbattle] [^cssbattle]: In der CSSBattle macht man das. Aber das ist hier nicht das Thema. Das geht mit SVG, [kuckst du](https://codepen.io/gunnarbittersmann/pen/vEGXGqp). Oder mit Unicode-Zeichen. Anstatt `aria-label` bietet sich für die zugängliche Beschriftung ein [visuell verstecktes](https://www.a11yproject.com/posts/how-to-hide-content/) Element an. Das hat den Vorteil, dass der Text im Elementinhalt ist, nicht im Attributwert, und von automatischen Übersetzern auch übersetzt wird. Mit dem `aria-expanded`-Attibut sollte der Button geschwätzig genug sein, sodass „Menü“ als Beschriftung ausreichen sollte – ohne „öffnen/schließen“. 🖖 Live long and prosper {:@en} -- *“In my home, the America I love, the America I've written about, that has been a beacon of hope and liberty for 250 years, is currently in the hands of a corrupt, incompetent and treasonous administration. Tonight, we ask all who believe in democracy and the best of our American spirit, to rise with us, raise your voices against authoritarianism, and let freedom reign.”*{:@en} — Bruce Springsteen, Manchester 2025-05-14

@@Gabriele > 1. In dem [Beispiel](https://codepen.io/Gabriele1/pen/bNpwbaj) ```html,bad <button id="hamburger-toggle" class="hamburger-button" aria-label="Menü öffnen/schließen"> <span class="line"></span> <span class="line"></span> <span class="line"></span> </button> ``` Wo haste denn den Unsinn her? HTML-Elemente zum Zeichen von Figuren?[^cssbattle] [^cssbattle]: In der CSSBattle macht man das. Aber das ist hier nicht das Thema. Das geht mit SVG, [kuckst du](https://codepen.io/gunnarbittersmann/pen/vEGXGqp). Oder mit Unicode-Zeichen. Anstatt `aria-label` bietet sich für die zugängliche Beschriftung ein [visuell verstecktes](https://www.a11yproject.com/posts/how-to-hide-content/) Element an. Das hat den Vorteil, dass der Text im Elementinhalt ist, nicht im Attributwert, und von automatischen Übersetzern auch übersetzt wird. Mit dem `aria-expanded`-Attibut sollte der Button geschwätzig genug sein, sodass „Menü“ als Bschriftung ausreichen sollte – ohne „öffnen/schließen“. 🖖 Live long and prosper {:@en} -- *“In my home, the America I love, the America I've written about, that has been a beacon of hope and liberty for 250 years, is currently in the hands of a corrupt, incompetent and treasonous administration. Tonight, we ask all who believe in democracy and the best of our American spirit, to rise with us, raise your voices against authoritarianism, and let freedom reign.”*{:@en} — Bruce Springsteen, Manchester 2025-05-14

@@Gabriele > 1. In dem [Beispiel](https://codepen.io/Gabriele1/pen/bNpwbaj) ```html,bad <button id="hamburger-toggle" class="hamburger-button" aria-label="Menü öffnen/schließen"> <span class="line"></span> <span class="line"></span> <span class="line"></span> </button> ``` Wo haste denn den Unsinn her? HTML-ELmente zum Zeichen von Figuren?[^cssbattle] [^cssbattle]: In der CSSBattle macht man das. Aber das ist hier nicht das Thema. Das geht mit SVG, [kuckst du](https://codepen.io/gunnarbittersmann/pen/vEGXGqp). Oder mit Unicode-Zeichen. Anstatt `aria-label` bietet sich für die zugängliche Beschriftung ein [visuell verstecktes](https://www.a11yproject.com/posts/how-to-hide-content/) Element an. Das hat den Vorteil, dass der Text im Elementinhalt ist, nicht im Attributwert, und von automatischen Übersetzern auch übersetzt wird. Mit dem `aria-expanded`-Attibut sollte der Button geschwätzig genug sein, sodass „Menü“ als Bschriftung ausreichen sollte – ohne „öffnen/schließen“. 🖖 Live long and prosper {:@en} -- *“In my home, the America I love, the America I've written about, that has been a beacon of hope and liberty for 250 years, is currently in the hands of a corrupt, incompetent and treasonous administration. Tonight, we ask all who believe in democracy and the best of our American spirit, to rise with us, raise your voices against authoritarianism, and let freedom reign.”*{:@en} — Bruce Springsteen, Manchester 2025-05-14

@@Gabriele > 1. In dem [Beispiel](https://codepen.io/Gabriele1/pen/bNpwbaj) ```html,bad <button id="hamburger-toggle" class="hamburger-button" aria-label="Menü öffnen/schließen"> <span class="line"></span> <span class="line"></span> <span class="line"></span> </button> ``` Wo haste denn den Unsinn her? HTML-ELmente zum Zeichen von Figuren?[^cssbattle] [^cssbattle]: In der CSSBattle macht man das. Aber das ist hier nicht das Thema. Das geht mit SVG, [kuckst du](https://codepen.io/gunnarbittersmann/pen/vEGXGqp). Oder mit Unicode-Zeichen. Anstatt `aria-label` bietet sich für die zugängliche Bschriftung ein [visuell verstecktes](https://www.a11yproject.com/posts/how-to-hide-content/) Element an. Das hat den Vorteil, dass der Text im Elementinhalt ist, nicht im Attributwert, und von automatischen Übersetzern auch übersetzt wird. Mit dem `aria-expanded`-Attibut sollte der Button geschwätzig genug sein, sodass „Menü“ als Bschriftung ausreichen sollte – ohne „öffnen/schließen“. 🖖 Live long and prosper {:@en} -- *“In my home, the America I love, the America I've written about, that has been a beacon of hope and liberty for 250 years, is currently in the hands of a corrupt, incompetent and treasonous administration. Tonight, we ask all who believe in democracy and the best of our American spirit, to rise with us, raise your voices against authoritarianism, and let freedom reign.”*{:@en} — Bruce Springsteen, Manchester 2025-05-14