Zum Inhalt springen
44 Barrierefreiheit Dokumentation

1.4.4 - Text muss bis zu 200 % vergrößert werden können

AA 2.0 Umsetzung

Ziel

Ermöglichen, dass Texte auf einer Webseite ohne unterstützende Technologien um bis zu 200 % vergrößert werden können, ohne dass Inhalte oder Funktionalitäten verloren gehen.

Beschreibung

  • Texte, einschließlich Beschriftungen und textbasierter Steuerelemente, müssen bei einer Vergrößerung von bis zu 200 % lesbar bleiben.
  • Vergrößerung darf nicht dazu führen, dass Inhalte abgeschnitten werden, sich überlappen oder dass horizontales Scrollen erforderlich wird.
  • Textbilder (Bilder, die Text enthalten) sind von der Regel ausgenommen, sollten jedoch nach Möglichkeit vermieden werden.

Anforderungen

  • Vermeiden Sie Textbilder, da diese bei Vergrößerung nicht skalierbar sind.

Code-Beispiele

Relative Schriftgrößen mit em:
body {
  font-size: 1em; /* Standardgröße */
}
Flexibles Layout mit Prozentangaben:
.container {
  width: 80%; /* Flexibler Container, passt sich der Textgröße an */
  padding: 1em;
}
Responsive Design mit Media Queries:
@media (max-width: 600px) {
  body {
    font-size: 1.5em; /* Größere Schrift für kleinere Geräte */
  }
}