Barrierefreiheit

Inhalte laufen über oder verdecken sich gegenseitig

Üblicher Schweregrad: mittel · Aufwand: gering

Woran du es erkennst

Mehrere sichtbare Elemente laufen horizontal über ihre Box oder den Viewport hinaus, oder das Zentrum sichtbarer Inhaltselemente wird von einem fremden, nicht verwandten Element verdeckt (gemessen an Bounding-Rects und elementFromPoint, absichtliche Overlays wie Sticky-Header ausgenommen).

Warum es zählt

Überlaufende oder verdeckte Inhalte lesen sich wie ein Defekt: Text wird unlesbar, Bedienelemente unerreichbar — und der Bruch passiert genau im sichtbaren Bereich, den jeder Besucher zuerst sieht. Verwandt mit WCAG 1.4.10 (Reflow): Inhalt darf nicht von der Seite fallen oder sich unlesbar überlagern.

So behebst du es

  1. Prüfe die gemeldeten Elemente im DevTools-Layout-Panel: feste Pixel-Breiten durch max-width/min()-Angaben ersetzen, damit Boxen mit dem Viewport atmen.
  2. Bei Überdeckungen die Stacking-Reihenfolge (z-index, position) korrigieren oder negative Margins/absolute Positionierung entfernen, die ohne Kollisionsprüfung arbeitet.
  3. Für überlaufenden Text overflow-wrap/word-break setzen und bei Tabellen horizontales Scrollen auf Container-Ebene erlauben, statt die Seite zu sprengen.
  4. Teste die betroffenen Seiten an mehreren Viewport-Breiten — Layout-Brüche dieser Art entstehen fast immer an genau einer Breakpoint-Kante.

Zum Nachlesen