WCAG-succescriterium 1.4.10 Reflow

Niveau AA

Uitleg

De gebruiker moet de webpagina 400% kunnen vergroten in de browser. Het gaat hierbij om alle elementen van een webpagina.

Alle functies, zoals het menu, moeten werken en zichtbaar zijn. Alle tekst moet leesbaar zijn.

Er mag geen inhoud buiten beeld vallen, onbereikbaar of verborgen zijn of gedeeltelijk verborgen worden door andere inhoud wanneer de gebruiker 400% inzoomt of op een buitengewoon klein scherm werkt (320 bij 256 pixels).

Zorg ervoor dat er geen horizontale scrollbar nodig is. Uitzonderingen zijn voor onderdelen die in essentie twee-dimensionaal zijn, zoals tabellen, grafieken, video's en landkaarten.

Definieer in de CSS een wijze om lange woorden af te breken en door te laten lopen op de volgende regel. Voorkom zo een horizontale scrollbar en onleesbare tekst.

Hoe te testen

Er zijn minimaal 2 manieren om tot 400% te vergroten en dit criterium te testen.

1. Stel de schermbreedte van de browser op 1280 pixels breedte. Dit kan vaak via de developer tools. Zoom vervolgens in in de browser naar een percentage van 400%.
2. Stel de schermbreedte van de browser in op 320 pixels breedte. Dit komt overeen met 1280 pixels en 4 maal vergroten.

Als de browser op 1 van deze 2 manieren ingesteld is, controleer dan het volgende:

• Er mogen geen horizontale scrollbars zijn.
• Alle content moet bereikbaar en leesbaar zijn. Het hoeft niet meteen zichtbaar te zijn. Dit mag ook in accordions of andere uitklapbare delen zijn.
• Alle functionaliteit moet ook bereikbaar en bruikbaar zijn. Een ingeklapt menu is een voldoende alternatief voor een zichtbaar menu.

Er is een uitzondering voor content die voor het gebruik of de betekenis een tweedimensionale lay-out vereist. Denk hierbij aan bepaalde tabellen, kaarten en datavisualizaties die niet gesplitst en gescheiden kunnen worden. In die gevallen kunnen er lokaal scrollbars aanwezig zijn.

Gebruikersonderzoek

Heb je gebruikersonderzoek gedaan dat betrekking heeft op dit succescriterium en wil je dit delen? Kijk eens bij Gebruikersonderzoeken delen op gebruikersonderzoeken.nl.

W3C referenties

• Engelse tekst van het WCAG-succescriterium: 1.4.10 Reflow.

• Nederlandse vertaling van het WCAG-succescriterium: 1.4.10 Reflow.

• Engelstalige informatie op How to Meet WCAG: Quick Reference 1.4.10 Reflow.

• Engelstalige toelichting: Understanding SC 1.4.10 Reflow.

  Belangrijk: De richtlijnen van NL Design System zijn geen wettelijke verplichting

  De richtlijnen van NL Design System zijn niet wettelijk verplicht en zijn geen vervanging voor de wettelijk geldende WCAG 2.1 specificatie.

  Ons doel is om praktische uitleg en voorbeelden te geven die helpen bij het toegankelijk inzetten van de NL Design System componenten, patronen en richtlijnen. We doen dat op basis van een interpretatie van de nieuwe WCAG 2.2 specificatie.

  Weten waar je volgens de wet aan moet voldoen? Ga dan naar wat is verplicht van DigiToegankelijk.

Help richtlijn verbeteren

Deze pagina's over WCAG worden onderhouden door het NL Design System. Heb je aanvullingen of opmerkingen? Deel je mening op GitHub.