Servus! > Da stellt sich mir gleich folgende Frage: Wie liest man auf einer Webseite unbeschriftete Piktogramme vor? Ich würde es so realisieren: ~~~html <style> label { background-image: url(Icon.svg); border: 0; font: 0/0 a; text-shadow: none; color: transparent; } </style> <label for="input">Begriff</label> ~~~ Der Begriff wird von Screenreadern vorgelesen, auf dem Bildschirm wird die Erklärung ausgeblendet und dafür das Hintergrundbild angezeigt. Das war der Nachteil von Icon-Fonts, dass sie zusätzliches HTML in Form eines Span- oder (semantisch falschen) i-Elements benötgt hatten. Herzliche Grüße Matthias Scharwies -- Es gibt viel zu tun: *[ToDo-Liste](http://wiki.selfhtml.org/wiki/Kategorie:ToDo)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin:1em 0 0 2em;"}

Servus! > Da stellt sich mir gleich folgende Frage: Wie liest man auf einer Webseite unbeschriftete Piktogramme vor? Ich würde es so realisieren ~~~html <style> label { background-image: url(Icon.png); border: 0; font: 0/0 a; text-shadow: none; color: transparent; } </style> <label for="input">Begriff</label> ~~~ Der Begriff wird von Screenreadern vorgelesen, auf dem Bildschirm wird die Erklärung ausgeblendet und dafür das Hintergrundbild angezeigt. Herzliche Grüße Matthias Scharwies -- Es gibt viel zu tun: *[ToDo-Liste](http://wiki.selfhtml.org/wiki/Kategorie:ToDo)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin:1em 0 0 2em;"}

Servus! > Da stellt sich mir gleich folgende Frage: Wie liest man auf einer Webseite unbeschriftete Piktogramme vor? Ich würde es so realisieren ~~~html <style> label { background-image: url(Icon.png); border: 0; font: 0/0 a; text-shadow: none; color: transparent; } </style> <label for="input">Begriff</label> ~~~ Der Begriff wird von Screenreadern vorgelesen, auf dem Bildschirm wird die Erklärung ausgeblendet und dafür das Hintegrundbild angezeigt. Herzliche Grüße Matthias Scharwies -- Es gibt viel zu tun: *[ToDo-Liste](http://wiki.selfhtml.org/wiki/Kategorie:ToDo)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin:1em 0 0 2em;"}