Wer kennt sie nicht, die Icons und Auswahllisten, um die Schrift auf Webseiten zu vergrößern? Diese Widgets gibt es schon recht lange, und sie werden immer noch als Merkmal der Barrierefreiheit eingesetzt. Vor kurzem war ich beauftragt, die Entwicklung einer Website qualitätssichernd zu begleiten. Eine Kundenanforderung war es, einen solchen Style–Switcher im Layout der Seite zu integrieren. Das ist für mich Grund genug gewesen, meine Gedanken darüber aufzuschreiben.
Historisch gesehen meine ich, dass die Style–Switcher vor circa 10 Jahren immer häufiger eingesetzt wurden. Der Grund dafür war wohl weniger die Barrierefreiheit, sondern dass Webdesigner damals eine sehr kleine Schrift für die Textdarstellung genutzt haben. Statt mit einer größeren Schrift zu arbeiten, wurden die Style–Switcher eingesetzt, damit die Inhalte gelesen werden konnten.
Das Offensichtliche muss keinem auf die Nase gebunden werden
Wenn eine Webseite barrierefrei ist, dann freut sich doch ein Nutzer oder er nimmt es gar nicht wahr. Wenn die Website nicht barrierefrei ist, ärgert er sich oder er weist die Anbieter auf die Probleme der Zugänglichkeit hin. Aus Anbietersicht passt hier das Motto „No news is good news.“
Das Lob für eine barrierefreie Seite bleibt meist aus. Wenn die Sicht des behinderten Nutzers eingenommen wird, dann ist das nur zu verständlich. Persönlich meine ich, eine Webseite hat barrierefrei zu sein genauso wie sie hübsch und gebrauchstauglich sein soll. Wer die Barrierefreiheit vernachlässigt, macht seine Arbeit nicht richtig. Und wer meint, Behinderte müssen in Lobgesänge ausbrechen bei der Entdeckung einer barrierefreien Webseite – und diese Haltung habe ich in den letzten 10 Jahren immer wieder bei Internetverantwortlichen vernehmen müssen – der hat seinen Job nicht verstanden.
Natürlich ist die Praxis nicht ganz so simpel, aber darum geht es in diesem Beitrag nicht. Vielmehr geht es darum, dass Style–Switcher scheinbar als Indikator für Barrierefreiheit wahrgenommen werden. Nach meiner Erfahrung kommen die Style–Switcher nicht dann zum Einsatz, wenn eine Webseite barrierefrei ist, sondern wenn Anbieter diesen Eindruck vermitteln wollen. Ein weiterer Grund für die Einbindung von Style–Switchern ist die Neigung mancher Anbieter, möglichst viele „Spielereien“ auf Webseiten einzubauen. Unter dem Strich sagt ein Style–Switcher nichts über die Barrierefreiheit einer Webseite aus.
Wer braucht den Style–Switcher überhaupt?
Wenn Sie meinen, Sehbehinderte nutzen Style–Switcher, möchte ich Ihnen folgende Gedanken entgegenhalten:
- Es gibt Sehbehinderungen wie Sand am Meer und der individuelle Vergrößerungsbedarf ist durchaus unterschiedlich. Wer regelmäßig mehr als eine zweifache Vergrößerung braucht, wird ein Vergrößerungssystem oder eine einfache Bildschirmlupe einsetzen. Der Grund ist ganz einfach: Mit einem Vergrößerungssystem wird alles auf dem Bildschirm vergrößert von Inhalten, Symbolleisten und Menüs über Tooltips bis hin zu Dialogfenstern.
- Ein Style–Switcher bietet meist zwei oder drei Vergrößerungsstufen und selten kann damit Text auf mehr als 200% der Ausgangsschriftgröße vergrößert werden. Hat der Nutzer einen höheren Vergrößerungsbedarf ist die Wahrscheinlichkeit durchaus gegeben, dass ein Style–Switcher vorher gar nicht erkannt wird. Damit ein Style–Switcher auch für eine vierfache oder zehnfache Vergrößerung überhaupt genutzt werden kann, muss der Style–Switcher bei durchschnittlicher Darstellung schon ziemlich groß sein.
Von einem Style–Switcher profitieren folglich diejenigen Nutzer, die den Style–Switcher erkennen und bedienen können, also einen geringeren Vergrößerungsbedarf haben. Diese Nutzer können selbstverständlich auch sehbehindert sein, aber sie stellen bestenfalls einen Teil der Sehbehinderten dar. Aber: Wer ein Vergrößerungssystem benutzt, wird dessen Funktionen benutzen. Ein Style–Switcher würde nur die Inhalte des Browsers vergrößern können.
Textvergrößerung muss schon sein
Die Textvergrößerung ist im barrierefreien Webdesign immer wieder ein Thema gewesen. Schon in den Web Content Accessibility Guidelines 1.0 aus dem Jahr 1999 gab es eine Anforderung, die die Verwendung relativer Schriftgrößen forderte, wodurch Text im Browser vergrößert und verkleinert werden konnte. Obwohl die Anforderung „nur“ auf Priorität 2 zu finden war, taucht sie fast immer in solchen „Top 10“-Regeln der Barrierefreiheit auf, was mich erinnert: Der Wikipedia-Eintrag zu barrierefreiem Webdesign ist überarbeitungswürdig.
Bei der Einschätzung der Barrierefreiheit ist es immer gut, wenn auf ein Regelwerk zurückgegriffen werden kann. Die Richtlinien für barrierefreie Webinhalte werden vom W3C zwischenzeitlich als Web Content Accessibility Guidelines (WCAG) 2.0 geführt. Sie gibt es als offizielle deutsche Übersetzung und zwischenzeitlich sind sie als ISO/IEC 40500 ebenfalls verfügbar. In Deutschland wurden die WCAG 2.0 als Grundlage für die Barrierefreie Informationstechnik-Verordnung 2.0 herangezogen.
In der WCAG 2.0 wird u.a. die zweifache Textvergrößerung auf der mittleren von drei Prioritätsstufen gefordert. In den Erläuterungen zur Anforderung wird recht deutlich formuliert, dass der Seitenzoom des Browsers ausreicht, um die Anforderung zu erfüllen. Ob das tatsächlich auf einer konkreten Webseite funktioniert, muss zwar überprüft werden, aber in den allermeisten Fällen dürfte der Textvergrößerung bereits durch die Seitenzoom-Funktion im Browser genügt werden.

Worauf es bei der Textvergrößerung ankommt, ist dass es bei der zweifachen Vergrößerung nicht zu „Unfällen“ kommt, wo Texte abgeschnitten oder überlagert werden. Weil ein Webdesigner den Seitenzoom austricksen kann durch eine Vermengung von absoluten und relativen Maßeinheiten, muss für jedes Design die Textvergrößerung immer noch überprüft werden.
Auf der höchsten Prioritätsstufe der WCAG 2.0 gibt es eine weitere Anforderung zur Textvergrößerung. Diese verschärfte Anforderung formuliert sinngemäß, dass bei der zweifachen Vergrößerung jede „Textspalte“ ohne horizontales Scrollen auf Desktop- und Laptop-Rechnern gelesen werden muss. Nun, die Verletzung dieses Kriteriums habe ich bei meinen Webseitentests immer wieder festgestellt, aber erstens war das nicht häufig und zweitens wird die Erreichung der höchsten Prioritätsstufe der Richtlinien von meinen Kunden eigentlich nicht angestrebt. Webdesigner, die sich auch nur oberflächlich mit der Textvergrößerung befassen, werden schnell merken, dass diese Anforderung auf den meisten Webseiten sogar mit fixen Schriftgrößen zu erreichen ist – unabhängig von den Möglichkeiten des responsiven Webdesigns.
Vor dem Hintergrund der Barrierefreiheit wird der Seitenzoom als ausreichende Möglichkeit der zweifachen Textvergrößerung angesehen. Es darf dabei lediglich nicht zu Textüberlappungen oder abgeschnittenen Texten kommen.
Der technische Unterschied: Elastisch oder flüssig
Im Normalfall werden beim Seitenzoom ab einer gewissen Vergrößerung die Inhalte rechts aus dem Browserfenster geschoben und Nutzer müssen horizontal scrollen, um die Inhalte vollständig lesen zu können. Diese Art der Vergrößerung nennt sich „elastisch“: es findet eine proportionale Vergrößerung der Webseite sowohl in der Horizontalen als auch in der Vertikalen statt.
Die immer wieder auftauchenden Diskussionen zur Textvergrößerung sind darin begründet, dass das horizontale Scrollen selbstverständlich problematisch sein kann. Die Alternative zum elastischen Layout ist das flüssige Layout: Wenn die Inhalte nicht mehr im Browser-Fenster passen, wird der Text und/oder das Layout umgebrochen. Verschiedene Anwendungen verfolgen diese Strategie, etwa der Browser Opera oder der Adobe Reader. In den meisten Browsern muss aber der Webentwickler dieses Verhalten im CSS berücksichtigen. Nur: Mit CSS 2 gab es Grenzen der Umsetzbarkeit und die Überbrückung der Darstellungsfehler mit JavaScript ist eine Tüftelei.
Mit CSS3 gibt es mit responsivem Webdesign neue Möglichkeiten, das Zusammenspiel von Schriftgröße und Fensterbreite zu gestalten. Hier entstehen zwar neue Probleme, weil das responsive Webdesign primär auf mobile Geräte und nicht auf Textvergrößerung als solche abzielt, aber die Textvergrößerung mit CSS3 wird in Browsern wesentlich umfangreicher unterstützt. Allerdings, da CSS3 keine fertige Spezifikation ist, muss diese Entwicklung noch abgewartet werden.
Best Practice geht über den Seitenzoom hinaus
Der Seitenzoom hat seine Grenzen. Sobald ein Nutzer horizontal scrollen muss, um Inhalte zu lesen, wird die Bedienung der Seite schwieriger. Deshalb ist die Berücksichtigung eines Webdesigns, das sich an von Nutzern bevorzugten Schriftgrößen und Fensterbreiten anpasst, empfehlenswert.
Um es Nutzern leichter zu machen, Text zu vergrößern, ist die Verwendung relativer Schriftgrößen empfehlenswert. Damit erhalten Nutzer eine zweite Möglichkeit der Textvergrößerung. Relative Schriftgrößen sind darüber hinaus eine Grundlage – nicht die Voraussetzung – für ein flüssiges Layout, d.h. wenn ein flüssiges Layout entwickelt wird, sollten auch relative Schriftgrößen berücksichtigt werden.
Layouts mit relativen Maßeinheiten sollten für ein flüssiges Layout eingesetzt werden, denn erst dann kann der Nutzer einen zusätzlichen Nutzen daraus ziehen, indem bei Textvergrößerung auf das horizontale Scrollen verzichtet wird. Mit einem elastischen Layout ist gegenüber dem Seitenzoom kaum etwas gewonnen.
Ein Style–Switcher kann nur auf die basalen Techniken aufsetzen und üblicherweise wird ein elastisches Layout dabei als Grundlage verwendet. Das ist einfach umzusetzen. Die Vorteile halten sich allerdings in Grenzen:
- Nutzer mit einem regelmäßigen Bedarf an Textvergrößerung sollten sich zu helfen wissen, auch mit der dafür üblichen Tastenkombination
Strg
++
. Damit wird meistens der Seitenzoom aktiviert. - Die Nachbildung von Browserfunktionen innerhalb einer Webseite ist meistens nicht begründbar. Links auf Webseiten, die dazu dienen, die Seite auszudrucken, zum Anfang der Seite zu springen oder eben den Text zu vergrößern sind Browserfunktionen und sind nur in Ausnahmefällen nützlich. Meistens sind sie aber überflüssig.
Nur wenn weder Seitenzoom noch die reine Schriftvergrößerung im Browser funktionieren, lässt sich ein Style–Switcher mit der Barrierefreiheit begründen. Einen Nutzen stiftet ein Style–Switcher im Allgemeinen nur dann, wenn ein flüssiges (oder responsives) Layout berücksichtigt wird, d.h. das horizontale Scrollen vermieden wird.