Terug naar Artikelen

Schaalbaarheid van tekst

De schaalbaarheid van tekst speelt een rol bij mensen die behoefte hebben aan grotere of kleinere letters. Deze behoefte treedt vooral op bij mensen die slechtziend zijn of een motorische handicap hebben. Mensen die moeite hebben met kleine letters willen graag de tekst groter kunnen schalen. Iemand met een motorische handicap kan het bijvoorbeeld lastig vinden om op een link te klikken als deze met kleine lettertjes is opgemaakt. Aan de andere kant willen mensen die een beperkt gezichtsveld hebben, maar wel goed kunnen zien (kokergezichtsveld), graag de tekst kleiner kunnen schalen, zodat ze meer tekst binnen één blik hebben.

De richtlijn

De toegankelijkheidsrichtlijnen van het W3C bevatten een ijkpunt dat vereist dat onder andere tekst schaalbaar is. De schaalbaarheid van tekst wordt niet letterlijk genoemd in de richtlijnen, maar is indirect wel verbonden met één van de ijkpunten van prioriteit 2. Hieronder volgt eerst een korte uitleg van dit ijkpunt.

Het ijkpunt welke indirect gaat over de schaalbaarheid van tekst is W3C ijkpunt 3.4 [prioriteit 2]: 'Gebruik liever relatieve eenheden dan absolute eenheden als je in mark-uptalen waarden toekent aan attributen en eigenschappen in style sheets'. Dit houdt in dat je in de style sheet of binnen de webpagina beter 'em' of percentages voor lengtes en groottes kunt gebruiken dan pixels (px), punten (pt) of centimeters (cm), wat absolute eenheden zijn. Het enige waar wel absolute eenheden voor gebruikt mogen worden zijn (kleine) marges (bijv. 3px) of padding en als 'de fysieke karakteristieken van het output medium bekend zijn'. Dit laatste is vaag, maar verwijst naar bijvoorbeeld een visitekaartje, waarvan de afmetingen vast liggen en de inhoud er binnen moet passen.

IJkpunt 3.4 gaat dus over het gebruik van relatieve eenheden voor zowel tekst als ook voor de lay-out van een pagina. In dit artikel richten we ons voornamelijk op de toepassing van dit ijkpunt op tekst.

Uitwerking

De schaalbaarheid van de tekst wordt bepaald door de eenheid van de fontgrootte in de style sheet of in de html-code. Als er relatieve eenheden gebruikt zijn voor de fontgrootte is het mogelijk om de tekst te schalen. Voorbeelden van relatieve eenheden zijn: '%' 'em' en 'ex'. De 'em' is de hoogte van het huidige lettertype en 'ex' is de hoogte van de huidige onderkast 'x'.

Het schalen van tekst kan bij Internet Explorer via het menu 'beeld' door een grootte te kiezen bij het submenu 'tekengrootte'. Een alternatieve manier om de tekst te schalen is door de CTRL-toets ingedrukt te houden en tegelijkertijd te draaien aan het muiswieltje (indien aanwezig).

Valkuilen

Het gebruik van relatieve eenheden voor de lettergrootte van tekst levert nogal eens onverwachte resultaten op. Dit heeft voornamelijk met het volgende te maken. In tegenstelling tot bij andere eigenschappen wordt de lettergrootte bij de relatieve lengte-eenheden 'em', 'ex' en '%' berekend ten opzichte van de lettergrootte van het parent-element. Als je dus een fontgrootte definieert in de style sheet, moet je hem altijd definiëren te opzichte van eventuele parent-elementen.

Als je bijvoorbeeld een paragraaf een fontgrootte meegeeft van 1.2em, en je nest een span-element in die paragraaf die je een fontgrootte van 1.3em meegeeft, dan heeft de tekst die binnen het span-element staat een grootte van 1.3em x 1.2em = 1.56em en dus niet 1.3em!! Als je echt 1.3em wilt hebben voor de fontgrootte tussen de span-elementen moet je het berekenen ten opzichte van het parent-element, dus ten opzichte van 1.2em. Voor de fontgrootte voor het span-element moet je dus het volgende kiezen: 1.3em / 1.2em = 1.083em.

Let dus goed op als je relatieve eenheden gebruikt voor de fontgrootte van tekst.

De vergroot (en soms verklein) knop

Een extra service die op sommige websites wordt aangeboden is een link of knop om de tekst op de pagina groter of kleiner weer te geven. Dit werkt vaak door middel van JavaScript in combinatie met cookies om bijvoorbeeld een alternatieve style sheet te laden. Het nadeel hiervan is dat het afhankelijk is van een aantal zaken, zoals JavaScript, en dus niet altijd voor iedereen werkt.

Als extra service is het dus prima, zeker als het in combinatie met relatieve eenheden wordt gebruikt, maar het is geen alternatief voor het gebruik van relatieve eenheden voor de fontgrootte. Dit laatste werkt namelijk altijd en is geschikt voor zowel het groter als het kleiner schalen van tekst. Dit laatste (het kleiner kunnen schalen van tekst) wordt namelijk nog wel eens vergeten.

Tekst in afbeeldingen

Een probleem waar vaak niet aangedacht wordt in deze context is dat tekst die in afbeeldingen staat niet schaalbaar gemaakt kan worden door middel van fontgroottes in de style sheet. Hierdoor is het dus niet mogelijk om deze tekst te schalen. Het is dus ook altijd beter om tekst zoveel mogelijk als daadwerkelijke tekst op te nemen in een pagina en zo weinig mogelijk in afbeeldingen.

Tags:
Categorie:
Kennisbank
  • Delen op Facebook
  • Delen op Twitter
  • Delen op LinkedIn