Icon fonts

Gijs Veyfeyken op 16/04/2012 - 8 reacties

Een icon font is een font (of lettertype) dat uitsluitend bestaat uit afbeeldingen. Aan elk karakter binnen het lettertype wordt een afbeelding gekoppeld. Het is dus niet bedoeld om tekstuele informatie mee over te brengen. In de typografie spreekt men van een "dingbat". Men gebruikt (of misbruikt?) de posities van het lettertype, die bedoelt zijn om cijfers en letters weer te geven, om er symbolen of iconen mee te creëren. Bijvoorbeeld pijltjes, sterretjes, hartjes, een telefoontje, een brief, etcetera. Het meest bekende lettertype dat uitsluitend bestaat uit dingbats is Windings, gecreëerd door Microsoft in 1990.

Windows iconen

Icon fonts kwamen, tot nu, zelden voor in webdesign. Het beperkte zich meestal tot Word - of andere documenten. Met de komst van de CSS expressie @font-face werd het mogelijk om eender welk lettertype online te gebruiken. Een grote stap vooruit voor online typografie en ook gunstig voor accessibility, want het maakt ontoegankelijke technieken zoals Cufón en sIFR overbodig.

Voordelen van icon fonts

  • Kleine bestandsgrootte en dus snelle laadtijd. Je hebt geen images meer nodig in de HTML. Een lettertype laadt ook sneller dan image sprites.
  • Afbeeldingen kunnen niet vergroot worden zonder kwaliteitsverlies. Een lettertype is vectorieel en kan daarom eindeloos geschaald worden zonder in te boeten op scherpte.
  • Via CSS kan je de iconen makkelijk en snel stijlen, over de hele website. Denk hierbij ook aan de vele mogelijkheden van CSS3 (text-shadow, gradients etc.).
  • Brede browser support.

Enkele voorbeelden van iconen uit het Pictos font:

pictos font icons

Maar?

Er is helaas altijd een maar. Wanneer we een techniek (als ik lettertypes even een techniek mag noemen) gebruiken voor andere doeleinden dan oorspronkelijk bedoeld (cijfers en letters weergeven), vormt dat in 99% van de gevallen een toegankelijkheidsprobleem. Een machine of programma zoals een screenreader (her)kent alle universele karakters. Tot de vreemdste wiskundige tekens toe. Maar wanneer je een niet-universeel erkend of zelf ontworpen symbool (bijvoorbeeld een potlood) koppelt aan een bestaand karakter in een lettertype (bijvoorbeeld "P"), leest een programma dat karakter, en niet het symbool dat wordt weergegeven.

Wil dat zeggen dat je icon-fonts links moet laten liggen? Natuurlijk niet. Je moet er enkel bewust mee omgaan.

De icoontjes worden ingebracht via CSS pseudo elements :before of :after. Niet alle browsers geven CSS gegenereerde inhoud door aan screenreaders. De standaard ingebouwde screenreader op Mac OS VoiceOver, in combinatie met Safari, ondersteunt dit wel en wordt daarom ook in onderstaand voorbeeld gebruikt.

Ik gebruik een gratis (en dus beperkt) abonnement op Pictos server. Daarvoor moet het domein waarop mijn voorbeeld staat, door Pictos aanvaard worden. Blijkbaar zorgt dat dan weer voor problemen bij (drie keer raden) Internet Explorer. Om een lang verhaal kort te maken: bekijk onderstaand voorbeeld met eender welke moderne browser behalve Internet Explorer.

Testpagina met bedieningsknoppen via een icon font.

play pauze stop en maximaliseer knoppen

Conclusie

Wil je iconen gebruiken door middel van een lettertype voor puur decoratieve elementen? Verberg dan het karakter waaraan het icoon is gekoppeld met aria-hidden="true" zodat screenreader gebruikers niet in de war geraken.

Hebben de iconen een functie, zijn ze niet decoratief? Voeg dan verklarende tekst toe die je eventueel visueel verbergt.

Alternatief

Een alternatief voor aria-hidden is het gebruik van de Private Use Area binnen Unicode. Screenreaders lezen tekens binnen die groep van Unicode niet voor. Een voorbeeld van een font icon dienst die dit toepast is IcoMoon.

Reacties

Xavier schreef 7 jaar geleden

Die aria-hidden role is interessant, had ik nog nooit bekeken. Maar beweren dat een font enkel dient om letters en cijfers weer te geven is wel wat kort door de bocht! Wat doe je met pakweg Chinese karakters, die geen letters zijn? Of historische vormen–denk aan het oude teken voor Alef, de voorloper van de letters Alef en via het grieks Alfa en A? En ideogrammen in’t algemeen? Wat zijn letters en cijfers anders dan iconen waarvan de betekenis nauwkeurig gedefinieerd is (semantiek)?

Eigenlijk zijn het ook een stukje de assistive devices die tekort schieten: die herkennen bij mijn weten alleen maar tekens die onmiddellijk te vertalen zijn naar natuurlijke taal. Maar in het veld van semantiek is er wel wat meer dan die tekens alleen . . .

Kortom: we zijn zeker nog niet thuis, ’t is een probleem dat bij de bron (Unicode, of een alternatief daarvoor, bijvoorbeeld) aangepakt moet worden.

Gijs Veyfeyken schreef 7 jaar geleden

Het loopt mis wanneer we een font gaan gebruiken voor symbolen die niet zijn "vastgelegd" of zoals je zelf zegt "waarvan de betekenis nauwkeurig gedefinieerd is". Chinese karakters en ideogrammen plaats ik ook nog onder de noemer "letters en cijfers". Ik verwoord het nogal slecht.

Een zelf ontworpen wolkje bij een link om te uploaden of de afbeelding van een halflege batterij is geen vastgelegd teken/symbool/karakter en kan dus niet correct door een machine gelezen worden. In de blogpost probeer ik voor dat specifiek probleem oplossingen aan te reiken die nu werken. Een oplossing bij de bron (Unicode of andere) zou inderdaad mooi zijn.

Wolf schreef 7 jaar geleden

Goede (niche)kennis die eigenlijk beter verspreid zou moeten woren, al eens gedacht aan Engels bloggen ;)?

Gijs Veyfeyken schreef 7 jaar geleden

@Wolf, daar hebben we in het verleden ook al bij stilgestaan maar toen toch besloten om het bij Nederlands te houden. Ik zal het er nog eens met de collega's over hebben.

Thomas Vanhoutte schreef 7 jaar geleden

Er zijn heel wat symbolen/iconen beschikbaar in het "UTF-8 encoding table and Unicode characters".

Ik denk bijvoorbeeld aan ?.

Bart Nelis schreef 7 jaar geleden

Interessant artikel ! En indd. een 'issue' in termen van toegankelijkheid ..; komen er nog blogposts over HTML 5 en toegankelijkheid ?

Zit er in het kader van een redesign wat research naar te doen ... over document (outline) structuur : http://www.accessibleculture.org/articles/2011/10/jaws-ie-and-headings-in-html5/ .. en ben ook nog aan het zoeken naar figure / figcaption

Gijs Veyfeyken schreef 7 jaar geleden

@Bart, bedankt voor de suggesties van onderwerpen. Die zijn zeker interessant om over te schrijven. Staat bij deze op onze to-do.

Hier zijn alvast nog enkele artikels rond het HTML5 outline algorithm en toegankelijkheid:

http://www.456bereastreet.com/archive/201103/html5_sectioning_elements_headings_and_document_outlines/

http://www.456bereastreet.com/archive/201104/html5_document_outline_revisited/

http://www.456bereastreet.com/archive/201106/on_using_h1_for_all_heading_levels_in_html5/

We raden aan om nog geen gebruik te maken van het HTML5 outline algorithm (door enkel h1 te gebruiken) tot er voldoende ondersteuning is door browsers en screenreaders. Wat momenteel nog niet het geval is.

Reageer

De volgende HTML tags zijn toegestaan: <a> <b> <ul> <li>