Dit is een gearchiveerde versie van www.webrichtlijnen.nl.

WCAG 2.0 - Succescriterium 1.4.8 Visuele weergave

Principe 1: Waarneembaar - informatie en componenten van de gebruikersinterface moeten toonbaar zijn aan gebruikers op voor hen waarneembare wijze

Richtlijn 1.4 Onderscheidbaar: Maak het voor gebruikers gemakkelijker om content te horen en te zien, waaronder scheiding van voorgrond en achtergrond

Bedoeling van Richtlijn 1.4

Terwijl sommige richtlijnen erop zijn gericht om informatie beschikbaar te maken in een vorm die in alternatieve formats kan worden gepresenteerd, gaat het er in deze richtlijn om dat mensen met functiebeperkingen op een zo gemakkelijk mogelijke manier de standaardpresentatie waar kunnen nemen. Hierbij gaat het er hoofdzamelijk om dat het gebruikers gemakkelijker wordt gemaakt om voorgrondinformatie van de achtergrond te scheiden. Voor visuele presentaties betekent dit dat ervoor moet worden gezorgd dat informatie die boven op een achtergrond wordt gepresenteerd voldoende met de achtergrond contrasteert. Voor audiopresentaties betekent dit dat ervoor moet worden gezorgd dat voorgrondgeluiden voldoende luider zijn dan de achtergrond. Individuen met visuele en auditieve functiebeperkingen hebben veel meer moeite om voorgrond- en achtergrondinformatie te scheiden.

Succescriterium 1.4.8 Visuele weergave

1.4.8 Visuele weergave: Voor de visuele weergave van tekstblokken is een mechanisme beschikbaar om het volgende te realiseren: (Niveau AAA)

  1. Voor- en achtergrondkleuren kunnen door de gebruiker worden gekozen.

  2. De breedte is niet meer dan 80 karakters of tekens (40 in het geval van CJK).

  3. Tekst is niet uitgevuld (uitgelijnd naar linker- en rechterkantlijnen).

  4. Regelafstand is ten minste 1,5 spatie binnen alinea's en alinea-afstand is ten minste 1,5 keer zo groot als de regelafstand.

  5. Tekst kan zonder hulptechnologie herschaald worden tot 200 procent op een zodanige manier dat de gebruiker niet horizontaal hoeft te scrollen om een regel tekst te lezen op een venster even groot als het volle beeld.

Niveau van conformiteit

AAA

Bedoeling van dit Succescriterium

De bedoeling van dit Succescriterium is om te garanderen dat visueel weergegeven tekst op zo'n manier wordt gepresenteerd dat het kan worden waargenomen zonder dat de lay-out interfereert met de leesbaarheid ervan. Mensen met bepaalde cognitieve, taal- en leermoeilijkheden en sommige gebruikers met beperkt zicht kunnen de tekst niet waarnemen en/of kunnen hun plaats in de tekst niet bijhouden als de tekst wordt gepresenteerd op een manier die voor hen moeilijk te lezen is.

Mensen met bepaalde visuele of cognitieve functiebeperkingen moeten de tekst- en achtergrondkleur kunnen selecteren. Soms kiezen zij combinaties die op iemand zonder die beperking als niet-intuïtief overkomen. Soms hebben deze combinaties erg weinig contrast. Soms werken alleen heel specifieke kleurcombinaties voor hen. Het kunnen instellen van kleur of andere aspecten van tekstpresentatie maakt voor hun begripsvermogen een groot verschil.

Voor mensen met bepaalde leesbeperkingen of visuele beperkingen kunnen lange tekstregels een aanzienlijke barrière betekenen. Ze hebben moeite om hun plaats op de pagina bij te houden en met het volgen van de tekststroom. Smalle tekstblokken maken het gemakkelijker voor hen om in een blok op de volgende regel verder te lezen. Regels zouden niet breder moeten zijn dan 80 karakters of tekens (40 in het geval van CJK), waarbij tekens de elementen zijn van het schrift waarin de tekst is geschreven.. Onderzoek heeft uitgewezen dat Chinese, Japanse en Koreaanse (CJK) karakters ongeveer twee keer zo breed zijn als niet-CJK karakters, als beide tekensoorten worden getoond met eigenschappen die dezelfde leesbaarheid opleveren, dus is de regel voor CJK tekens maximaal half zo breed als voor niet-CJK karakters.

Mensen met bepaalde cognitieve functiebeperkingen vinden het moeilijk om tekst te volgen als de regels te dicht op elkaar staan. Als er extra ruimte tussen regels en alinea's wordt aangeboden, kunnen zij de volgende regel beter vinden en gemakkelijker herkennen wanneer ze het einde van een alinea hebben bereikt. Het beste is om een aantal verschillende opties te bieden, bijvoorbeeld anderhalve en dubbele regelafstand. Met anderhalve regelafstand binnen alinea's bedoelen we dat de bovenkant van de regel 150% verder van de bovenkant van de regel eronder staat dan het geval zou zijn bij een enkele regelafstand (de standaardregelafstand voor het lettertype). Met 1,5 keer zoveel afstand tussen alinea's als tussen regels bedoelen we dat de afstand vanaf de bovenkant van de laatste regel van 1 alinea 250% verder van de bovenkant van de eerste regel van de volgende alinea ligt (dat wil zeggen dat er tussen beide alinea een witregel is aangebracht die 150% is van de witregel bij een enkele regelafstand).

Mensen met bepaalde cognitieve functiebeperkingen vinden het moeilijk om tekst te lezen die zowel links- als rechtslijnend is. De ongelijke afstand tussen woorden in geheel uitgevulde tekst kan tot gevolg hebben dat er "rivieren van witte ruimte" over de pagina lopen, wat het lezen bemoeilijkt en soms zelfs onmogelijk maakt. Het uitlijnen van tekst kan ook tot gevolg hebben dat woorden te dicht op elkaar staan, zodat het voor de gebruikers moeilijk is om woordgrenzen te vinden.

De bepaling over herschaling garandeert dat visueel weergegeven tekst (tekstkarakters die zo zijn weergegeven dat ze zichtbaar zijn [in tegenstelling tot teksttekens die nog in datavorm staan, bijvoorbeeld ASCII]) met succes kan worden geschaald zonder dat de gebruikers horizontaal en verticaal hoeven te scrollen om alle content te zien. Als de tekst zo wordt aangeboden dat dit mogelijk is, past de content zich aan aan de schaling. Dit stelt mensen met beperkt zicht en mensen met cognitieve functiebeperkingen in staat om de tekst te herschalen zonder gedesoriënteerd te raken.

Het schalen van content is primair de verantwoordelijkheid van user agents. User agents die voldoen aan UAAG 1.0 IJkpunt 4.1 staan gebruikers toe om tekstschaal te configureren. Het is de verantwoordelijkheid van de auteur om content te creëren die de user agent er niet van weerhoudt de content de schalen en die ervoor zorgt dat de content zich aanpast aan de huidige breedte van het weergavekader. Zie Succescriterium 1.4.4 begrijpen Herschalen van tekst voor een aanvullende bespreking van het herschalen van tekst.

De eis ten aanzien van horizontaal scrollen is niet van toepassing op apparaten met kleine schermen waarbij lange woorden soms op één regel worden getoond en gebruikers horizontaal moeten scrollen. Auteurs moeten wel garanderen dat content op standaard desktop- en laptopbeeldschermen met gemaximaliseerd browserscherm aan deze eis voldoet. Omdat de meeste mensen hun computer een aantal jaren houden, is het beter om niet uit te gaan van de resolutie van de nieuwste desktop-/laptopbeeldschermen, maar om bij de afweging rekening te houden met resoluties van desktop-/laptopbeeldschermen die gedurende meerdere jaren gangbaar zijn.

Tekstterugloop zou altijd mogelijk moeten zijn mits woorden niet zo lang zijn dat één woord meer dan de helft van de volledige schermbreedte inneemt. Zeer lange URI's kunnen over de breedte van een vergroot scherm heen lopen, maar zijn moeten niet worden beschouwd als tekst om te "lezen" en zouden daarom deze bepaling niet schenden.

Deze bepaling wil niet zeggen dat een gebruiker nooit horizontaal zou hoeven scrollen. Het wil alleen zeggen dat ze niet naar rechts en links hoeven te scrollen om een regel te lezen. Als een pagina bijvoorbeeld zou bestaan uit twee tekstkolommen van gelijke omvang, zou deze automatisch voldoen aan deze bepaling. Bij het vergroten van de pagina, zou de eerste kolom in zijn geheel op het scherm te zien zijn en zou de gebruiker gewoon naar beneden kunnen scrollen om de tekst te lezen. Om de tweede kolom te lezen, zou de gebruiker naar rechts scrollen, zodat de rechterkolom het scherm zou vullen, en deze kolom lezen zonder verder horizontaal te hoeven scrollen.

Specifieke voordelen van Succescriterium 1.4.8

Dit Succescriterium helpt mensen met beperkt zicht door hen in staat te stellen tekst te zien zonder afleidende presentatiekenmerken. Het stelt hen in staat tekst te configureren op manieren die voor hen gemakkelijker te zien zijn doordat ze de kleur en grootte van tekstblokken zelf kunnen instellen.

Dit Succescriterium helpt mensen met cognitieve, taal- en leermoeilijkheden om tekst waar te nemen en hun plaats binnen tekstblokken te volgen.

  • Mensen met bepaalde cognitieve beperkingen kunnen tekst beter lezen als ze hun eigen voorgrond- en achtergrondkleurcombinaties selecteren.

  • Mensen met bepaalde cognitieve beperkingen kunnen gemakkelijker hun plaats in de tekst bijhouden als tekstblokken smal zijn en ze de hoeveelheid afstand tussen regels en alinea's kunnen configureren.

  • Mensen met bepaalde cognitieve beperkingen kunnen tekst gemakkelijker lezen als de witruimte tussen woorden gelijkmatig is.

Definities
tekstblokken

meer dan één zin tekst

mechanisme

proces of techniek om een resultaat te bereiken

Opmerking 1: het mechanisme kan expliciet aangeboden worden in de content of er kan op worden gesteund dat het of door het platform of door user agents, met inbegrip van hulptechnologieën geleverd wordt.

Opmerking 2: het mechanisme moet voldoen aan alle succescriteria voor het niveau in de aanspraak op conformiteit.

op een venster even groot als het volle beeld

op een desktop/laptop scherm van de meest gangbare grootte met gemaximaliseerd weergavekader

Opmerking: aangezien mensen hun computers in het algemeen verscheidene jaren houden, is het het beste om, als deze evaluatie wordt gemaakt, niet af te gaan op de meest recente desktop/laptop-schermresoluties, maar de gangbare desktop/laptop-schermresoluties gemiddeld over diverse jaren in acht te nemen.

Voldoen aan succescriterium 1.4.8 Visuele weergave (niveau AAA)

Afdoende technieken: technieken of combinaties van technieken die volstaan

Elk genummerd item in deze sectie staat voor een techniek of combinatie van technieken die afdoende wordt beschouwd om aan dit succescriterium te voldoen. Met de genoemde technieken wordt pas aan het succescriterium voldaan indien ze in overeenstemming zijn met de conformiteitseisen.

Bron: How to meet WCAG 2.0, success criterion 1.4.8 (Engelstalig)
Links in deze sectie verwijzen naar Engelstalige content.

Instructie: Aangezien dit succescriterium uit meerdere onderdelen bestaat, moet u voor elk van de onderstaande vereisten aan een van de genummerde items voldoen.

Eerste vereiste: Technieken om te garanderen dat voor- en achtergrondkleuren door de gebruiker kunnen worden gekozen
  1. C23: Specificatie van tekst- en achtergrondkleuren van secundaire content als banners, eigenschappen en navigatie CSS, terwijl tekst- en achtergrondkleuren van de belangrijkste content niet worden gespecificeerd (CSS)

  2. C25: Specificatie van randen en lay-out in CSS om delen van een webpagina af te bakenen, terwijl de tekst- en achtergrondkleuren niet worden gespecificeerd (CSS)

  3. G156: Gebruik van een technologie die in overeenstemming is met de functionaliteit van algemeen beschikbare user agents om de voorgrond en achtergrond van blokken tekst te veranderen

  4. G148: Geen specificatie van achtergrondkleur, geen specificatie van tekstkleur en geen gebruik van technologiekenmerken die die standaarden wijzigen

  5. G175: Een meerkleurig selectie-instrument op de webpagina aanbieden voor voorgrond- en achtergrond kleuren

Tweede vereiste: Technieken om te garanderen dat de breedte niet meer dan 80 karakters of tekens bedraagt (40 in het geval van CJK)
  1. G204: Niet verstoren van het herplaatsen van tekst door de user agent als het venster wordt versmald

  2. C20: Gebruik van relatieve maten om kolombreedten in te stellen, zodat regels gemiddeld 80 karakters of minder kunnen zijn als de browser wordt herschaald (CSS)

Derde vereiste: Technieken om te garanderen dat tekst niet uitgevuld is (uitgelijnd naar linker- en rechterkantlijnen)
  1. C19: Specificatie van links uitlijnen OF rechts uitlijnen in CSS (CSS)

  2. G172: Een mechanisme aanbieden om het volledig uitvullen van tekst te verwijderen

  3. G169: Tekst naar slechts één kant uitlijnen

Vierde vereiste: Technieken om te garanderen dat regelafstand ten minste 1,5 spatie binnen alinea's bedraagt en alinea-afstand ten minste 1,5 keer zo groot is als de regelafstand.
  1. G188: Op de webpagina een knop aanbieden waarmee regelafstanden en witregels tussen alinea's kunnen worden vergroot

  2. C21: Specificatie van regelafstand in CSS (CSS)

Vijfde vereiste: Technieken om te garanderen dat tekst zonder hulptechnologie kan worden herschaald tot 200 procent op een zodanige manier dat de gebruiker niet horizontaal hoeft te scrollen om een regel tekst te lezen op een venster even groot als het volle beeld
  1. Geen bemoeienis met de herverdeling van tekst door de user agent als het kijkvenster wordt versmald (Algemeen, toekomstige link) OF

  2. G146: Gebruik van flexibele lay-out

    • C12: Gebruik van percentage voor lettergrootten (CSS)

    • C13: Gebruik van benoemde lettergrootten (CSS)

    • C14: Gebruik van em-eenheden voor lettergrootten (CSS)

    • C24: Gebruik van percentagewaarden in CSS voor de grootte van "containers" (CSS)

    • FLASH33: Relatieve waarden gebruiken voor de afmetingen van Flash objecten (Flash)

    • SCR34: Formaat en positie berekenen op een manier die meeschaalt met de tekstgrootte (Scripting)

  3. G206: In de content opties aanbieden om naar een lay-out te schakelen waarbij de gebruiker niet horizontaal hoeft te scrollen om een regel tekst te lezen

Aanbevolen technieken: technieken die verder gaan dan is vereist

De items in deze sectie gaan verder dan wat is vereist om aan het succescriterium te voldoen. Ze kunnen worden gebruikt om content optimaal toegankelijk te maken.
Gebruik van aanbevolen technieken heeft geen invloed op het niveau van conformiteit dat kan worden geclaimd.

Bron: How to meet WCAG 2.0, success criterion 1.4.8 (Engelstalig)
Links in deze sectie verwijzen naar Engelstalige content.

  • Een hover effect gebruiken om een paragraaf, lijstonderdelen of tabelcellen te markeren (CSS) (toekomstige link)

  • Tekst in een sans serif lettertype weergeven, of een mechanisme aanbieden om dit te kunnen realiseren (CSS) (toekomstige link)

  • Verticale (met opsommingstekens of genummerde) lijsten gebruiken in plaats van inline lijsten (toekomstige link)

  • Hoofdletters en kleine letter gebruiken in overeenstemming met de spelling conventies van de taal van de tekst (toekomstige link)

  • Standaard grote letters aanbieden (toekomstige link)

  • Het gebruik van tekst in rasterafbeeldingen vermijden (toekomstige link)

  • Voorkomen dat letters kleiner kunnen worden gemaakt dan de standaardwaarde van de user agent (toekomstige link)

  • Voldoende ruimte aanbieden tussen kolommen (toekomstige link)

  • In het midden uitgelijnde tekst vermijden (toekomstige link)

  • Grote stukken cursieve tekst vermijden (toekomstige link)

  • Overmatig gebruik van verschillende stijlen op een individuele pagina en op websites vermijden (toekomstige link)

  • Links visueel onderscheidbaar maken (toekomstige link)

  • Uitklapbare opsommingstekens aanbieden (toekomstige link)

  • Opsommingstekens tonen/verbergen (toekomstige link)

  • Een em-spatie of twee spaties na een zin plaatsen (toekomstige link)

Aanbevolen technieken voor richtlijn 1.4

Bron: How to meet WCAG 2.0, guideline 1.4 (Engelstalig)
Links in deze sectie verwijzen naar Engelstalige content.

  • Leesbare fonts gebruiken (toekomstige link)

  • Er voor zorgen dat tekst in afbeeldingen van tekst ten minste 14 punts is en een goed contrast heeft (toekomstige link)

  • Een mechanisme aanbieden van zeer goed zichtbare markering voor links of bedieningselementen, zodra ze de toetsenbordfocus krijgen (toekomstige link)

Gangbare fouten: praktijksituaties die veroorzaken dat webcontent niet voldoet

Als een 'gangbare fout' uit deze sectie van toepassing is, dan wordt niet aan het succescriterium voldaan.

Bron: How to meet WCAG 2.0, success criterion 1.4.8 (Engelstalig)
Links in deze sectie verwijzen naar Engelstalige content.

  • F24: Voldoet niet aan Succescriteria 1.4.3, 1.4.6 en 1.4.8 doordat voorgrondkleuren worden gespecificeerd zonder dat ook achtergrondkleuren worden gespecificeerd of vice versa

  • F88: Voldoet niet aan Succescriterium 1.4.8 door gebruik van tekst die is uitgevuld (uitgelijnd naar zowel de linker- als de rechtermarge)

Normatieve content op deze pagina

De volgende content op deze pagina heeft de status 'normatief' en is ongewijzigd overgenomen uit het normdocument Webrichtlijnen versie 2: