Website auf dem Handy: lesbar und leicht bedienbar

Die erste Hürde ist banal und trotzdem weit verbreitet: zu kleine Schrift. Als Grundwert für Fließtext auf dem Telefon haben sich 16 Pixel etabliert, weil das der Standardgröße der meisten Browser entspricht und weil darunter die Zeichenhöhe bei normalem Leseabstand unangenehm wird. Alles, was kleiner gesetzt ist, zwingt zum Zoomen, und Zoomen ist auf einer Inhaltsseite kein Bedienschritt, sondern ein Notbehelf. Automatisierte Prüfungen greifen hier zu kurz: Der klassische Lighthouse-Test bemängelte erst, wenn 40 Prozent (Google, Lighthouse-Dokumentation) des Textes kleiner als 12 Pixel gesetzt sind, und 92 Prozent (HTTP Archive Web Almanac) der mobilen Seiten bestehen ihn. Eine bestandene Prüfung bedeutet also lediglich, dass der Text nicht winzig ist, nicht dass er angenehm liest. Wichtiger als die absolute Zahl ist die Einheit: 66 Prozent (HTTP Archive Web Almanac) der mobilen Seiten setzen Schriftgrößen in Pixeln, nur 9 Prozent (HTTP Archive Web Almanac) in em und 4 Prozent (HTTP Archive Web Almanac) in rem. Relative Einheiten sind der Grund, warum eine im System vergrößerte Schrift überhaupt durchschlägt. Die Norm ist an dieser Stelle deutlich: Text muss sich ohne Hilfsmittel auf 200 Prozent (W3C, WCAG 2.2, Erfolgskriterium 1.4.4) vergrößern lassen, ohne dass Inhalt oder Funktion verloren gehen. Wie Sie Texte formulieren, damit sie auf kleinem Raum tragen, beschreibt der Beitrag über verständliche Website-Texte.

Der zweite Teil der Lesbarkeit ist der Kontrast, und hier ist die Lage deutlich schlechter als beim Schriftgrad. Nur 29 Prozent (HTTP Archive Web Almanac) der mobilen Websites erreichen durchgehend ausreichenden Textkontrast, immerhin ein Anstieg gegenüber 23 Prozent (HTTP Archive Web Almanac) zwei Jahre zuvor. Die Messlatte ist klar definiert: 4,5:1 (W3C, WCAG 2.2, Erfolgskriterium 1.4.3) für normalen Text und 3:1 (W3C, WCAG 2.2, Erfolgskriterium 1.4.3) für großen Text ab 18 Punkt beziehungsweise 14 Punkt fett. Das klingt technisch, hat aber einen sehr praktischen Kern: Hellgraue Schrift auf weißem Grund sieht im abgedunkelten Büroraum edel aus und ist auf einem Bahnsteig im Juli schlicht nicht vorhanden. Dasselbe gilt für Text auf Fotos, für helle Beschriftungen auf Farbverläufen und für Platzhaltertext in Formularfeldern, der häufig noch heller gesetzt wird als der eigentliche Inhalt. Wer Kontraste ernst nimmt, gewinnt gleich zweimal: bei allen Menschen mit eingeschränktem Sehvermögen und bei allen anderen, sobald die Sonne scheint. Welche rechtlichen Anforderungen dahinterstehen, ordnet der Beitrag zur barrierefreien Unternehmenswebsite ein.

Halten Sie ein Telefon einhändig, beschreibt der Daumen einen Bogen. Bequem erreichbar ist die untere Hälfte des Bildschirms auf der Seite der haltenden Hand; die obere Ecke der Gegenseite ist der am schwersten erreichbare Punkt und verlangt einen Griffwechsel oder die zweite Hand. Geräte sind in den vergangenen Jahren deutlich größer geworden, wodurch sich dieser Effekt verstärkt hat. Für die Gestaltung folgt daraus eine einfache Regel: Was oft gebraucht wird, gehört nach unten, was selten gebraucht wird oder Folgen hat, nach oben. Die Hauptaktion einer Seite, also Anrufen, Anfragen, Termin vereinbaren, sollte nach dem ersten Bildlauf im unteren Bereich verfügbar sein und nicht ausschließlich als kleiner Link in der Kopfzeile existieren. Umgekehrt haben Löschen, Abmelden oder das Zurücksetzen eines Formulars in der Daumenzone nichts verloren. Eine praktische Zwischenlösung ist die Wiederholung: Die Hauptaktion erscheint einmal im sichtbaren Bereich am Seitenanfang und einmal am Ende des Inhalts, damit niemand nach dem Lesen wieder nach oben scrollen muss. Wie sich diese Aktionen inhaltlich verkaufsstark formulieren lassen, zeigt der Beitrag über lokale Sichtbarkeit für Handwerk und Gastronomie.

Tabellen sind für breite Bildschirme erfunden worden. Auf dem Telefon führen sie zu einem Verhalten, das die Norm ausdrücklich vermeiden will: Scrollen in zwei Richtungen. Inhalte sollen sich bei einer Breite von 320 CSS-Pixeln (W3C, WCAG 2.2, Erfolgskriterium 1.4.10) ohne Informationsverlust darstellen lassen, ohne dass zusätzlich horizontal gescrollt werden muss. Für Preislisten heißt das: Die Tabelle wird auf schmalen Bildschirmen zu gestapelten Blöcken. Aus einer Zeile mit fünf Spalten werden fünf Zeilen mit Beschriftung und Wert, jede Leistung bekommt einen eigenen Block mit Überschrift, Preis und Zusatz. Das wirkt auf dem Papier ausschweifend, liest sich auf dem Telefon aber deutlich besser als eine Tabelle, die auf 40 Prozent verkleinert wurde oder deren rechte Spalten unsichtbar am Rand warten. Bleibt eine echte Vergleichstabelle unverzichtbar, gehört sie in einen eigenen scrollbaren Bereich mit sichtbarem Hinweis auf die Verschiebbarkeit, während die Seite selbst ruhig bleibt. Wichtig ist außerdem, dass Preise nicht als Bild ausgeliefert werden: Was als Grafik vorliegt, lässt sich weder vergrößern noch vorlesen noch aktualisieren, ohne die Datei neu zu erzeugen. Wie Bilder sonst richtig eingesetzt werden, behandelt der Beitrag zu Bildformaten und Alternativtexten.

Auf einem Telefon ist die sichtbare Fläche das knappste Gut der ganzen Website. Ein fixierter Kopfbereich von 120 Pixeln Höhe belegt auf einem gängigen Gerät bereits rund ein Fünftel des Sichtfensters, und wenn unten noch eine Aktionsleiste klebt, bleibt für den eigentlichen Inhalt weniger als zwei Drittel. Deshalb gilt: höchstens eine fixierte Leiste, schlank gehalten, und beim Herunterscrollen gerne eingeklappt. Noch heikler sind Einblendungen. Ein Dialog, der den halben Bildschirm verdeckt, bevor jemand den ersten Satz gelesen hat, ist auf dem Telefon ein deutlich größerer Eingriff als am Rechner, weil der Schließen-Knopf häufig winzig ist und in der oberen Ecke sitzt, also im am schlechtesten erreichbaren Bereich. Der Einwilligungsdialog für Cookies ist rechtlich erforderlich und deshalb eine eigene Kategorie, sollte aber kompakt bleiben, mit gleichwertigen Schaltflächen und ohne Sperre des Bildlaufs. Alles andere, also Rabattbanner, Newsletter-Aufforderung und Chat-Blase, sollte man gegen die Frage abwägen, ob es mehr Anfragen bringt als es verdeckt. Wie eine saubere Einwilligung ohne Ballast aussieht, beschreibt der Beitrag zu DSGVO und Cookie-Consent; wie sich schwere Einbindungen auf die Auslieferung auswirken, zeigt der Beitrag zu PageSpeed und statischer Auslieferung.

Die wirksamste Prüfung braucht kein Werkzeug, sondern das eigene Telefon und zwanzig Minuten. Der Grund: Ein Vorschaufenster am Rechner simuliert die Bildschirmbreite, aber weder die Hand noch das Licht noch die Systemeinstellungen der Besucher. Vier Bedingungen decken erfahrungsgemäß den größten Teil der Probleme auf. Erstens die Bedienung mit einer Hand, weil sie die Reichweite des Daumens ehrlich abbildet und sofort zeigt, welche Schaltflächen zu weit oben sitzen. Zweitens der Gang nach draußen ins Sonnenlicht, weil dort jeder zu schwache Kontrast auffliegt, den ein Bürobildschirm noch schönredet. Drittens die vergrößerte Systemschrift, etwa auf 130 Prozent gestellt, weil viele Menschen ihr Gerät dauerhaft so betreiben und Layouts dabei überraschend häufig zerbrechen. Viertens Handschuhe, oder ersatzweise die Bedienung im Gehen, weil beides die Zielgenauigkeit senkt und zu kleine Ziele unmittelbar unbrauchbar macht. Notieren Sie währenddessen jede Stelle, an der Sie zoomen, zweimal tippen oder das Gerät umgreifen. Diese Liste ist Ihre Aufgabenliste, sortiert nach Häufigkeit.

Mobile Bedienbarkeit ist selten ein Projekt und meistens eine Reihe kleiner Korrekturen, die zusammen viel bewegen. Beginnen Sie mit dem, was jede Seite betrifft: Grundschriftgröße, Kontrast und die Größe der Schaltflächen. Danach folgen die drei Sofortantworten, also Telefon, Adresse und Öffnungszeiten, weil sie den größten Anteil mobiler Aufrufe ausmachen. Erst dann lohnt der Blick auf Tabellen, Dokumente und Einblendungen. Wichtig ist die Reihenfolge, weil ein neues Layout wenig hilft, solange der Text zu klein bleibt. Wer gerade ohnehin über einen Neubau nachdenkt, sollte die mobile Fassung zur Grundlage der Abnahme machen und nicht zur Nacharbeit: Preise und Leistungsumfang zeigt die Preisübersicht, die Einordnung gegenüber anderen Wegen findet sich in der Gegenüberstellung der Ansätze. Für eine Einschätzung Ihrer bestehenden Seite genügt ein kurzes Gespräch über die Kontaktseite.

Am Ende entscheidet nicht, wie eine Seite im Abnahmetermin am Konferenzbildschirm wirkt, sondern wie sie sich anfühlt, wenn jemand mit einer Hand im Bus sitzt und wissen will, ob Sie noch geöffnet haben. Diese Perspektive lässt sich nicht simulieren, sie lässt sich nur ausprobieren. Der Aufwand dafür ist gering, die Wirkung dagegen unmittelbar: Jede gefundene Stelle, an der jemand zoomen, zweimal tippen oder umgreifen muss, ist eine Stelle weniger, an der eine Anfrage verloren geht.