Toegankelijkheidstips

Schaalbare lettertypes & plaatjes

Katinka Hesselink 2006

Webdesigners hebben de neiging lettertypes te gebruiken die klein zijn: dan kan er lekker veel informatie op de website. Een schaalbaar lettertype wordt groter als mensen hun browser instellen op grote lettertypes. 

Beginnende webdesigners hebben de neiging plaatjes te gebruiken voor de menu-items: leuk spelen met photoshop. Het eerste is te verdediOlgen: als je maar zorgt dat de letters groter worden als de gebruiker dat zo heeft ingesteld. Plaatjes als menu-items zijn alleen te verdedigen als je het effect dat je wilt bereiken niet met CSS kan bereiken.

Hoe maak je een lettertype schaalbaar?

Een schaalbaar lettertype kan als volgt gedefinieerd zijn:

p {font-size: 1em;}
blockquote {font-size: 90%;}
a.menu {font-size: small;}

Een niet schaalbaar lettertype wordt als volgt gedefinieerd (het kan ook anders, maar dan krijg je onvoorspelbare resultaten.)

p {font-size: 12px;}

Firefox en Opera schalen dit toch. Opera schaalt zelfs plaatjes! Dus gebruikers van deze browsers kunnen altijd de letters groter zetten als ze dat willen. IE echter gaat uit van de specificatie: 12px betekent 12 pixels. Aangezien je pixels niet in kunt stellen, verandert IE ze niet als de gebruiker een groter lettertype wil. Logisch, maar wel irritant voor mensen met minder dan perfecte ogen.

Plaatjes en schaalbaarheid

Het nadeel van plaatjes is dat ze niet schaalbaar zijn (behalve dus in Opera). Verder weet een zoekmachine niet wat er op een plaatje staat. Gebruik je dus plaatjes voor menu-items, zorg dan voor alternatieve tekst:

<img src="menu1.gif" alt="algemeen" title=""
height="20" width="110">

De alt-tekst komt te voorschijn als het plaatje niet geladen wordt. De title krijg je te zien als je met je muis over het plaatje heen gaat. Zorg dat je altijd een alternatieve tekst geeft, zelfs als je er niets in zet! Anders hoort een screen-reader namelijk letterlijk: "menu1.gif" in plaats van niets. Veel plaatjes hebben het type betekenis die ook elders op de pagina uitgelegd wordt. In die gevallen hoeft een screen-reader helemaal niets met het plaatje. Zorg in zo'n geval voor code ongeveer als volgt:

<img src="beroemdpersoon.jpg" alt="" 
title="beroemd persoon 1875"
height="200" width="110">

Je kunt er voor kiezen de title helemaal weg te laten. De title is echter voor je gebruikers handig als ze met hun muis over het plaatje gaan: dan zien ze die tekst. Voor screenreaders is het bijzonder irritant als in de alternatieve tekst het zelfde staat als in de title: dat wordt dan twee keer voorgelezen. Niet doen dus.

Samenvatting

Zorg voor schaalbare tekst, of grote tekst, waar je maar kan. Gebruik bij plaatjes alternatieve tekst met mate, maar zorg dat de tag er wel staat. Is de inhoud van een plaatje essentieel: gebruik dan of alternatieve tekst, of geen plaatje (zoals in menu's).