Symbol für Zufallsauswahl?

[Auge]

Hallo

<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.

Wenn – wie @Christian Kruse sagt – doch SVG wegen Unbenutzbarkeit ausfallen, sollten wir schauen, dass die Icon-Font-Lösung bestmöglich funktioniert. Man sollte doch dem in deinem Code benutzen Label den Font zuweisen können (label::before) und dieses anzeigen können, während der Inhalt des Labels ausgeblendet ist und umgekehrt. Vorteil: Es gibt ein auch semantisch sinnvoll eingesetztes Element ^[1] und gleichzeitig kein zusätzliches Element nur für den Font.

Tschö, Auge

---

1. Ob das für jeden Einsatzfall gilt, vermag ich nicht einzuschätzen. ↩︎