Responsive & Zoom

Viewport-Konfiguration Muss

Jede Seite muss den Viewport korrekt konfigurieren:

<meta name="viewport" content="width=device-width, initial-scale=1">

Verboten:

<!-- Niemals: -->
<meta name="viewport" content="maximum-scale=1">
<meta name="viewport" content="user-scalable=no">

Beide Attribute verhindern, dass Nutzer die Seite vergrössern können, und verletzen WCAG 1.4.4.

Reflow bei 320px Breite Muss

Bei einer Viewport-Breite von 320 CSS-Pixel (entspricht 1280px bei 400% Zoom) darf kein horizontales Scrollen notwendig sein (WCAG 1.4.10).

• Inhalte müssen in einer einzigen Spalte dargestellt werden können
• Kein Inhalt darf abgeschnitten oder verdeckt werden
• Alle Funktionen müssen weiterhin erreichbar sein

Zoom bis 400% Muss

Die Seite muss bei Browser-Zoom von 100% bis 400% funktional bleiben (WCAG 1.4.10). Das bedeutet:

• Text wird nicht abgeschnitten
• Interaktive Elemente bleiben bedienbar
• Inhalte überlappen sich nicht
• Kein Informationsverlust

Relative Einheiten Muss

Grössen müssen in relativen Einheiten definiert werden, damit sie mit dem Zoom skalieren:

Text-Vergrösserung bis 200% Muss

Text muss bis 200% vergrössert werden können, ohne dass assistive Technologien benötigt werden und ohne Verlust von Inhalt oder Funktionalität (WCAG 1.4.4).

Orientierung Muss

Inhalte dürfen nicht auf eine bestimmte Bildschirmorientierung (Hochformat oder Querformat) beschränkt werden (WCAG 1.3.4), es sei denn, eine spezifische Orientierung ist essenziell (z.B. bei einem Klavier-Interface).

Testen

Responsive- und Zoom-Tests durchführen:

1. Browser auf 320px Breite setzen → kein horizontales Scrollen
2. Browser-Zoom auf 200% → kein Inhaltsverlust
3. Browser-Zoom auf 400% → Reflow in eine Spalte, alles bedienbar
4. Gerät drehen (Hoch-/Querformat) → Inhalt passt sich an
5. Schriftgrösse im Browser/OS erhöhen → Layout bricht nicht