Häufig übersehene Barrierefreiheitsprobleme bei clamp()-Abständen und Lösungen

Zur Anpassung von Abständen wird in letzter Zeit häufig eine Umsetzung verwendet, bei der clamp() einen Wert zwischen Minimum und Maximum variabel festlegt.

Für responsives Design ist dies sehr praktisch, doch wenn man die Vergrößerungsfunktion (Zoom) für Barrierefreiheit berücksichtigt, gibt es eine kleine Falle.

Gängige clamp()-Beispiele

Um Abstände mit clamp() anzupassen, schreibt man oft etwa folgendermaßen.

:root {
  --clamp-base: 16;
  --clamp-viewport-min: 375;
  --clamp-viewport-max: 1440;

  --spacing-lg-min: 24;
  --spacing-lg-max: 48;

  --spacing-lg-slope: calc(
    (var(--spacing-lg-max) - var(--spacing-lg-min)) / (var(--clamp-viewport-max) - var(--clamp-viewport-min))
  );
  --spacing-lg-intersection: calc(
    (var(--spacing-lg-max) - var(--clamp-viewport-max) * var(--spacing-lg-slope)) / var(--clamp-base)
  );
  --spacing-lg: clamp(
    calc(var(--spacing-lg-min) / var(--clamp-base) * 1rem),
    calc(var(--spacing-lg-intersection) * 1rem + 100 * var(--spacing-lg-slope) * 1vw),
    calc(var(--spacing-lg-max) / var(--clamp-base) * 1rem)
  );
}

Auf eine ausführliche Erklärung verzichten wir hier:

• Auf Smartphones entspricht dies der Größe --spacing-lg-min
• Am PC entspricht dies der Größe --spacing-lg-max
• Dazwischen ist die Breite variabel und passt sich flexibel an

– ein sehr praktisches Muster, nicht wahr?

Welche Stolpersteine gibt es bei der Barrierefreiheit?

Die Schwierigkeit besteht darin, WCAG 2.0, Erfolgskriterium 1.4.4 „Textgröße ändern“ umzusetzen.

Dieses Kriterium wurde ursprünglich, bevor Smartphones weit verbreitet waren, mit der Absicht formuliert, dass Inhalte „auf dem PC auch bei 200 % Vergrößerung lesbar bleiben“. Dieselben Bedingungen gelten jedoch auch für Browser auf Smartphones.

Wenn man auf dem Smartphone auf 200 % vergrößert, treten häufig folgende Probleme auf.

1. Durch die Textvergrößerung (Zoom) werden rem-basierte Abstände mitvergrößert.
2. Dadurch werden die Ränder um den eigentlichen Inhalt übermäßig breit.
3. Im Ergebnis wird der Bereich für die Inhaltsanzeige extrem eingeengt, was zu Layoutfehlern und schlechter Lesbarkeit führt.

Hinweis: In der Praxis fällt allerdings auf, dass auch viele ausländische Regierungswebsites, bei denen WCAG-Konformität gesetzlich vorgeschrieben ist, dies kaum umsetzen. Vermutlich wird der Aufwand im Verhältnis zum Nutzen als zu hoch eingeschätzt, und da der Bedarf, auf dem Smartphone auf 200 % zu vergrößern, ohnehin gering ist, gilt dies vor Ort womöglich als „kein großes Problem“.

Wie lässt sich dieses Problem beheben?

Wichtig ist, statt rem viewport-basierte Einheiten wie vw zu verwenden, da diese von der Textvergrößerung betroffen sind, und dabei dafür zu sorgen, dass der Abstand beim Zoomen nicht unnötig groß wird.

Wird jedoch nur vw angegeben, geht der Vorteil von clamp() verloren, nämlich die Kontrolle über Mindest- und Höchstwerte.

Hier kommt die Funktion min() ins Spiel!

min() übernimmt von den übergebenen Werten den kleinsten...

So sieht die Schreibweise aus.

--spacing-lg: min(
  calc(var(--spacing-lg-min) / var(--clamp-viewport-min) * 100vw),
  clamp(
    calc(var(--spacing-lg-min) / var(--clamp-base) * 1rem),
    calc(var(--spacing-lg-intersection) * 1rem + 100 * var(--spacing-lg-slope) * 1vw),
    calc(var(--spacing-lg-max) / var(--clamp-base) * 1rem)
  )
);

Bei einer Darstellung mit 375 CSS px entspricht der erste Minimalwert von min() dem Wert von --spacing-lg-min, also 24 px, umgerechnet in 6,4 vw.

Der Mindestwert von clamp() beträgt 1,5 rem = 24 px, bei 200 % Zoom sind es jedoch 48 px. Daher ist der linke Wert 6,4 vw kleiner und wird angewendet.

Also:

• Normale Ansicht (100 % Darstellung):
  • Der Wert von clamp() fällt kleiner aus als der Wert auf Basis von vw.
  • min() übernimmt den kleineren der beiden Werte. Dadurch greift clamp() und die Darstellung passt sich der Bildschirmbreite an.
• Bei Vergrößerung (200 % Darstellung):
  • Bei Vergrößerung wächst das rem innerhalb von clamp(), und der Wert auf Basis von vw wird dadurch kleiner.
  • Es wird der Wert auf Basis von vw angewendet. Da die Abstände im Verhältnis zur Bildschirmbreite festgelegt sind, wird eine übermäßige Vergrößerung verhindert.

So lassen sich „responsive Flexibilität“ und „Berücksichtigung der Barrierefreiheit“ miteinander vereinen!

Hinweis: Bei der PC-Darstellung wirkt das Design meist ausgewogener, wenn auch die Abstände mit skaliert werden. Deshalb wird --clamp-viewport-min als Basis verwendet und die Regel nur auf Smartphones angewendet.

Tatsächliches Verhalten im Vergleich

Oben: nur clamp, unten: min + clamp.

Auf dem Smartphone werden die Unterschiede bei 200 % Vergrößerung deutlich sichtbar.

Hinweis: In iOS Safari lässt sich die Vergrößerung über das Symbol links in der Adressleiste steuern, in Android Chrome über das Symbol oben rechts.

Fazit

• clamp() eignet sich gut für flexible Abstände im responsiven Design.
• Bei einer Vergrößerung werden jedoch auch die Abstände mitvergrößert, was zu Layoutproblemen führen kann.
• In Kombination mit min() lässt sich eine ausgewogene Lösung umsetzen: im Normalfall flexibel, bei Vergrößerung kontrolliert.

Wenn Sie WCAG-Konformität im Blick haben, lohnt es sich, solche Implementierungen einzuplanen. Eine Umsetzung, die auf dem Smartphone auch bei 200 % Vergrößerung sauber funktioniert, ist noch selten, verbessert aber die Lesbarkeit im Alltag und reduziert zugleich Risiken im Bereich Accessibility.

Wenn Sie neben den Abständen weitere Feinanpassungen vornehmen möchten, können Sie zusätzlich Media Queries für schmale Breakpoints definieren.

@media (max-width: 239px) {
  /* 拡大時に適用したいCSS */
}

Beispiel: Bei einer 375 px breiten Ansicht, die auf 200 % vergrößert wird, berechnet der Browser die Viewport-Breite mit der halben Größe (ca. 188 px). Dadurch lässt sich genau diese enge Bedingung gezielt ansprechen.

Hinweis: Der Wert 239 px ist ein Beispiel. Sinnvoll ist es, ihn so festzulegen, dass zukünftige größere Bildschirme berücksichtigt werden, die normale Darstellung aber unverändert bleibt.

Kombiniert man „clamp() + min()“ mit einem Media Query für schmale Breakpoints, ergibt sich eine flexiblere und zuverlässigere Accessibility-Lösung!