Tekstschaling van besturingssysteem respecteren

Overzicht

Gebruikers met een visuele beperking stellen tekstschaling vaak in op het niveau van het besturingssysteem (zoals Dynamisch lettertype op iOS of Schaling van lettergrootte op Android/ChromeOS). Mobiele browsers negeren deze toegankelijkheidsinstellingen op OS-niveau standaard om te voorkomen dat verouderde websites met vaste pixels visueel kapotgaan.

In plaats van je pagina statisch te houden of te vertrouwen op aangepaste, kwetsbare JavaScript-berekeningen voor de vormgeving, kun je kiezen voor tekstschaling van het native besturingssysteem met de tag <meta name="text-scale">. Als deze functie actief is, schaalt de browser de grootte van het hoofdlettertype (1rem) dynamisch zodat deze overeenkomt met de voorkeur van het OS van de gebruiker. Zo kunnen alle relatieve (rem/em) lettergrootten, indelingen en tussenruimtes automatisch en soepel worden geschaald.

Implementatie

1. Aanmelden voor tekstschaling van OS

Plaats het element <meta name="text-scale"> in de <head> van uw document. Dit geeft aan ondersteunende browsers aan dat je indeling modern, aanpasbaar en veilig is om te schalen:

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />
  
  <!-- Opt this page into OS-level dynamic type and accessibility text scaling -->
  <meta name="text-scale" content="scale" />
  
  <title>Adaptive Accessibility Layout</title>
</head>

2. Relatieve typografie en afstand gebruiken

Definieer lettergrootten met relatieve eenheden (rem of em) in plaats van vaste pixels (px). Gebruik eenheidsloze waarden voor regelhoogten, zodat ze proportioneel worden geschaald met de berekende lettergrootte van elk element.

Gebruik relatieve eenheden voor marges en opvulling waarbij de afstand is gekoppeld aan de tekstgrootte of moet worden aangepast als de tekst wordt geschaald. Afstand die onafhankelijk is van tekst, kan vaste eenheden gebruiken als dat nodig is, op voorwaarde dat schalen niet leidt tot afkapping van tekst, overlapping, verlies van content of een onbruikbare indeling:

body {
  font-family: system-ui, sans-serif;
  /* Inherits the root font-size, which scales automatically with the OS setting */
  line-height: 1.5;      /* Unitless so it scales proportionally with computed font-size */
  padding: 1.5rem;       /* Scales proportionally to prevent dense crowding at larger scales */
}

h1 {
  font-size: 2.25rem;    /* Scales proportionally to the root base */
  margin-bottom: 1rem;
}

Stel de basisgrootte van de tekst alleen in op body als het ontwerp een andere grootte vereist dan de overgenomen browserstandaard. Laat de grootte anders overnemen. Stel formaten in voor specifieke elementen, zoals koppen, met relatieve eenheden zoals rem of em. Gebruik rem voor een grootte die is gerelateerd aan de hoofdlettergrootte en em als de grootte afhankelijk moet zijn van de lettergrootte van het bovenliggende element. Stel geen aangepaste lettergrootte in op :root of html.

Vloeiende typografie

Vloeiende typografie MAG viewport-relatieve eenheden zoals vw gebruiken, op voorwaarde dat lettergrootten ook een lettertype-relatieve component zoals rem of em bevatten. Ga naar Vloeiend schalen voor meer technieken voor vloeiend schalen, waaronder containerquery-eenheden en clamp().

Vermijd het gebruik van alleen viewport-eenheden voor de tekstgrootte:

/* ❌ DO NOT DO THIS: The font size does not respond fully to user text scaling */
.heading {
  font-size: 5vw;
}

Combineer in plaats daarvan een lettertype-relatieve waarde met viewport-relatieve schaling en gebruik relatieve minimum- en maximumgrenzen:

.heading {
  font-size: clamp(2rem, 1.25rem + 2vw, 4rem);
}

Test of de tekst kan worden vergroot tot minstens 200% van de standaardgrootte zonder dat er content of functionaliteit verloren gaat. Voor vloeiende typografie is een handige vuistregel om de maximale lettergrootte niet meer dan 2, 5 keer de minimale lettergrootte te maken. Test ook de herstroom bij een viewportbreedte van 320 CSS-pixels (gelijk aan 400% zoom van een viewport van 1280 CSS-pixels breed). Content MOET beschikbaar blijven zonder tweedimensionaal scrollen, behalve waar dit essentieel is.

3. Schaalbare responsieve breekpunten gebruiken

Responsieve breekpunten mogen er NIET van uitgaan dat tekst de standaardgrootte behoudt. Als een breekpunt is bedoeld om te reageren op de beschikbare ruimte voor tekst, geef je de voorkeur aan contentgestuurde lay-outs, containerquery's of op em gebaseerde mediaquery's in plaats van vaste drempelwaarden voor pixels.

Test responsieve indelingen met tekstschaling van het besturingssysteem en browserzoom aan. Tekst MOET leesbaar blijven en content MOET zichtbaar blijven zonder overlapping, afkapping of horizontaal scrollen.

4. Zorg voor tekstterugloop en flexibele hoogtes

Als tekst wordt opgeschaald, hebben elementen meer verticale en horizontale ruimte nodig om afkapping of overlap te voorkomen. Als je wilt dat je componenten robuust blijven, ontwerp je je lay-outs zo dat ze dynamisch worden uitgebreid rond de content in plaats van dat je vaste coördinaten afdwingt:

• Sta toe dat tekstcontainers groter worden: Componenten en containers die tekst bevatten, MOETEN groter kunnen worden om geschaalde tekst te kunnen bevatten. Vermijd vaste height- of block-size-waarden en beperkende max-height- of max-block-size-waarden die kunnen leiden tot afkapping of overloop. Geef de voorkeur aan contentgestuurde grootte. Gebruik min-height of min-block-size alleen als een minimale grootte nodig is.
• Natuurlijke tekstterugloop toestaan: Beperk tekstterugloop op de inline-as niet met white-space: nowrap voor blokken die zinnen bevatten. Laat tekst op een natuurlijke manier teruglopen naar nieuwe regels.
• Gebruik flexibele Flexbox- en Grid-wrapping (optioneel voorbeeld): Gebruik voor kaartgalerijen met meerdere kolommen kolommen met dynamische tekstomloop, zoals repeat(auto-fit, minmax(min(100%, 16rem), 1fr)), zodat items verticaal worden gestapeld als de drempelwaarden voor de relatieve breedte worden overschreden:

/* Card container using min-height to ensure expansion and auto-fit to reflow if needed */
.card {
  padding: 1.5rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  /* Use min-height so the box expands vertically when the font is enlarged */
  min-height: 10rem;
}

5. Overschrijf de lettergrootte van de hoofdtekst NIET

Als je je aanmeldt via het element <meta name="text-scale" content="scale">, stel je de root font-size NIET expliciet in je stylesheet in. Dit omvat declaraties op :root of html en is van toepassing op absolute eenheden, relatieve eenheden en berekende waarden.

Overschrijf de hoofdlettergrootte bijvoorbeeld niet met een vaste waarde:

/* ❌ DO NOT DO THIS: This can prevent the browser from applying text scaling */
html {
  font-size: 16px;
}

Combineer de aanmelding voor <meta name="text-scale" content="scale"> niet met env(preferred-text-scale) om tekstschaling van het besturingssysteem handmatig toe te passen. De browser past de schaal toe via de meta-opt-in. Als u beide gebruikt, kan dit leiden tot dubbele schaling:

/* ❌ DO NOT DO THIS: The meta opt-in already applies the operating system text scale */
:root {
  font-size: calc(1rem * env(preferred-text-scale));
}

Laat de lettergrootte van de root over aan de browser. De browser verwerkt de tekstschaal van het besturingssysteem automatisch en past deze toe op content die is aangepast aan de grootte van het hoofdlettertype.

Reservestrategieën

In browsers waarin <meta name="text-scale" content="scale"> niet wordt ondersteund, wordt de indeling op een nette manier aangepast. De pagina toont de indeling met de standaard basislettergrootte van de browser (meestal 16 px). De gebruiker kan nog steeds de standaardopties voor handmatig zoomen op de pagina of knijpen om te zoomen gebruiken.