Geen overlappingen bij een vergroting tot 150%
Opgelet! Nieuwe ijkpunten
De ijkpunten in deze rubriek zijn niet meer van toepassing. De nieuwe AnySurfer checklist op 2dot0.anysurfer.be vervangt de oude richtlijnenset van 2006.
Zorg ervoor dat geen overlappingen ontstaan die de leesbaarheid verminderen als bezoekers de tekengrootte aanpassen met behulp van de ingebouwde voorzieningen van moderne browsers. Weergaveproblemen treden het vaakst op als u paginadelen positioneert met behulp van CSS en u pixels gebruikt om de positie, de breedte en hoogte ervan te bepalen.
Voorbeeldsituaties
- De lijnhoogte van tekst is uitgedrukt in pixels, maar voor de tekengrootte is een relatieve eenheid (zoals em's of percentages) gebruikt. Tekstregels zullen in elkaar vloeien bij vergroting.
- De breedte en hoogte van paginaonderdelen is uitgedrukt in pixels en/of ze zijn absoluut gepositioneerd. Bij vergroting zullen de randen van tekstdelen elkaar raken en uiteindelijk overlappen.
- De afmetingen van achtergrondafbeeldingen zijn afgestemd op de standaardgrootte van de tekst die erop geplaatst is. Bij vergroting zal de tekst de achtergrondafbeelding mogelijk niet meer helemaal bedekken. Als de tekstkleur bovendien onvoldoende contrasteert met de achtergrond (wit op wit, bijvoorbeeld), dan zullen tekstdelen onleesbaar worden.
De meeste van deze problemen kunt u verhelpen door de breedte en hoogte van paginadelen in een relatieve eenheden uit te drukken (zoals percentages of em's) en/of door vloeiende of elastische paginalay-outs te gebruiken. Sommige problemen kunt u oplossen door achtergrondafbeeldingen automatisch te laten herhalen of een solide achtergrondkleur te kiezen voor bepaalde paginadelen.
Zelf controleren
Een eenvoudige manier om zelf te controleren of tekst goed leesbaar blijft, is om de optie Beeld > Tekengrootte > Extra groot te kiezen in Internet Explorer.
Firefox heeft geen instellingen als Klein, Groter en Grootst. Als u dit ijkpunt in Firefox wil controleren, zorg er dan eerst voor dat de tekst in de standaardgrootte is weergegeven (CTRL+0). Vergroot de tekst vervolgens met twee stappen (tweemaal CTRL+).
U zult merken dat overlappingen toch zullen optreden als u de tekstgrootte nog opvoert. Dat is onvermijdelijk. Bezoekers die een vergrotingsfactor van meer dan 150% nodig hebben om de tekst te kunnen lezen, gebruiken beter een programma dat de inhoud van het hele beeldscherm kan vergroten — inclusief knoppenbalken, cursors en andere onderdelen van het besturingssysteem. Daar hoeven webdesigners zelf niets extra voor te doen.
Alternatieve oplossing
In sommige gevallen kan het gebruik van relatieve eenheden en/of een vloeibaar of elastisch ontwerp het uiterlijk van webpagina's aantasten of onvoorspelbaar maken. Daarom is het ook toegestaan om een zogenaamde Stylesheet switcher te voorzien. Zo'n Stylesheet switcher bevat een of meerdere links waarmee bezoekers de hele website met één muisklik in een ander kleedje kunnen steken.
Als u voor een Stylesheet switcher kiest:
- Plaats de link(s) duidelijk zichtbaar bovenaan op iedere pagina, nog voor het eerste navigatieniveau.
- Geef iedere link een duidelijke naam, zoals "Grote tekst" of "Extra kleine tekst".
- Zorg ervoor dat de gekozen instelling bewaard blijft doorheen het bezoek aan de website. Hiervoor kunt u een cookie gebruiken.
- Zorg ervoor dat geen overlappingen ontstaan bij tekstvergroting als een van de alternatieve stylesheets actief is.
Gebruikersgroepen die baat hebben bij het toepassen van dit ijkpunt
- Slechtzienden en ouderen
- Gebruikers van zakcomputers en GSM's
- Iedereen
Wie waakt over het respecteren van dit ijkpunt?
- Webdesigner (templates en stylesheets)
- Webontwikkelaar (programmatie en implementatie CMS)
Overeenkomstige richtlijnen
- BlindSurfer:
- WCAG: