Zum Inhalt springen
44 Barrierefreiheit Dokumentation

1.4.10 - Umbrüche (Reflow)

AA 2.1 Design, Umsetzung

Ziel

Inhalt und Funktionalität muss mit wenigen Ausnahmen auch bei eingeschränkter Breite oder Höhe ohne zweidimensionales Scrollen verfügbar bleiben.

Beschreibung

  • Inhalte müssen so gestaltet werden, dass sie bei Vergrößerung und Anpassung des Ansichtsfensters lesbar und vollständig zugänglich bleiben.
  • Vermeidung von horizontalem Scrollen, wenn Inhalte für vertikales Scrollen optimiert sind (und umgekehrt).
  • Inhalte, die zweidimensionales Layout erfordern, wie Landkarten, Tabellen oder Videos, sind von dieser Anforderung ausgenommen.

Anforderungen

  • Responsives Layout entwickeln, das sich an Bildschirmgrößen und Zoomstufen anpasst.
  • Inhalte so strukturieren, dass bei Vergrößerung ein einspaltiges Layout ohne horizontales Scrollen ermöglicht wird.
  • Für Datentabellen und Grafiken Alternativen oder angepasste Ansichten bereitstellen.

Code-Beispiele

CSS für responsives Reflow-Layout:
@media screen and (max-width: 320px) {
  body {
    font-size: 1.2em; /* Anpassung der Schriftgröße */
  }
  .content {
    display: block;
    margin: 0 auto;
    max-width: 100%;
  }
  img {
    max-width: 100%;
    height: auto;
  }
}
Beispiel für Flexbox, um Inhalte dynamisch umzustellen:
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}


.item {
  flex: 1 1 100%; /* Standardmäßig einspaltig */
}


@media screen and (min-width: 768px) {
  .item {
    flex: 1 1 48%; /* Zwei Spalten auf größeren Bildschirmen */
  }
}