Succescriterium 1.4.4 Herschalen van tekst

Niveau AA

Lees de officiële tekst van succescriterium 1.4.4 Herschalen van tekst

• Vergroten: rem en em

  Zoomen werkt in elke browser, ook als maten in pixels zijn opgeschreven. De instelling voor de standaard tekstgrootte werkt echter alleen met relatieve eenheden — en dat is de instelling die bezoekers één keer aanzetten en daarna vergeten.

  /* volgt de instelling van de bezoeker niet */
  body { font-size: 16px; }
  
  /* volgt hem wel */
  body { font-size: 1rem; }
  h2   { font-size: 1.6rem; }

  Laat ook maten meegroeien met de tekst. Gebruik een minimumhoogte in plaats van een vaste hoogte, en geef de leesbreedte op in tekens:

  .knop {
    padding: 0.7em 1.4em;
    min-block-size: 2.75rem;   /* geen height */
  }
  
  p { max-inline-size: 68ch; }

  em rekent met de tekstgrootte van het onderdeel zelf, rem met die van de pagina. Voor ruimte binnen een knop is em handig, voor alles daarbuiten rem.

  Zet de zoomfunctie nooit uit. Deze regel staat nog in sjablonen van jaren geleden: <meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no">. Haal alles achter width=device-width, initial-scale=1 weg.

  Thema’s

  Ontwerp Tekst

  Doelgroepen

  Auditeur Ontwikkelaar Vormgever

  Wie het raakt

  Je ziet slecht

  Hulpmiddelen

  Schermvergroting

  Open dit onderwerp op een eigen pagina

• Vergroten: zo test je het

  Deze test kost een minuut per pagina en vindt de meeste fouten.

  Ga als volgt te werk:

  • Druk vier keer op Ctrl en de plus-toets (op een Mac Command en plus). Je zit dan op 200%.
  • Lees de pagina van boven naar beneden.
  • Bedien alles: open het menu, vul een formulier in, druk op een knop.

  Doe daarna de tweede test, die vaker wordt overgeslagen: zet in de browserinstellingen de standaard tekstgrootte op zeer groot en laat de zoom op 100%. Dat is een andere instelling en legt andere fouten bloot, vooral tekstgroottes die in pixels vastliggen.

  Waar je op let:

  • Tekst die uit een knop of kader loopt.
  • Twee stukken tekst die over elkaar heen vallen.
  • Een knop of link die buiten beeld schuift.
  • Een menu dat niet meer opengaat of het hele scherm vult.
  • Tekst in een afbeelding die wazig wordt in plaats van groter.

  Dat de pagina langer wordt en er meer gescrold moet worden is geen fout. De eis is dat er niets verdwijnt, niet dat het ontwerp hetzelfde blijft.

  Thema’s

  Ontwerp Tekst

  Doelgroepen

  Auditeur Ontwikkelaar Vormgever

  Wie het raakt

  Je ziet slecht

  Hulpmiddelen

  Schermvergroting

  Open dit onderwerp op een eigen pagina

• Vergroten: wat het criterium vraagt

  Tekst moet tot 200% vergroot kunnen worden zonder dat er inhoud of functies verdwijnen. Dat moet lukken zonder hulpmiddelen: een vergrotingsprogramma telt niet mee, het moet werken met wat de browser zelf biedt. Veel mensen vergroten tekst zonder zichzelf slechtziend te noemen.

  Waar het misgaat:

  • Tekst in een afbeelding. Die wordt wazig in plaats van groter; dat valt ook onder 1.4.5.
  • Vaste hoogtes. De tekst groeit, de knop niet, en de onderste regel verdwijnt.
  • Tekstgroottes in pixels die de browserinstelling negeren.
  • Een menu dat op 200% over de inhoud valt of niet meer opengaat.

  Dit criterium is de lagere lat van twee. 1.4.10 Reflow Reflow gaat over wat er gebeurt bij 400% zoom, als de pagina zich helemaal moet herschikken. Ze overlappen, maar 1.4.4 Herschalen van tekst is de oudere en lichtere eis.

  Thema’s

  Ontwerp Tekst

  Doelgroepen

  Auditeur Ontwikkelaar Vormgever

  Wie het raakt

  Je ziet slecht

  Hulpmiddelen

  Schermvergroting

  Open dit onderwerp op een eigen pagina