Testdatei für Font Icons

Zur Verwendung dieser Testdatei

Font Icons sind Symbolgrafiken, die aus Datenbanken wie Einzelzeichen eingebunden werden können. Das meist verwendete Icon Font ist wohl Font Awesome.

Diese Testdatei dient dazu, das Verhalten von Browsern und Assistierenden Technologien beim Einsatz von Icon Fontss zu prüfen.

Testbereiche

HTML Zeichensatz Testbeispiele

Im HTML Zeichensatz befinden sich nicht nur Buchstaben, Ziffern und Satzzeichen, sondern auch tausende von mathematischen, logischen Symbolen und Ähnlichem. Exemplarisch soll hier das Verhalten beim Einsatz getestet werden können.

Die Sonderzeichen werden im HTML-Code durch ein kaufmännisches Und (&) eingeleitet und durch einen Strichpunkt (;) geschlossen. Dazwischen kann sich entweder eine Buchstabenfolge befinden, die man sich nach einiger Gewöhnung vielleicht merkt, oder hinter einem Rautezeichen (#) eine natürliche Zahl oder ein beliebiger Code für ein Element.

Screen Reader Unterstützung von HTML Sonderzeichen
Zeichen Code JAWS liest
© © Copyright
© © Copyright
© © Copyright
↓ Pfeil nach unten
▼ Schwarzes nach unten zeigendes Dreieck
∑ Summenzeichen

Anmerkung: Getestet wurde JAWS 17 im Internet Explorer 11.

Erfahrungsberichte zum HTML Zeichensatz

  • Mir ist noch kein Zeichen untergekommen, das von JAWS nicht adäquat interpretiert würde.
  • Die Zeichen werden erwartungsgemäß auch im Windows Kontrastmodus dargestellt.

Font Awesome Testbeispiele

Anmerkungen zur Verwendung des Font Awesome Zeichensatzes

  • Font Awesome bietet wohl die wichtigste Datenbank für kostenlose Font Icons.
  • Ich habe mich bei der Implementierung weithin an die Empfehlungen eines SELFHTML Wiki zu Font Icons gehalten (Stand 2016-12-28).
  • Es hat sich teilweise eingebürgert, Font Icons in ein <i>-Tag einzubetten. Dieses HTML-Element ist jedoch für die Kennzeichnung von kursiven Textbereichen vorgesehen. Ich habe bislang keine Probleme entdeckt, wenn ich stattdessen das semantisch neutrale <SPAN>-Element verwende, wie auch im folgenden Testbereich.

Testvarianten zur Verwendung des Font Awesome Zeichensatzes

Erfahrungsberichte zum Font Awesome Zeichensatz

  • Die Seite braucht deutlich länger beim Laden.
  • Die Font Icons erhalten erwartungsgemäß Vorder- und Hintergrundfarbe wie andere Zeichen exakt aus der CSS-Anweisung.
  • Im Beispiel 2 liest JAWS 17 Startseite aus dem aria-label-Attribut vor.
  • Im Beispiel 3 wird angezeift, dass für das Icon ein Titel verfügbar ist. Mit der Maus über dem Icon wird Startseite als Tooltipp eingeblendet.