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