Was ist Text größenanpassung?
Die Größenanpassung von Text bezieht sich auf die Möglichkeit der Benutzer, die Schriftgröße auf einer Website oder in einer Anwendung anzupassen, entweder durch Browser-Zoom, Betriebssystem Einstellungen oder unterstützende Technologie. Sie ist eine Schlüsselkomponente der Barrierefreiheit und gewährleistet Lesbarkeit, Benutzerkontrolle und Unterstützung für Benutzer mit Sehschwäche, Leseschwäche oder altersbedingten Beeinträchtigungen.
Beispiel: Ein Benutzer erhöht den Browser-Zoom auf 150 %, und der gesamte Text bleibt lesbar, ohne dass Inhalte abgeschnitten oder überlagert werden.
Warum die Größenanpassung von Text für die Barrierefreiheit im Web wichtig ist
Text, dessen Größe nicht angepasst werden kann, stellt ein Zugangshindernis dar, insbesondere für Benutzer, die auf größere Schriftarten angewiesen sind, um den Text zu verstehen. Die Größenanpassung trägt zur Verbesserung der Lesbarkeit bei, verringert die Belastung der Augen und unterstützt eine bessere Benutzererfahrung.
Gemäß WCAG 2.1 (Erfolgskriterium 1.4.4):
"Text muss bis zu 200% in der Größe veränderbar sein, ohne dass Inhalt oder Funktionalität verloren gehen."
Zugänglichkeits gesetze wie das ADA (USA) und das BFSG (Deutschland) verlangen die Einhaltung dieser Richtlinien und machen die Größenanpassung von Text zu einer rechtlichen und ethischen Verantwortung.
Unterstützung von Browser-Zoom und Größenanpassung
Um die Kompatibilität mit den Werkzeugen zur Größenänderung von Text und zum Zoomen zu gewährleisten, sollte Ihr Layout fließend und flexibel sein:
✅ Verwenden Sie relative CSS-Einheiten
Verwenden Sie em, rem oder % anstelle von px für Schriftarten und Abstände.
✔️ Beispiel:
body {
font-size: 1rem;
}
h1 {
font-size: 2.25rem;
}
✅ Vermeiden Sie feste Höhen oder Breiten für den Inhalt
- Lassen Sie Container natürlich ausdehnen wenn der Text wächst.
❌ Höhe: 200px;
✔️ Verwenden Sie min-height oder auto für Flexibilität.
✅ Verwenden Sie max-width anstelle von absoluten Breiten
- Damit wird sichergestellt, dass der Text richtig umbrochen wird und bei größeren Größen nicht überläuft.
Praktische Tipps für TYPO3, WordPress & UI Design
TYPO3-Tipps:
- verwenden Flüssige Vorlagen mit relativen Einheiten.
- Testen Sie Seitenlayouts bei 200% Zoom mit den Browser-Entwicklungstools.
- Achten Sie darauf, dass in den vom Backend verwalteten Inhaltsblöcken nichts abgeschnitten wird.
WordPress-Tipps:
- Wählen Sie Themes, die barrierefreiem Prinzipien folgen.
- Vermeiden Sie Visual-Builder-Plugins, die feste Pixel Höhen festlegen.
- Testen Sie die Textskalierung mit Plugins wie "Zoom Accessibility" oder den Standardeinstellungen des Betriebssystems.
Allgemeine UI/UX-Tipps:
- ✅ Stellen Sie sicher, dass Schaltflächen und Eingaben proportional zum Text skaliert werden.
- ✅ Behalten Sie eine ausreichende Zeilenhöhe und Polsterung für eine gute Lesbarkeit.
- ✅ Bieten Sie nach Möglichkeit Optionen zur Skalierung der Schrift an (z. B. Symbolleiste für Barrierefreiheit mit Umschalter für die Schriftgröße).
Häufige Fehler und Korrekturen
❌ Verwendung von px für Schriftarten und Layout
✔️ Fix: Verwenden Sie rem oder em für Skalierbarkeit und Barrierefreiheit.
❌ Fixierte Containergrößen, die das Layout beim Zoomen zerstören
✔️ Fix: Flexible Breiten und automatische Höhen verwenden.
❌ Überlaufender Text oder abgeschnittener Inhalt bei 150-200% Zoom
✔️ Fix: Verwenden Sie ein responsives Design und testen Sie verschiedene Zoomstufen.
Verwandte Begriffe erforschen: Bildschirmlupe, Farbkontrast, Barrierefreiheit im Web, WCAG, Semantisches HTML
Wichtigste Erkenntnis
Beider Größenanpassung von Text geht es darum, die Präferenzen und Bedürfnisse der Benutzer zu berücksichtigen:Wenn Ihr Inhalt beim Zoomen nicht mehr richtig dargestellt wird, wird die Benutzerfreundlichkeit beeinträchtigt. Durch die Gestaltung flexibler, skalierbarer Typografie unterstützen Sie Lesbarkeit, Inklusion und Konformität- alles in einem.
Möchten Sie Ihre Typografie zoom freundlich gestalten?
Führen Sie einen Test mit dem T3AA Accessibility Analyzer durch oder holen Sie sich unsere Checkliste zur Größenanpassung von Text für Entwickler.Machen Sie Text skalierbar. Gestalten Sie klar und deutlich. Befähigen Sie jeden Leser.