Hallo zusammen! Lasst uns ein wenig über das Zoomen per Pinch-Geste auf Mobilgeräten sprechen. Eine wichtige Funktion beim Surfen auf Mobilgeräten ist es, Inhalte zum Lesen vergrößern und anschließend verkleinern zu können, um sie auf der Seite zu finden. Leider herrscht unter Entwicklern und Designern im Bereich Responsive Webdesign das Missverständnis, dass eine ordnungsgemäß umgesetzte Website mit responsivem Webdesign kein Zoomen zulassen muss.
Ich möchte mich eingehend mit den Auswirkungen auf die Barrierefreiheit befassen, die entstehen, wenn man das Zoomen per Pinch-Geste deaktiviert. Ich werde verschiedene Beispiele dafür erläutern, was passiert, wenn Entwickler und Designer diese Funktion sowohl auf iOS- als auch auf Android-Geräten deaktivieren, und schließlich darlegen, warum sie das Zoomen per Pinch-Geste nicht deaktivieren sollten.
Wenn Sie möchten, können Sie hier meinem aufgezeichneten Walkthrough folgen:
WCAG 2.0 und Zoomen durch Auf- und Zuziehen
Beim „Pinch-to-Zoom“ vergrößert ein Nutzer die Ansicht auf einem Mobilgerät, indem er die Finger am Bildschirm zusammen- oder auseinanderzieht, wodurch sich die Ansicht vergrößern und verkleinern lässt. Manchmal entscheiden sich Designer und Entwickler dafür, diese Funktion zu deaktivieren. Schauen wir uns einmal an, was mit dem Code passiert, wenn diese Funktion deaktiviert wird. Ein wichtiger Codeabschnitt unter dem Meta-Tag heißt beispielsweise „Viewport“. Ich werde die Vor- und Nachteile der Deaktivierung dieses Codeabschnitts erörtern.
Gemäß den Richtlinien für barrierefreie Webinhalte (WCAG) des World Wide Web Consortium (W3C) gibt es das Erfolgskriterium 1.4.4 mit dem Titel „Textgröße ändern“. Es lautet: „Mit Ausnahme von Bildunterschriften und Textbildern kann die Textgröße ohne assistive Technologie um bis zu 200 % vergrößert werden, ohne dass Inhalte oder Funktionen verloren gehen. Dieses Erfolgskriterium gehört zur Konformitätsstufe AA, der mittleren Konformitätsstufe, was bedeutet, dass die Webseite alle Erfolgskriterien der Stufen A und AA erfüllt. Wenn Entwickler und Designer das Zoomen per Pinch-Geste deaktivieren und verhindern, erfüllen wir dieses Erfolgskriterium tatsächlich nicht.“
Zoomen durch Auf- und Zuziehen auf iOS-Geräten
Das erste Beispiel, das ich Ihnen vorstellen möchte, veranschaulicht die Best Practice hinter dem Code für das Zoomen per Pinch-Geste. Dieser Code dient dem responsiven Design; er befindet sich im Head-Bereich und ist ein „meta name: viewport“-Tag. Der „viewport“-Name ist die Stelle, an der das Zoomen per Pinch-Geste deaktiviert werden kann, und es gibt zwei Möglichkeiten, das Zoomen per Pinch-Geste in diesem Meta-Tag zu deaktivieren. Schauen wir uns das etwas genauer an. Sie sehen einen Inhalt, und es gibt zwei Dinge, auf die Sie besonders achten sollten.
Zunächst sind „user-scalable=no“ und „maximum-scale=1.0“ gesetzt. Diese Tags sorgen dafür, dass das Zoomen per Zwei-Finger-Geste deaktiviert wird. Durch das Entfernen dieser Tags beheben Sie dieses Problem. Zudem haben Apple und die iOS-Geräte kürzlich ihre neuen Versionen so aktualisiert, dass dies nicht mehr möglich ist, was ein großer Fortschritt für die Barrierefreiheit ist. Selbst wenn jemand versuchen würde, diesen Code-Schnipsel einzufügen, würde das Zoomen per Berührung dadurch nicht deaktiviert werden.
Zoomen durch Auf- und Zuziehen auf Android-Geräten
Bei Android-Geräten ist dies jedoch nicht der Fall. Bei einem Android-Gerät wird dieser Meta-Tag weiterhin erkannt. Leider können Entwickler oder Designer die Zoomfunktion per Zweifinger-Geste deaktivieren.
Die beste Faustregel lautet: Wenn Sie sich bei etwas unsicher sind, versetzen Sie sich einfühlsam in die Lage des Endnutzers. Denken Sie an Kontrastprobleme bei der Nutzung eines Smartphones im Sonnenlicht oder an Menschen mit Sehbehinderung. Stellen Sie sich vor, Sie hätten eine eingeschränkte Feinmotorik. Oder dass der Entwickler beim responsiven Design nachlässig gearbeitet hat und die Zoomfunktion aktiviert sein muss, um die Seite überhaupt nutzen zu können (ja, das kommt vor). Nimm das Gerät zur Hand und teste es unter diesen Einschränkungen – und gestalte mit Blick auf Barrierefreiheit. Hinterlasse unten deine Kommentare und Fragen!
