Text muss ohne assistive Technologie (z. B. Screenreader) bis zu 200 % vergrößert werden können, ohne Informationsverlust oder Funktionseinschränkung.

• Menschen mit Sehbehinderung oder Leseschwierigkeiten benötigen größere Schrift.
• Viele vergrößern per Browser-Zoom (Strg +) oder benutzerdefinierte Schriftgrößen.
  • Inhalte müssen sich dabei flexibel anpassen, ohne dass:
  • Text abgeschnitten wird
  • Layout bricht
  • Inhalte überlappen oder verschwinden

G142 – Verwende relative Maßeinheiten für Text (z. B. em, rem, %), nicht px

Falsch (nicht skalierbar):

body {
  font-size: 14px;
}

Richtig (skalierbar):

html {
  font-size: 100%; /* entspricht meist 16px */
}

body {
  font-size: 1rem; /* skaliert mit Browser-Einstellung */
}

Vorteil: Wenn Nutzer den Zoom auf 200 % setzen, skaliert der Text mit – ohne Zusatztechnologie.

G178 – Inhalte bleiben bei 200 % Zoom vollständig sichtbar

Kombiniere flexible Schriftgrößen mit responsivem Layout:

.container {
  max-width: 100%;
  padding: 1rem;
  word-wrap: break-word;
}

Kein horizontaler Scroll, kein abgeschnittener Text

G206 - Vermeide absolut positionierte Container, die Text überdecken
G146 - Nutze Media Queries (z. B. min-width, max-width), um Layouts bei Vergrößerung anzupassen
G205 - Textgrößenänderung sollte ohne horizontales Scrollen möglich sein (ggf. mit 1.4.10 kombinieren)
G197 - Erlaube Nutzern, Schriftgröße selbst zu ändern (z. B. Buttons A+ / A-)

• Inhalte gehen verloren oder überlappen, wenn Text vergrößert wird
• Text ist in Grafik eingebettet (z. B. PNG mit Text) – lässt sich nicht vergrößern
• Vergrößerter Text erfordert horizontales Scrollen, um Absätze zu lesen
• Text ist vergrößert, aber Buttons oder Icons verdecken Inhalte