1.4.10 Reflow niveau AA

Uitleg

Het WCAG-criterium 1.4.10 Reflow in WCAG 2.2 richt zich op het waarborgen van de bruikbaarheid en leesbaarheid van content bij verschillende schermformaten en zoomniveaus. Dit criterium vereist dat gebruikers een website kunnen inzoomen tot 400% zonder verlies van informatie of functionaliteit en zonder horizontaal scrollen (voor verticale inhoud) of verticaal scrollen (voor horizontale inhoud). Dit helpt mensen met visuele beperkingen en mensen die mobiele apparaten gebruiken om de inhoud gemakkelijker te zien en te navigeren zonder onnodig veel te scrollen.

Wat betekent dit in de praktijk?

In de praktijk betekent dit dat websites responsief moeten zijn en de layout flexibel moet kunnen aanpassen aan verschillende schermgroottes en zoomniveaus. Dit is cruciaal voor gebruikers die afhankelijk zijn van zoomfunctionaliteiten, zoals mensen met beperkte visuele mogelijkheden.

Wanneer een website bijvoorbeeld op een kleiner scherm wordt weergegeven of op 400% wordt ingezoomd, moet de inhoud vloeiend meeschalen en herschikken zonder dat het hele ontwerp onbruikbaar wordt of zonder dat er lange stukken moeten worden gescrold.

Voorbeeld van vereiste ondersteuning:

• Bij een vergroting van 400% op een desktop moet tekst en inhoud herhaaldelijk leesbaar blijven zonder dat horizontaal scrollen vereist is.
• Op mobiele apparaten moet de lay-out zich aanpassen aan het verticale of horizontale formaat van het scherm, zonder dat de gebruiker overmatige scrollbewegingen hoeft te maken.

Waarom is dit belangrijk?

Door reflow te ondersteunen, worden websites gebruiksvriendelijker en toegankelijker, vooral voor gebruikers met een visuele beperking of motorische beperking. Dit zorgt ervoor dat de inhoud leesbaar blijft zonder visuele vervorming of verlies van bruikbaarheid, wat essentieel is voor mensen die afhankelijk zijn van zoom- en vergrotingstechnologieën om content te consumeren.

Voorbeeld van het probleem

Stel je voor dat een gebruiker de tekst op een website vergroot naar 400% omdat hij slechtziend is. Bij sommige websites blijft de tekst niet binnen het scherm passen, waardoor de gebruiker voortdurend van links naar rechts moet scrollen om een enkele regel te lezen. Dit zorgt voor een frustrerende ervaring en is onpraktisch voor gebruikers die grotere tekst of aangepaste schermformaten nodig hebben.

Oplossing voor dit probleem

Webdesigners kunnen responsieve technieken gebruiken om te zorgen dat de inhoud zich flexibel aanpast en netjes binnen de schermgrenzen blijft, ook bij hoge zoomniveaus. Dit kan worden bereikt door gebruik te maken van media queries en flexibele layouttechnieken zoals CSS Flexbox of Grid.

Voorbeeld van implementatie

Een voorbeeld van een flexibele lay-out die zich aanpast aan verschillende schermgroottes:

/* Basis lay-out die meeschuift op basis van het schermformaat */
.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 1 100%;
}

/* Media query voor bredere schermen */
@media (min-width: 600px) {
  .item {
    flex: 1 1 50%; /* Past zich aan voor grotere schermen */
  }
}

In dit voorbeeld zorgt het gebruik van flex en media queries ervoor dat de inhoud op kleinere schermen automatisch een andere lay-out aanneemt, waardoor horizontaal scrollen vermeden wordt en de leesbaarheid behouden blijft bij hoge zoomniveaus.

Belangrijke overwegingen

• Media queries: Gebruik media queries om de lay-out aan te passen bij verschillende schermformaten en zoomniveaus.
• Responsieve beelden en video’s: Zorg ervoor dat beelden en video’s zich aanpassen aan de beschikbare breedte van het scherm.
• Flexibele gridstructuren: Gebruik CSS Grid of Flexbox om flexibele lay-outs te creëren die zich automatisch aanpassen aan de schermgrootte.

Alternatieve benaderingen

• Adaptieve ontwerpen: Gebruik adaptieve ontwerpen die specifieke lay-outs bieden voor verschillende devices (desktop, tablet, mobiel), naast responsieve technieken.
• Testen met zoom: Test je website regelmatig door in te zoomen tot 400% om er zeker van te zijn dat de inhoud correct blijft weergegeven zonder onnodig horizontaal scrollen.

Belangrijkste punten

• Ontwerp een lay-out die werkt bij een zoom van 400% zonder dat horizontaal scrollen nodig is voor verticale inhoud.
• Gebruik CSS Flexbox en Grid om lay-outs te creëren die zich aanpassen aan verschillende schermgroottes en resoluties.
• Zorg dat de inhoud leesbaar en functioneel blijft zonder onnodige scrollbewegingen of layoutproblemen.

Tools en Hulpmiddelen

• WAVE Web Accessibility Evaluation Tool: Een gebruiksvriendelijke tool die kan helpen bij het identificeren van toegankelijkheidsproblemen, inclusief reflow-problemen. WAVE.
• Axe Accessibility Checker: Test en controleer op toegankelijkheidsproblemen, waaronder reflow-ondersteuning voor verschillende schermgroottes. Axe.
• Responsive Design Mode in Browsers: Met ingebouwde tools zoals de responsieve weergave in Chrome DevTools kun je testen hoe je website zich gedraagt op verschillende schermgroottes en zoomniveaus.

Betekenis voor toegankelijkheid

Reflow-ondersteuning draagt bij aan een inclusieve gebruikerservaring voor mensen die afhankelijk zijn van vergroting, zoals slechtzienden en gebruikers van mobiele apparaten. Het zorgt ervoor dat alle content beschikbaar en leesbaar blijft, zelfs bij hogere zoomniveaus, zonder onnodig scrollen en zonder verlies van bruikbaarheid. Dit bevordert de leesbaarheid en gebruiksvriendelijkheid van websites voor een bredere groep gebruikers.

Referenties

• WCAG 2.2 Richtlijn 1.4.10 Reflow: De officiële documentatie van W3C voor dit criterium is te vinden op W3C WCAG 2.2 - Reflow.