Barrierefreiheit auf dem Smartphone: Typische Probleme und Lösungen
Eine Website sieht auf dem Smartphone gut aus und passt sich automatisch an die Bildschirmgröße an. Doch bedeutet das auch, dass sie barrierefrei ist? Nicht unbedingt. Kleine Schaltflächen, schwer bedienbare Menüs oder Inhalte, die bei einer Vergrößerung verschwinden, können die mobile Nutzung erheblich erschweren.
Gerade auf Smartphones zeigen sich Barrieren, die am Computer kaum auffallen. Die Bedienung erfolgt überwiegend über den Touchscreen, der verfügbare Platz ist begrenzt und viele Menschen verwenden zusätzliche Bedienungshilfen.
Deshalb reicht ein responsives Design allein nicht aus. Eine barrierefreie mobile Website muss auch bei unterschiedlichen Bildschirmgrößen, individuellen Einstellungen und alternativen Bedienmöglichkeiten zuverlässig funktionieren.
Mobile Barrierefreiheit geht über Responsive Webdesign hinaus
Responsive Webdesign sorgt dafür, dass sich eine Website an verschiedene Bildschirmgrößen anpasst. Bilder werden verkleinert, Spalten untereinander angeordnet und Navigationsmenüs häufig auf eine kompakte Darstellung umgestellt.
Für eine barrierefreie Nutzung sind jedoch weitere Aspekte entscheidend. Besucher müssen sämtliche Funktionen erreichen können, Bedienelemente zuverlässig betätigen und Inhalte auch bei vergrößerter Darstellung vollständig erfassen können.
Dabei entstehen auf Smartphones besondere Herausforderungen, die bei der Entwicklung einer Website berücksichtigt werden sollten. Wir zeigen, welche Probleme häufig auftreten und wie sich eine mobile Website zugänglicher gestalten lässt.
1. Zu kleine Schaltflächen erschweren die Bedienung
Auf einem Smartphone werden Links und Schaltflächen hauptsächlich mit den Fingern betätigt. Anders als bei einer Maus lässt sich dabei nicht jeder Punkt auf dem Bildschirm exakt auswählen.
Besonders kleine Symbole oder eng nebeneinanderliegende Bedienelemente können deshalb Schwierigkeiten verursachen.
Das betrifft beispielsweise kleine Pfeile in Bildergalerien, dicht angeordnete Navigationslinks oder mehrere Symbole unmittelbar nebeneinander.
Für Menschen mit motorischen Einschränkungen oder unkontrollierten Handbewegungen kann es besonders schwierig sein, die gewünschte Funktion zu treffen.
Die WCAG 2.2 sehen auf Konformitätsstufe AA für Bedienelemente grundsätzlich eine Mindestzielgröße von 24 × 24 CSS-Pixeln vor. Unter bestimmten Voraussetzungen sind kleinere Elemente zulässig, beispielsweise wenn ausreichend Abstand zu benachbarten Bedienelementen besteht.
Für die praktische Gestaltung sind jedoch häufig größere Schaltflächen sinnvoll.
Eine ausreichend große Klickfläche und genügend Abstand zwischen den Elementen erleichtern die Bedienung und reduzieren versehentliche Eingaben.
Dabei muss das sichtbare Symbol nicht zwangsläufig dieselbe Größe wie die gesamte bedienbare Fläche besitzen. Auch eine kleine Lupe oder ein Menüzeichen kann mit einer großzügig bemessenen Klickfläche versehen werden.
2. Mobile Navigationsmenüs sind nicht vollständig zugänglich
Auf Smartphones wird die Hauptnavigation häufig hinter einem Menüsymbol verborgen. Das spart Platz und ermöglicht eine übersichtliche Darstellung.
Allerdings können gerade solche mobilen Menüs zusätzliche Barrieren verursachen.
Ein typisches Problem entsteht, wenn sich Untermenüs nur durch bestimmte Berührungen öffnen lassen oder wichtige Funktionen nach dem Aufklappen nicht erreichbar sind.
Auch Menüs, die sich über den gesamten Bildschirm legen, müssen sorgfältig umgesetzt werden. Andernfalls kann es passieren, dass Besucher versehentlich Elemente im Hintergrund bedienen oder nach dem Schließen nicht an ihre vorherige Position zurückkehren.
Bei einer zugänglichen mobilen Navigation sollte deshalb Folgendes berücksichtigt werden:
- Menüs und Untermenüs müssen eindeutig bedienbar sein.
- Der geöffnete oder geschlossene Zustand sollte auch für unterstützende Technologien erkennbar sein.
- Die Navigation muss mit unterschiedlichen Eingabemethoden funktionieren.
- Beim Öffnen und Schließen darf die Orientierung innerhalb der Website nicht verloren gehen.
- Alle wichtigen Navigationspunkte müssen vollständig erreichbar bleiben.
Gerade bei umfangreichen Unternehmenswebsites ist eine sorgfältige Umsetzung wichtig, damit die mobile Navigation trotz begrenztem Platz übersichtlich bleibt.
3. Inhalte verschwinden bei vergrößerter Darstellung
Viele Menschen vergrößern Inhalte auf ihrem Smartphone, um Texte besser erkennen zu können.
Eine Website sollte diese individuellen Einstellungen unterstützen. Problematisch wird es, wenn Texte bei einer Vergrößerung abgeschnitten werden oder sich Elemente gegenseitig überlagern.
Besonders häufig entstehen solche Schwierigkeiten bei festen Höhenangaben, starren Spaltenbreiten oder Gestaltungselementen, die sich nicht flexibel an den verfügbaren Platz anpassen.
Auch horizontal scrollbare Bereiche können die Nutzung erschweren, wenn Besucher ständig zwischen verschiedenen Richtungen wechseln müssen, um zusammengehörige Informationen zu lesen.
Die WCAG enthalten deshalb Anforderungen an die Vergrößerbarkeit von Texten und den Umbruch von Inhalten. Für gewöhnliche vertikal scrollende Webseiten muss bei einer Darstellungsbreite von 320 CSS-Pixeln grundsätzlich eine Nutzung ohne horizontales Scrollen möglich sein. Für bestimmte Inhalte, beispielsweise komplexe Tabellen, bestehen Ausnahmen.
Entscheidend ist, dass die Website nicht nur bei den üblichen Smartphone-Breiten funktioniert, sondern auch mit vergrößerten Inhalten sinnvoll bedienbar bleibt.
Weitere Informationen zu Schriftgrößen und Lesbarkeit findest Du in unserem Beitrag „Schlechte Kontraste und kleine Schrift: Wenn Websites schwer lesbar sind“.
4. Wichtige Funktionen erfordern komplizierte Touchgesten
Wischen, Ziehen und andere Touchgesten gehören zur alltäglichen Smartphone-Nutzung. Sie können die Bedienung angenehm machen, sind jedoch nicht für alle Menschen gleichermaßen geeignet.
Manche Besucher können bestimmte Fingerbewegungen aufgrund motorischer Einschränkungen nur schwer ausführen. Andere verwenden zusätzliche Bedienungshilfen, die solche Gesten nicht auf die gleiche Weise unterstützen.
Problematisch sind beispielsweise:
- Bildergalerien, die ausschließlich durch Wischen bedient werden können
- Elemente, die sich nur durch Ziehen verschieben lassen
- Funktionen, die eine Bewegung mit mehreren Fingern voraussetzen
- Aktionen, die ausschließlich durch eine bestimmte Gerätebewegung ausgelöst werden
Solche Funktionen müssen nicht grundsätzlich vermieden werden.
Wichtig ist, dass für entsprechende Gesten geeignete alternative Bedienmöglichkeiten bereitstehen.
Eine Bildergalerie kann beispielsweise weiterhin per Wischbewegung genutzt werden, sollte aber auch über Schaltflächen zum Wechseln der Bilder verfügen.
Die WCAG berücksichtigen diese Anforderungen unter anderem bei komplexen Zeigergesten und Ziehbewegungen.
5. Hochformat und Querformat funktionieren nicht gleichermaßen
Smartphones können sowohl im Hochformat als auch im Querformat verwendet werden.
Für viele Besucher ist der Wechsel zwischen beiden Ausrichtungen selbstverständlich. Menschen mit körperlichen Einschränkungen können ihre Geräte jedoch möglicherweise nicht drehen oder verwenden Smartphones in einer festen Halterung.
Deshalb sollte eine Website grundsätzlich in beiden Ausrichtungen zugänglich sein.
Probleme entstehen beispielsweise, wenn:
- Inhalte im Querformat durch feststehende Elemente verdeckt werden
- Menüs bei geringer Bildschirmhöhe nicht vollständig erreichbar sind
- Schaltflächen außerhalb des sichtbaren Bereichs liegen
- eine Funktion ausschließlich in einer bestimmten Ausrichtung angeboten wird
Nach den WCAG der Stufe AA darf die Darstellung grundsätzlich nicht auf eine einzige Bildschirmausrichtung beschränkt werden, sofern diese Einschränkung für den Inhalt nicht wesentlich ist.
Eine flexible Gestaltung sollte deshalb nicht nur unterschiedliche Bildschirmbreiten, sondern auch verschiedene Bildschirmhöhen berücksichtigen.
6. Feststehende Elemente verdecken wichtige Inhalte
Auf vielen mobilen Websites werden bestimmte Bedienelemente dauerhaft am Bildschirmrand angezeigt.
Dazu gehören beispielsweise Kontaktbuttons, Navigationsleisten, Chatfunktionen oder Hinweise zur Nutzung der Website.
Solche Elemente können hilfreich sein, weil wichtige Funktionen jederzeit erreichbar bleiben. Auf kleinen Bildschirmen nehmen sie allerdings wertvollen Platz ein.
Besonders bei vergrößerter Darstellung kann es passieren, dass feststehende Bereiche einen großen Teil des sichtbaren Inhalts überdecken.
Auch mehrere gleichzeitig eingeblendete Elemente können sich gegenseitig beeinträchtigen.
Eine gute mobile Gestaltung berücksichtigt deshalb, wie viel Platz dauerhaft sichtbare Elemente beanspruchen und ob sich die übrigen Inhalte weiterhin problemlos erreichen lassen.
Feststehende Bedienelemente sollten die Nutzung erleichtern und nicht selbst zu einer Barriere werden.
Barrierefreiheit auf Smartphones richtig prüfen
Eine Website ausschließlich am Computer in einer verkleinerten Browseransicht zu betrachten, reicht für eine zuverlässige mobile Prüfung nicht aus.
Zwar lassen sich damit viele Darstellungsprobleme erkennen, doch die tatsächliche Touchbedienung und verschiedene Bedienungshilfen werden nur eingeschränkt abgebildet.
Deshalb sollten wichtige Funktionen auch auf echten mobilen Geräten geprüft werden.
Besonders aufschlussreich sind dabei Tests mit vergrößerter Darstellung, unterschiedlichen Bildschirmausrichtungen und den integrierten Bedienungshilfen der Betriebssysteme.
Unter Android und iOS stehen beispielsweise Screenreader sowie verschiedene Möglichkeiten zur Anpassung und alternativen Steuerung zur Verfügung.
Auch externe Tastaturen oder andere Eingabegeräte können bei der mobilen Nutzung eine Rolle spielen. Eine Website sollte ihre Bedienmöglichkeiten deshalb nicht unnötig auf Touchgesten beschränken.
Barrierefreie mobile Websites professionell gestalten lassen
Eine mobile Website sollte nicht nur auf unterschiedlichen Geräten gut aussehen, sondern auch für möglichst viele Menschen problemlos nutzbar sein.
Wir übernehmen die Prüfung, Planung, Gestaltung und technische Umsetzung barrierefreier Websites. Dabei berücksichtigen wir die mobile Darstellung ebenso wie die Bedienung am Computer.
Wir überprüfen bestehende Internetauftritte auf mögliche Probleme, entwickeln passende Lösungen und setzen die notwendigen Verbesserungen fachgerecht um. Auch bei neuen Websites achten wir von Anfang an darauf, dass Gestaltung und Funktionen auf unterschiedlichen Geräten zugänglich bleiben.
So entsteht ein moderner Internetauftritt, der Deine Leistungen ansprechend präsentiert und Besuchern eine möglichst einfache Nutzung ermöglicht.
FAQ - Häufige Fragen zur Barrierefreiheit auf Smartphones
Nein. Responsive Webdesign sorgt zunächst dafür, dass sich die Darstellung einer Website an unterschiedliche Bildschirmgrößen anpasst.
Das bedeutet jedoch nicht automatisch, dass sämtliche Funktionen zugänglich sind. Auch eine optisch perfekt angepasste Website kann beispielsweise zu kleine Schaltflächen, unbedienbare Menüs oder technische Probleme bei der Nutzung mit einem Screenreader enthalten.
Für eine barrierefreie mobile Website müssen deshalb sowohl die Darstellung als auch die Bedienbarkeit und technische Zugänglichkeit berücksichtigt werden.
Für mobile und klassische Websites gelten grundsätzlich dieselben einschlägigen WCAG-Anforderungen. Eine separate, allgemein gültige WCAG-Konformitätsstufe ausschließlich für Smartphones gibt es nicht.
Allerdings können sich die Anforderungen auf mobilen Geräten anders bemerkbar machen. Kleine Bildschirme, Touchbedienung und unterschiedliche Geräteeinstellungen führen dazu, dass manche Barrieren erst auf Smartphones sichtbar werden.
Deshalb sollten bei der Prüfung einer Website beide Nutzungssituationen berücksichtigt werden.
Wenn eine Website die entsprechenden Anforderungen an Barrierefreiheit erfüllen soll, muss sie auch mit geeigneten unterstützenden Technologien zugänglich sein.
Auf Smartphones kommen dafür beispielsweise VoiceOver unter iOS oder TalkBack unter Android zum Einsatz.
Diese Anwendungen geben Bildschirminhalte über Sprache aus und ermöglichen eine andere Art der Bedienung. Voraussetzung ist, dass die Website ihre Inhalte, Beschriftungen und Funktionen technisch korrekt bereitstellt.
Ein Menü, das optisch problemlos funktioniert, kann andernfalls für Menschen, die einen Screenreader verwenden, schwer verständlich oder nicht bedienbar sein.
In den meisten Fällen ist eine responsiv entwickelte Website die sinnvollere Grundlage. Dabei werden dieselben Inhalte und Funktionen abhängig von der Bildschirmgröße unterschiedlich dargestellt.
Eine separate mobile Website kann zusätzlichen Pflegeaufwand verursachen, da Inhalte, Funktionen und technische Anpassungen möglicherweise an mehreren Stellen berücksichtigt werden müssen.
Entscheidend ist jedoch nicht allein die verwendete Technik. Auch eine responsive Website muss sorgfältig gestaltet, programmiert und geprüft werden, damit sie tatsächlich zugänglich ist.
Ja. Besonders auf kleinen Bildschirmen können großflächige Einblendungen die Nutzung einer Website erheblich erschweren.
Problematisch wird es beispielsweise, wenn Schaltflächen nicht erreichbar sind, sich ein Dialog nicht korrekt schließen lässt oder wichtige Inhalte im Hintergrund verdeckt werden.
Auch die Bedienung mit der Tastatur oder einem Screenreader muss berücksichtigt werden.
Solche Elemente sollten deshalb nicht ausschließlich anhand ihrer optischen Darstellung überprüft werden. Wichtig ist, dass Besucher die enthaltenen Funktionen zuverlässig nutzen und anschließend zur eigentlichen Website zurückkehren können.
Ja. Viele Probleme der mobilen Darstellung und Bedienung lassen sich auch nachträglich beheben.
Dazu gehören beispielsweise größere Klickflächen, die Überarbeitung mobiler Navigationsmenüs oder Anpassungen an feststehenden Gestaltungselementen.
Bei manchen Websites sind allerdings umfangreichere technische Änderungen notwendig, insbesondere wenn die mobile Darstellung ursprünglich nicht flexibel entwickelt wurde.
Welche Maßnahmen sinnvoll sind, hängt deshalb vom Aufbau und technischen Zustand der vorhandenen Website ab.
Ja. Wir übernehmen die Prüfung, Planung, Gestaltung und technische Umsetzung barrierefreier Websites für Smartphones, Tablets und Computer.
Wir untersuchen Deinen bestehenden Internetauftritt auf mögliche Bedienprobleme und Barrieren in der mobilen Darstellung. Anschließend entwickeln wir passende Lösungen und übernehmen die notwendigen Anpassungen direkt an Deiner Website.
Auch bei einem neuen Internetauftritt berücksichtigen wir die Anforderungen an mobile Barrierefreiheit bereits während der Planung und Entwicklung. Dabei verbinden wir ein individuelles Webdesign mit einer zugänglichen und benutzerfreundlichen Bedienung.
Du möchtest Deine Website auf Smartphones barrierefrei gestalten lassen oder wissen, welche Verbesserungen notwendig sind? Nimm Kontakt mit uns auf. Wir beraten Dich gerne und übernehmen die vollständige Planung und Umsetzung Deines Projekts.