Weergave en toegankelijkheid

Iemand zoomt je website in naar 400%. De tekst past niet meer op het scherm. Woorden overlappen elkaar, knoppen verdwijnen en scrollen moet ineens in twee richtingen. Dat werkt niet.

Je website hoort goed te werken bij het vergroten van tekst, een andere schermoriëntatie en aangepaste tekstinstellingen. Dit valt onder vier succescriteria van de richtlijnen voor toegankelijkheid van webcontent: 1.3.4 Weergavestand, 1.4.4 Herschalen van tekst, 1.4.10 Reflow en 1.4.12 Tekstafstand. In dit artikel behandel ik ze alle vier.

Wie heeft hier baat bij?

Uit het Survey of Users with Low Vision #2 van WebAIM onder mensen met een visuele beperking bleek dat de meest gebruikte hulpmiddelen schermvergroting (48%), schermlezers (45%) en browserzoom (44%) zijn. Daarna volgt het aanpassen van de lettergrootte (37%). Mensen met een visuele beperking gebruiken vaker schermvergroting dan een schermlezer.

Staande én liggende oriëntatie

Succescriterium 1.3.4 Weergavestand stelt dat webcontent niet mag vastzitten aan één schermoriëntatie. Je website moet dus werken in zowel staande (portrait) als liggende (landscape) modus. Dit criterium gaat alleen over het vergrendelen van de oriëntatie. Veranderingen in de layout door een ander schermformaat vallen hier niet onder.

Waarom is dit belangrijk? Niet iedereen kan een apparaat zomaar draaien. Iemand met een motorische beperking die een tablet aan zijn of haar rolstoel heeft gemonteerd, kan het scherm niet zomaar kantelen. Iemand met een visuele beperking kan het scherm bewust in liggende modus willen houden om de tekst breder en groter weer te geven.

Wat moet je doen?

Het goede nieuws: je hoeft meestal niks te doen. Een ‘gewone website’ roteert automatisch mee met de oriëntatie van het apparaat. Problemen ontstaan pas als een ontwikkelaar de oriëntatie actief vergrendelt. Dit komt vaker voor bij apps dan bij websites.

Er is een belangrijk verschil tussen een oriëntatie die de gebruiker zelf vergrendelt op het apparaat en een oriëntatie die de ontwikkelaar afdwingt in de code. Een gebruiker die zelf de oriëntatie vergrendelt via het besturingssysteem, maakt een eigen keuze. Dat is geen fout. Een fout ontstaat pas als de website via de code de oriëntatie vergrendelt.

Wanneer mag je de oriëntatie wél beperken?

Alleen als de oriëntatie essentieel is voor de werking. Geldige voorbeelden zijn een piano-app die liggend genoeg toetsen moet tonen, een bank-app die een cheque scant in liggende modus en presentatieslides voor een beamer. In de praktijk komt dit zelden voor.

“Het ziet er beter uit in liggende modus” is natuurlijk géén geldige reden.

Veelgemaakte fouten

• Oriëntatie vergrendelen via code: Ontwikkelaars kunnen de oriëntatie op verschillende manieren vergrendelen: via JavaScript of het manifest van een Progressive Web App. Het resultaat is hetzelfde: de website werkt maar in één richting.
• Content verbergen bij de “verkeerde” oriëntatie: Een overlay tonen met “Draai je apparaat” en de content erachter verbergen met display: none is niet toegestaan.

Hoe test je dit?

Open je website op een telefoon of tablet met de oriëntatielock uitgeschakeld. Bekijk de pagina in staande en liggende modus. Controleer of alle content en functionaliteit beschikbaar is in beide standen.

Tekst vergroten tot 200%

Alle tekst op je website moet tot 200% vergroot kunnen worden. Zonder verlies van content of functionaliteit. En zonder hulptechnologie: gewoon met de zoomfunctie van de browser. Dit is een eis van succescriterium 1.4.4 Herschalen van tekst.

Het criterium geldt niet voor ondertitels en afbeeldingen van tekst. Die hoeven niet te schalen bij 200%.

Wat betekent 200%?

Als tekst standaard 16 pixels groot is, dan moet die 32 pixels kunnen worden. Bij 200% zoom mag er niks verdwijnen, overlappen of onleesbaar worden.

Bij een responsieve website kan de tekstgrootte in CSS-pixels wisselen per breakpoint. Dat is geen probleem. Wat telt is dat de tekst ergens 200% van de oorspronkelijke grootte kan bereiken.

Browserzoom of een eigen tekstvergroter?

Browsers hebben twee manieren om tekst groter te maken: browserzoom en de tekstgrootte-instelling. Browserzoom maakt de hele pagina groter. De tekstgrootte-instelling vergroot alleen de tekst.

Voor succescriterium 1.4.4 Herschalen van tekst hoef je er maar één te ondersteunen. Browserzoom is genoeg. Je hoeft dus geen eigen tekstvergroter op je website te bouwen. Een knop met ‘A+’ en ‘A-‘ is geen verplichting. Werkt browserzoom goed tot 200%? Dan voldoe je.

Zoom uitschakelen via de viewport-meta

De <meta name="viewport">-tag bepaalt hoe een browser de pagina weergeeft op mobiele apparaten. Met de attributen user-scalable=no of maximum-scale=1.0 blokkeer je zoom voor de gebruiker.

<!-- Fout -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<!-- Goed -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Sommige browsers negeren deze attributen tegenwoordig, maar vertrouw daar niet op: in andere browsers en omgevingen werken deze instellingen misschien nog wel.

Viewport-eenheden voor tekst

Als je font-size instelt met alleen viewport-eenheden zoals vw of vh, dan reageert de tekst niet op de tekstgrootte-instelling van de browser. Een gebruiker die in de browserinstellingen 24 pixels als standaard heeft ingesteld, ziet bij font-size: 2vw nog steeds de door jou bepaalde grootte. Gebruik in plaats daarvan clamp() of calc() met een rem-waarde als basis.

Veelgemaakte fouten

• Vast formaat container: Een container met een vaste breedte en hoogte en overflow: hidden snijdt de tekst af als het te groot wordt.
• Zoom uitschakelen met de viewport-meta: De instelling maximum-scale=1.0 of user-scalable=no blokkeert mogelijk zoom op mobiele apparaten.
• Formuliervelden die niet meeschalen: Browsers geven formuliervelden standaard een vaste lettergrootte. Bij 200% zoom schalen ze daardoor niet mee. Voeg font: inherit toe aan formulierelementen zodat ze meegroeien.

Hoe test je dit?

Zoom je browser naar 200%. Controleer of alle tekst leesbaar is (dus geen overlappende, afgesneden of verdwenen tekst) en controleer of alle functionaliteit werkt.

Niet horizontaal scrollen bij inzoomen

Succescriterium 1.4.10 Reflow stelt dat bij viewport van 320 CSS pixels breed je website niet in twee richtingen mag scrollen.

Wat betekent 320 CSS pixels?

Dit criterium draait om de effectieve breedte van het scherm. Een desktopscherm van 1280 pixels breed bij 400% zoom geeft een effectieve breedte van 320 pixels. Dat is vergelijkbaar met een klein mobiel scherm.

Wat mag er veranderen?

De layout mag veranderen. Een navigatiemenu dat naar een hamburgermenu gaat, een sidebar die onder de content schuift, een grid van drie kolommen dat naar één kolom gaat: dat mag allemaal. Het aanpassen of verplaatsen van content is géén verlies van informatie of functionaliteit.

Uitzonderingen

Sommige content heeft echt twee dimensies nodig, voor die content geldt een uitzondering. Denk aan datatabellen, kaarten, diagrammen, filmpjes en interfaces met een werkbalk zoals een beeldbewerker. De uitzondering geldt alleen voor dat specifieke onderdeel. De rest van de pagina moet wél herschalen.

Bij tabellen geldt de uitzondering alleen voor de tabel als geheel. De individuele cellen binnen die tabel moeten wél herschalen. Tekst in een cel mag dus niet worden afgesneden of in twee richtingen scrollen. Ook de content die bij een tabel hoort maar geen onderdeel is van de tabel zelf, is niet uitgezonderd. Denk aan een kop boven de tabel, een zoekveld, of paginering onder de tabel.

Een horizontale scrollbalk op paginaniveau is geen automatische fout. Als de scrollbalk alleen bestaat omdat een uitgezonderd element zoals een filmpje breder is dan het weergavekader, en alle andere content wél herschaalt, dan voldoet de pagina. Beter is het om de uitgezonderde content in een eigen scrollbare container te plaatsen. Dan verschijnt de horizontale scrollbalk alleen bij dat element.

Hoe groot mag een vast element zijn?

Een vast element, zoals een sticky header of cookiebanner, neemt ruimte in op het scherm. Bij 100% zoom valt dat niet op. Bij 400% zoom kan zo’n element bijna het hele scherm vullen.

WCAG noemt geen vaste grens, maar een werkbare vuistregel is: een vast element neemt bij 400% zoom niet meer dan 20% van de schermhoogte in beslag. Nemen je sticky header, cookiebanner of chatvenster te veel ruimte in? Maak ze kleiner, laat ze meescrollen of klap ze in.

Veelgemaakte fouten

• Content die verdwijnt bij kleine weergavekaders: Functionaliteit verbergen bij een klein weergavekader is een fout. Als een zoekfunctie op desktop beschikbaar is, dan moet het ook beschikbaar zijn bij 320 pixels.
• Lange woorden en URL’s die uit hun container lopen: Zonder overflow-wrap: break-word kunnen lange woorden horizontaal scrollen veroorzaken.
• Vaste elementen die het scherm vullen: Een sticky header die bij 100% prima is, kan bij 400% zoom soms meer dan de helft van het scherm innemen. Ditzelfde geldt voor andere elementen met position: fixed of position: sticky, zoals cookiebanners, chatvensters en advertenties.

Hoe test je dit?

Open de browser DevTools en schakel responsive modus in. Stel de breedte in op 320 pixels. Of zoom je browservenster naar 400% (bij een vensterbreedte van 1280 pixels). Controleer of je alleen verticaal hoeft te scrollen en of er geen content verdwijnt of overlapt.

Tekstafstand aanpassen zonder problemen

Succescriterium 1.4.12 Tekstafstand stelt dat content niet mag breken als een gebruiker de tekstafstand aanpast. Het gaat om vier stijleigenschappen: regelhoogte, alinea-afstand, letterafstand en woordafstand.

Waarom is dit belangrijk?

Mensen met een visuele beperking passen deze instellingen aan om tekst beter te kunnen lezen. Extra letter- en woordafstand helpt mensen met dyslexie flink bij het lezen.

Wat zijn de vier waarden?

De gebruiker moet deze vier aanpassingen tegelijk kunnen doen zonder dat er content verdwijnt of overlapt:

Dit criterium eist niet dat je deze waarden standaard toepast. Het eist dat je website niet kapot gaat als een gebruiker ze instelt via een custom stylesheet, een bookmarklet of een browserextensie. Zolang jouw code het aanpassen niet actief blokkeert, voldoe je aan het criterium.

Afgekapte tekst met een ellipsis

Soms kan een container niet meegroeien vanwege beperkingen in het ontwerp, zoals een kop in een tabel of een navigatie-item. Als tekst wordt afgekort met een ellipsis/drie puntjes (…) na het toepassen van de stijleigenschappen, dan is dat toegestaan. Maar alleen als er een manier is om toch de volledige tekst te zien. Bijvoorbeeld via een toegankelijke tooltip of via de pagina waar het item naar verwijst. Is er geen manier om de afgesneden tekst te lezen? Dan is het wél een fout.

Uitzonderingen

Dit criterium geldt niet voor afbeeldingen van tekst en ondertitels die zijn toegevoegd aan het beeld van een filmpje (open captions).

Daarnaast geldt een uitzondering voor talen en schriften die niet alle vier de stijleigenschappen gebruiken. Japans gebruikt bijvoorbeeld geen woordspatiëring. In dat geval hoeft een Japanse pagina alleen te voldoen aan de stijleigenschappen die voor Japans relevant zijn.

Veelgemaakte fouten

• Vaste hoogte op tekstcontainers: Een container met height: 200px en overflow: hidden snijdt tekst af als de regelafstand toeneemt. Gebruik min-height in plaats van height, of laat de hoogte helemaal weg.
• Absolute positionering van tekst: Tekst die met position: absolute op een vaste plek staat, kan over andere elementen heen schuiven als de tekstafstand groter wordt.
• !important met te lage waarden in inline styles: Een inline style als letter-spacing: 0.05em !important kan niet overschreven worden door een custom stylesheet. De tekst kan dan niet de minimale eisen volgen.

Hoe test je dit?

Gebruik de Stylus-browserextensie, hiermee kun je aangepaste CSS-stijlen gebruiken.

* {
    line-height: 1.5 !important;
    letter-spacing: .12em !important;
    word-spacing: .16em !important;
}
p {
    margin-bottom: 2em !important;
}

Een alternatief is de bookmarklet voor tekstafstand van Dylan Barrell. Dit is een klein stukje JavaScript dat je als bladwijzer opslaat. Als je het activeert, past het de stijleigenschappen aan naar de vereiste minimumwaarden. Controleer daarna of er content verdwijnt, overlapt of wordt afgesneden.

Veelvoorkomende misverstanden

• “Een responsieve website voldoet automatisch.” Niet waar. Responsief design is een goede basis. Maar sites kunnen nog steeds content verbergen bij smalle weergavekaders, viewport-eenheden voor tekst gebruiken of vaste hoogtes hebben die breken bij aangepaste tekstafstand.
• “Pixels zijn prima, want browserzoom schaalt ze.” Pixels reageren niet op de lettergrootte-instelling van de browser. De instelling html { font-size: 16px; } overschrijft een gebruiker die standaard 24 pixels heeft ingesteld.

Vereisten en aanbevelingen voor een toegankelijke weergave

Dit zijn de vereisten en aanbevelingen voor een toegankelijke weergave:

WCAG-vereisten

• Vergrendel de schermoriëntatie niet. Laat je website werken in staande en liggende modus.
• Blokkeer inzoomen niet via de viewport-meta. Gebruik <meta name="viewport" content="width=device-width, initial-scale=1.0">zonder maximum-scale of user-scalable=no.
• Zorg dat je layout herschaalt naar één kolom bij een weergavekader van 320 pixels breed.
• Verberg geen content of functionaliteit bij een smal weergavekader. Als iets op desktop beschikbaar is, moet het ook beschikbaar zijn bij 320 pixels breed.
• Zorg dat de regelafstand, alinea-afstand, letterafstand en woordafstand van tekst kunnen worden aangepast.

Aanbevolen

• Gebruik relatieve eenheden als rem en em voor lettergroottes. Vermijd vaste pixels en viewport-eenheden.
• Gebruik geen vaste hoogtes met overflow: hidden op tekstcontainers.
• Gebruik Flexbox met flex-wrap: wrap of CSS Grid met auto-fit voor layouts die automatisch herschalen.
• Wikkel datatabellen in een scrollbare container met overflow-x: auto, role="region" en een beschrijvend aria-label-attribuut.
• Gebruik font: inherit op formuliervelden zodat ze de lettergrootte van de pagina overnemen.

Gerelateerde succescriteria

Dit artikel behandelt de volgende WCAG-succescriteria:

• 1.3.4 Weergavestand (niveau AA)
• 1.4.4 Herschalen van tekst (niveau AA)
• 1.4.10 Reflow (niveau AA)
• 1.4.12 Tekstafstand (niveau AA)