Textskalierung des Betriebssystems berücksichtigen

Übersicht

Nutzer mit Sehbehinderungen konfigurieren die Textskalierung häufig auf Betriebssystemebene (z. B. „Dynamischer Text“ unter iOS oder „Schriftgröße“ unter Android/ChromeOS). Standardmäßig ignorieren mobile Browser diese Einstellungen für Bedienungshilfen auf Betriebssystemebene, um zu verhindern, dass ältere Websites mit festen Pixeln visuell beeinträchtigt werden.

Anstatt Ihre Seite statisch zu halten oder sich auf benutzerdefinierte, fehleranfällige JavaScript-Layoutberechnungen zu verlassen, können Sie die native Textskalierung des Betriebssystems mit dem <meta name="text-scale">-Tag aktivieren. Wenn diese Funktion aktiv ist, skaliert der Browser die Stamm-Schriftgröße (1rem) dynamisch entsprechend der Betriebssystemeinstellung des Nutzers. Dadurch können alle relativen (rem/em) Schriftgrößen, Layouts und Abstände automatisch und reibungslos skaliert werden.

Implementierung

1. Betriebssystem-Textskalierung aktivieren

Fügen Sie das <meta name="text-scale">-Element in das <head>-Element Ihres Dokuments ein. Dadurch wird unterstützenden Browsern signalisiert, dass Ihr Layout modern, anpassungsfähig und sicher skalierbar ist:

<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. Relative Typografie und Abstände verwenden

Definieren Sie Schriftgrößen mit relativen Einheiten (rem oder em) anstelle von festen Pixeln (px). Verwenden Sie für Zeilenhöhen Werte ohne Einheit, damit sie proportional zur berechneten Schriftgröße jedes Elements skaliert werden.

Verwenden Sie relative Einheiten für Ränder und Abstände, wenn der Abstand an die Textgröße gekoppelt ist oder sich an die Skalierung des Textes anpassen muss. Für Abstände, die unabhängig vom Text sind, können gegebenenfalls feste Einheiten verwendet werden, sofern die Skalierung nicht dazu führt, dass Text abgeschnitten wird, sich überlappt, Inhalte verloren gehen oder das Layout unbrauchbar wird:

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;
}

Legen Sie die Basis-Textgröße für body nur fest, wenn das Design eine andere Größe als die übernommene Browser-Standardgröße erfordert. Andernfalls lassen Sie die Größe übernehmen. Legen Sie die Größe bestimmter Elemente wie Überschriften mit relativen Einheiten wie rem oder em fest. Verwenden Sie rem für eine Größe, die sich auf die Schriftgröße des Stammelements bezieht, und em, wenn die Größe von der Schriftgröße des übergeordneten Elements abhängen soll. Legen Sie keine benutzerdefinierte Schriftgröße für :root oder html fest.

Flüssige Typografie

Bei der flexiblen Typografie KÖNNEN viewport-relative Einheiten wie vw verwendet werden, sofern die Schriftgrößen auch eine schriftrelative Komponente wie rem oder em enthalten. Weitere Techniken für die fluide Skalierung, einschließlich Containerabfrageeinheiten und clamp(), finden Sie unter Fluide Skalierung.

Vermeiden Sie es, die Textgröße ausschließlich mit Darstellungsbereichseinheiten festzulegen:

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

Kombinieren Sie stattdessen einen schriftartbezogenen Wert mit einer Darstellungsbereich-bezogenen Skalierung und verwenden Sie relative Mindest- und Höchstgrenzen:

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

Testen Sie, ob die Textgröße auf mindestens 200 % der Standardgröße geändert werden kann, ohne dass Inhalte oder Funktionen verloren gehen. Eine nützliche Faustregel für die flüssige Typografie ist, dass die maximale Schriftgröße nicht mehr als das 2,5-Fache der minimalen Schriftgröße betragen sollte. Testen Sie auch den Reflow bei einer Darstellungsbereichsbreite von 320 CSS-Pixeln (entspricht einem Zoom von 400 % bei einem Darstellungsbereich mit einer Breite von 1.280 CSS-Pixeln). Inhalte MÜSSEN ohne zweidimensionales Scrollen verfügbar bleiben, außer wenn dies unbedingt erforderlich ist.

3. Skalierbare responsive Haltepunkte verwenden

Bei responsiven Haltepunkten darf NICHT davon ausgegangen werden, dass der Text seine Standardgröße beibehält. Wenn ein Breakpoint auf den verfügbaren Platz für Text reagieren soll, sollten Sie inhaltsgesteuerte Layouts, Containerabfragen oder em-basierte Medienabfragen anstelle von festen Pixelschwellenwerten verwenden.

Testen Sie responsive Layouts mit aktivierter Textskalierung des Betriebssystems und aktiviertem Browserzoom. Der Text MUSS lesbar und der Inhalt sichtbar bleiben, ohne dass es zu Überlappungen, abgeschnittenen Inhalten oder horizontalem Scrollen kommt.

4. Zeilenumbruch und flexible Höhen sicherstellen

Wenn Text vergrößert wird, benötigen Elemente mehr vertikalen und horizontalen Platz, um ein Abschneiden oder Überlappen zu verhindern. Damit Ihre Komponenten robust bleiben, sollten Sie Ihre Layouts so gestalten, dass sie sich dynamisch an den Inhalt anpassen, anstatt starre Koordinaten zu erzwingen:

• Textcontainer vergrößern lassen: Komponenten und Container, die Text enthalten, MÜSSEN sich vergrößern lassen, um skalierten Text aufzunehmen. Vermeiden Sie feste height- oder block-size-Werte und restriktive max-height- oder max-block-size-Werte, die zu Clipping oder Überlauf führen können. Bevorzugen Sie die inhaltsgesteuerte Größenanpassung. Verwenden Sie min-height oder min-block-size nur, wenn eine Mindestgröße erforderlich ist.
• Natürlichen Zeilenumbruch zulassen: Schränken Sie den Zeilenumbruch auf der Inline-Achse nicht mit white-space: nowrap für Blöcke ein, die Sätze enthalten. Lassen Sie den Text natürlich in neue Zeilen umbrechen.
• Flexible Flexbox- und Grid-Umbruch verwenden (optionales Beispiel): Verwenden Sie für mehrspaltige Kartengalerien umfließende Spalten wie repeat(auto-fit, minmax(min(100%, 16rem), 1fr)), damit Elemente vertikal gestapelt werden, wenn ihre relativen Breitenwerte überschritten werden:

/* 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. DO NOT Override the Root Font Size

Wenn du die Funktion über das <meta name="text-scale" content="scale">-Element aktivierst, darfst du das Stamm-font-size in deinem Stylesheet NICHT explizit festlegen. Dies umfasst Deklarationen für :root oder html und gilt für absolute Einheiten, relative Einheiten und berechnete Werte.

Überschreiben Sie beispielsweise nicht die Schriftgröße des Stammelements mit einem festen Wert:

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

Kombiniere die <meta name="text-scale" content="scale">-Aktivierung nicht mit env(preferred-text-scale), um die Textskalierung des Betriebssystems manuell anzuwenden. Der Browser wendet die Skalierung über das Meta-Opt-in an. Wenn Sie beides verwenden, kann dies zu einer doppelten Skalierung führen:

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

Überlassen Sie die Schriftgröße des Stammelements dem Browser. Der Browser verarbeitet die Textskalierung des Betriebssystems automatisch und wendet sie auf Inhalte an, deren Größe relativ zur Stammschriftgröße ist.

Fallback-Strategien

In Browsern, die <meta name="text-scale" content="scale"> nicht unterstützen, wird das Layout entsprechend angepasst. Auf der Seite wird das Layout mit der Standard-Basisschriftgröße des Browsers (normalerweise 16 px) angezeigt. Der Nutzer kann weiterhin die Standardoptionen für manuelles Zoomen oder die Pinch-to-Zoom-Optionen verwenden.