Cufón, de font-oplossing

Gijs Veyfeyken op 29/11/2010 - 9 reacties

Update 07/07/2011:Omdat Cufón geen ondersteuning biedt voor VoiceOver, kunnen we dit niet als toegankelijk beschouwen. Gebruik liever de CSS gebaseerde @font-face techniek.

Cufón is JavaScript dat ervoor zorgt dat je eender welk lettertype in je website kan gebruiken. Dus ook een lettertype dat niet is geïnstalleerd op de PC van de bezoeker. Het gewenste font wordt als afbeelding getoond maar ook de werkelijke tekst staat in de broncode.

Tijd voor een screenreader-testje.

logo Jaws, Window-Eyes, Supernova, NVDA

Ik heb een site waar de koppen (H1, H2, H3) met Cufón opgemaakt zijn, getest met bovenstaande screenreaders in Windows XP in combinatie met Internet Explorer 8. Lang leve virtualisatie met VMware.

  • NVDA 2009.1 leest alles mooi voor, je merkt niet eens dat het geen normale tekst is.
  • Jaws 9 idem dito. Niets op aan te merken.
  • Window-Eyes 7.11 laat een steekje vallen. Hij stopt na het lezen van het eerste woord in de H2, ik moet telkens naar het volgende element navigeren (pijltje naar beneden) om elk woord in de hoofding te laten voorlezen.
  • Supernova 12.01 leest de koppen niet voor wanneer ik met de H-toets (H van headings) van kop naar kop navigeer. Wanneer ik met de pijltjestoetsen over de pagina ga, worden ze wel voorgelezen. Net zoals bij Window-Eyes wordt elk woord in de H2 apart voorgelezen.

Vanuit toegankelijkheidsstandpunt is er dus geen reden om Cufón links te laten liggen. Voor gebruikers van Supernova (volgens ons de meest gebruikte screenreader in België) en Window-Eyes loopt het niet echt soepel maar je kan wel aan alle informatie.

Reacties

Mathias Bynens schreef 8 jaar geleden

In hoeverre is Cufón nog relevant nu @font-face zowat overal gebruikt kan worden?

Gijs Veyfeyken schreef 8 jaar geleden

Het is relevant zolang het door webwerkers wordt gebruikt en bezoekers er dus mee geconfronteerd worden. Mijn test was op een nieuwe site in opbouw. It's still out there...

Maar @font-face kan het wel doen verdwijnen.

Mathias Bynens schreef 8 jaar geleden

Ik had m'n reactie moeten verduidelijken -- ik bedoelde uiteraard "relevant voor webontwikkelaars".

Het is zeker en vast goed om weten dat Cufón geen noemenswaardige toegankelijkheidsproblemen veroorzaakt, maar het wordt tijd dat de front-end developers waar jij 't over hebt eindelijk maar 'ns overstappen naar @font-face.

Bedankt voor deze blogpost! Ik had de indruk dat het gebruik van Cufón nadeliger was :)

Gijs Veyfeyken schreef 8 jaar geleden

Ik sta volledig achter je Mathias. Cufón (ik moet telkens opnieuw zoeken naar de toetscombinatie om die stomme ó met een streepje te maken, alt-shift-1) kan een probleem zijn afhankelijk van de soort en versie van hulpsoftware. @font-face is altijd perfect toegankelijk.

Gijs Veyfeyken schreef 8 jaar geleden

Ik heb net ook nog even met Voice-Over (screenreader op Mac) gestest. Compleet geen ondersteuning. Ter illustratie, dit is de audio-output (MP3) van de heading (h3): "Kom in actie!".

Gijs Veyfeyken schreef 8 jaar geleden

Net een mooi overzicht tegengekomen: Comparison of web fonts solutions.

kristof vandommele schreef 8 jaar geleden

Bestaan er eigenlijk statistieken over de gebruikte browsers bij mensen met beperkingen? Zoals de meeste frontend-ontwikkelaars zie ik nl. iedereen graag behalve IE-gebruikers...

Gijs Veyfeyken schreef 8 jaar geleden

De enige statistieken waar ik naar kan verwijzen is webAIM's screen reader survey: http://webaim.org/projects/screenreadersurvey3/#browsers.

43,1% van de deelnemers gebruikte Internet Explorer 8 in december 2010. Of deze cijfers ook representatief zijn voor België, is een andere vraag.

Icon fonts | AnySurfer blogt schreef 7 jaar geleden

[...] typografie en ook gunstig voor accessibility, want het maakt ontoegankelijke technieken zoals Cufón en sIFR [...]

Reageer

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