Tipps zur Barrierefreiheit beim Textzoom

Text Zoom Accessibility Tips

Damals, als ein Benutzer Ctrl / Cmd mit + / - Tasten zum Vergrößern und Verkleinern verwendete, vergrößerten Browser nur die Textgröße. Dies würde die Lesbarkeit mit reinen Textinhalten erhöhen, aber statische Inhalte, wie z. B. Bilder, würden bleiben.

Wenn heute jemand die Standard-Zoomfunktion des Browsers verwendet, zoomen moderne Browser, indem sie die Größe des Darstellungsbereichs verringern ; Wenn der Inhalt zunimmt, werden CSS-Breakpoints ausgelöst und Inhalte angezeigt, die für kleinere Bildschirme entwickelt wurden. Dadurch erscheint alles größer und bleibt dennoch lesbar.

Während die moderne Ansichtsfenster-Zoomfunktion geschätzt wird, verwenden einige Leute immer noch Werkzeuge, um nur die Textgröße zu erhöhen. Je nachdem, wie das CSS codiert wurde, konnte das Zoomen von Text nur zu einigen Barrieren für die Barrierefreiheit führen, hauptsächlich zur Lesbarkeit von reinem Textinhalt.

Gemäß 1.4.4 Resize text sollen Nutzer auf bis zu 200% zoomen können und dennoch Textinhalte lesbar haben.

Problematisches CSS

Diese Probleme stammen normalerweise von CSS, das statische Einheiten verwendet, dh Pixel für die Größenanpassung. Nehmen Sie das folgende Beispiel:

 .card { height: 200px; overflow: hidden; width: 400px; }

Wenn jemand mit diesem CSS über Text hineinzoomt, schränkt die statische Größenanpassung die Lesbarkeit des Textes ein; Die Inhaltsgröße wird erhöht, aber die Textansicht wird eingeschränkt.

Flexible Größeneinheiten

Um dieses Problem zu umgehen, lassen Sie zu, dass Text- und Inhaltscontainer organisch wachsen, wenn die Textgröße geändert wird. Beim Schreiben von barrierefreiem CSS sind statische Größeneinheiten wie px zu vermeiden. Verwenden Sie nach Möglichkeit flexible Einheiten wie % , em oder rem .

 .card { height: 12.5rem; overflow: hidden; width: 25rem; }

Mit diesem CSS wird die Größe des Inhaltscontainers jetzt zusammen mit dem Text geändert, wenn ein Nur-Text-Zoom initiiert wird. Dies liegt daran, dass die Größe der em -Einheit auf der Schriftgröße des Containers basiert.

Schauen Sie sich die Demo an:

Wie man testet

Es gibt einige Chrome-Browsererweiterungen, die Sie zum Testen verwenden könnten, aber es wird empfohlen, die integrierte Textzoomfunktion mit Firefox zu verwenden. So erreichen Sie dies:

  1. Laden Sie die betreffende Website mit Firefox
  2. Stellen Sie sicher, dass der Textzoom aktiviert ist, indem Sie zu „Ansicht“ gehen, „Zoom“ auswählen und „Nur Text zoomen“ auswählen.
  3. Passen Sie die Textgröße mit den Tasten Cmd / Ctrl und + auf 200% an und sehen Sie sich den Seiteninhalt an

Es ist zu erwarten, dass Elemente mit zunehmender Textgröße entsprechend skaliert werden. Was jedoch tatsächlich passiert, ist, dass der Text an Größe zunimmt, der Inhalt verdeckt und schwer lesbar wird. Dies ist die Zugänglichkeitsbarriere, die wir vermeiden müssen.

Denken Sie daran, was hier wichtig ist, ist, dass Textinhalte lesbar und konsumierbar sind. Wenn Text auf 200% gezoomt wird, erscheinen das Layout und andere Teile oft nicht optimal, aber wenn der Inhalt lesbar ist, haben Sie diese Anforderung erfüllt.

WCAG-Erfolgskriterien

Dies kommt auf 1.4.4 Textgröße ändern zurück, in dem es heißt:

„Mit Ausnahme von Bildunterschriften und Textbildern kann Text ohne Hilfsmittel um bis zu 200 Prozent ohne Inhalts- oder Funktionsverlust in der Größe verändert werden.“

Ressourcen:

Zurück zum Blog