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