@@Hans Wo ich’s gerade sehe: > `<a href="#">Kont@kt</a>`{:.language-html.bad} Was soll ein Screenreader damit anfangen? „Kont *at*{:@en} ka te“? Wenn du diesen Schnickschnack schon machst (Warum eigentlich? Das ist so 1998.), dann sollte der Link für assistive Technologien eine Beschriftung „Kontakt“ haben: ~~~HTML <a href="#" aria-label="Kontakt">Kont@kt</a> ~~~ oder ~~~HTML <a href="#"> <span aria-hidden="true">Kont@kt</span> <span class="visually-hidden">Kontakt</span> </a> ~~~ mit ~~~CSS .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } ~~~ im Stylesheet. ☞ [How-to: Hide content](https://a11yproject.com/posts/how-to-hide-content/) LLAP 🖖 Edit Rolf B: Tippfehler berichtigt. -- *„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann

@@Hans Wo ich’s gerade sehe: > `<a href="#">Kont@kt</a>`{:.language-html.bad} Was soll ein Screenreader damit anfangen? „Kont *at*{:@en} ka te“? Wenn du diesen Schnickschnack schon machst (Warum eigentlich? Das ist so 1998.), dann sollte der Link für assistive Technologien eine Beschriftung „Kontakt“ haben: ~~~HTML <a href="#" aria-label="Kontakt">Kont@kt</a> ~~~ oder ~~~HTML <a href="#"> <span aria-hidden="true">Kont@kt</span> <span class="visially-hidden">Kontakt</span> </a> ~~~ mit ~~~CSS .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } ~~~ im Stylesheet. ☞ [How-to: Hide content](https://a11yproject.com/posts/how-to-hide-content/) LLAP 🖖 -- *„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann