Ist deine Website auf dem Handy gut lesbar? Vier Dinge zum Prüfen
Die meisten Besuche auf der Website eines kleinen Betriebs kommen vom Handy: unterwegs, in der Sonne, mit einer Hand, zwischen zwei Terminen. Was am großen Bildschirm im Büro gut aussieht, ist dort oft kaum zu lesen: hellgraue Schrift, winzige Zeilen, Knöpfe, die man nicht trifft. Gut lesbar hilft dabei allen, nicht nur Menschen mit Sehschwäche. Hier sind vier Dinge, die du heute am eigenen Handy prüfen kannst, und ein paar Hinweise, was dahintersteckt. Das sind praktische Tipps zum Selbstprüfen, keine vollständige Prüfung auf Barrierefreiheit.
Erst der Test: Geh nach draußen
Nimm dein Handy, stell die Helligkeit auf die Hälfte und öffne deine Website im Freien, am besten bei Tageslicht. Lies die Öffnungszeiten, suche die Telefonnummer, finde einen Preis. Wenn du dabei zoomen, kneifen oder das Handy abschirmen musst, geht es deinen Gästen genauso. Dieser Test dauert eine Minute und zeigt mehr als jede Checkliste.
1. Kontrast: dunkle Schrift auf hellem Grund
Hellgrauer Text auf weißem Grund sieht am Bildschirm elegant aus und ist draußen unlesbar. Fließtext sollte dunkel sein, fast schwarz, auf hellem Hintergrund, oder umgekehrt hell auf dunkel. Auch für Nebentext, Bildunterschriften und Preise gilt: lieber einen Ton dunkler als zu blass. Text auf Fotos braucht eine ruhige, abgedunkelte Fläche darunter, sonst verschwindet er im Bild.
Es gibt Richtwerte für den Kontrast zwischen Schrift und Hintergrund, die sich mit kostenlosen Prüfwerkzeugen im Browser messen lassen; für normalen Text gilt ein Verhältnis von mindestens 4,5 zu 1 als gut lesbar. Du musst das nicht selbst messen. Wenn der Text draußen lesbar ist, bist du in der Regel auf der sicheren Seite.
2. Schriftgröße: lesen ohne Zoomen
Auf dem Handy sollte sich jede Zeile lesen lassen, ohne dass man hineinzoomt. Das betrifft vor allem die Dinge, die als Bild eingebunden sind: die Speisekarte als Foto, die Preisliste als PDF, der Öffnungszeiten-Aushang als Scan. Die Schrift darauf wird auf dem Handy winzig. Als Text auf der Seite passt sie sich dem Bildschirm an. Mehr dazu im Ratgeber Speisekarte und Preisliste online.
Zeilen sollten außerdem nicht zu lang sein und genug Abstand zueinander haben. Ein kurzer Absatz mit drei bis vier Sätzen liest sich auf dem Handy besser als ein Block über den ganzen Bildschirm. Viele Handys lassen Nutzer die Schrift systemweit vergrößern; eine gute Website macht das mit, statt das Layout zu zerreißen.
3. Knöpfe: groß genug zum Tippen
Anrufen, Route, Termin, WhatsApp: Das sind die Knöpfe, auf die es ankommt. Sie sollten so groß sein, dass man sie mit dem Daumen trifft, und etwas Abstand zueinander haben, damit man nicht versehentlich den falschen tippt. Als Faustregel gilt eine Höhe von etwa einer Fingerkuppe, also nicht kleiner als ein Daumennagel. Textlinks mitten im Fließtext sind als Hauptweg zum Anruf ungeeignet; die Telefonnummer gehört als eigener Knopf auf die Seite.
Prüf auch, ob die Telefonnummer beim Tippen wirklich wählt und ob der Adress-Link die Karten-App öffnet. Beides lässt sich nur am Handy testen, nicht am Computer.
4. Bildbeschreibungen: der Alt-Text
Jedes Bild auf einer Website kann eine kurze Beschreibung tragen, den sogenannten Alt-Text. Er ist unsichtbar, wird aber von Vorleseprogrammen gelesen, erscheint, wenn ein Bild nicht lädt, und hilft Suchmaschinen, das Bild zu verstehen. Ein guter Alt-Text beschreibt in einem Satz, was zu sehen ist: Gastraum des Cafés mit Holztischen und großen Fenstern, nicht Bild1.jpg und nicht eine Liste von Suchbegriffen.
Ob deine Bilder Alt-Texte haben, siehst du als Nutzer nicht direkt. Frag deinen Anbieter oder prüf es mit den Entwicklerwerkzeugen des Browsers. Auf meinen Websites bekommt jedes Bild eine Beschreibung, bevor es online geht.
Was oft übersehen wird
- Keine Information nur über Farbe: Ein roter Punkt für geschlossen braucht auch das Wort geschlossen.
- Automatisch startende Videos mit Ton und wackelnde Animationen stören beim Lesen; wenn Video, dann stumm und mit Untertiteln.
- Pop-ups und Cookie-Banner, die den halben Bildschirm bedecken, sind auf dem Handy besonders ärgerlich. Wer keine Cookies und keine Werbetracker einsetzt, braucht dafür in der Regel keine Einwilligungsabfrage.
- Die Seite sollte auch im Querformat und mit vergrößerter Systemschrift funktionieren.
So läuft es bei mir
Deine Kundschaft sucht Öffnungszeiten, Angebot und Kontakt, meist auf dem Handy. Die Websites, die ich für Betriebe baue, sind deshalb zuerst für das Handy gebaut und erst dann für den großen Bildschirm: dunkle Schrift auf hellem Grund, Karte und Preise als Text, Anruf und Route als große Knöpfe, Alt-Text an jedem Bild, ohne Cookies und ohne Werbetracker. Wie das aussieht, zeigen die zehn Beispiel-Websites unter Beispiele. Einen vollständigen Nachweis der Barrierefreiheit nach einer Norm biete ich damit nicht an; es sind gute Grundlagen, die allen helfen.
Checkliste: fünf Minuten am Handy
- Website draußen bei halber Helligkeit geöffnet und gelesen.
- Fließtext dunkel auf hellem Grund, kein Hellgrau, kein Text direkt auf unruhigen Fotos.
- Öffnungszeiten, Karte und Preise ohne Zoomen lesbar, nichts Wichtiges nur als Bild oder PDF.
- Anrufknopf wählt, Adresse öffnet die Karten-App, Knöpfe mit Daumen gut zu treffen.
- Bilder haben eine kurze Beschreibung (Alt-Text).
- Zustand nicht nur über Farbe gezeigt, Videos stumm mit Untertiteln.
- Kein Banner, das den halben Bildschirm verdeckt.
Häufige Fragen
Ist meine Website damit barrierefrei?
Nein, das ist eine Selbstprüfung der häufigsten Probleme, keine vollständige Prüfung nach einer Norm. Sie hilft allen Besuchern, ersetzt aber keine fachliche Prüfung, wenn du eine brauchst.
Warum sieht meine Website am Computer gut aus, aber nicht am Handy?
Viele Websites wurden am großen Bildschirm gestaltet und dann nur verkleinert. Schrift, Knöpfe und Bilder mit Text schrumpfen mit. Eine Website, die zuerst für das Handy gebaut ist, vermeidet das.
Kann ich die Lesbarkeit meiner bestehenden Website verbessern lassen?
Frag deinen bisherigen Anbieter nach dunklerer Schrift, größeren Knöpfen und Karte als Text. Oder schau dir eine kostenlose Vorschau für deinen Betrieb an, dann siehst du den Unterschied direkt am eigenen Handy.