Responsive · Prüfpunkt
Wie groß müssen Schaltflächen auf einer Website mindestens sein?
Schaltflächen und Links sollten mindestens 24 mal 24 Pixel groß sein — das verlangt die Barrierefreiheits-Regel WCAG 2.5.8. Kleinere Flächen sind mit dem Finger schwer zu treffen: Wer auf dem Handy daneben tippt, landet auf dem falschen Link oder gibt auf. Der Prüfservice misst jede Bedienfläche auf vier Gerätegrößen und zeigt Beispiele der zu kleinen Flächen samt gemessener Größe.
Diese Flächen zählen als Bedienflächen
Gemessen wird alles, was Besucher anklicken oder antippen können: Schaltflächen, Links, Eingabefelder und Auswahllisten. Links mitten im Fließtext sind ausgenommen — ihre Höhe ergibt sich aus der Textzeile, das lässt auch die Norm ausdrücklich zu. Ebenfalls ausgenommen sind unsichtbare Hilfselemente von wenigen Pixeln Größe, die manche Websites für Vorleseprogramme oder für die Statistik einbauen; sie sind keine Ziele für den Finger, und sie mitzuzählen würde falschen Alarm erzeugen. Übrig bleiben genau die Flächen, die ein Mensch wirklich treffen muss: der Bestellknopf, der Menüpunkt, das Symbol für die Suche, das Feld für die E-Mail-Adresse. Für jede dieser Flächen gilt die Untergrenze von 24 mal 24 Pixeln.
So misst der Prüfservice die Größe
Die Seite wird auf vier Gerätegrößen in einem echten Browser aufgebaut: Smartphone mit 390, Tablet mit 768, Desktop mit 1440 und Wide mit 1920 Pixeln Breite. Auf jeder Größe misst die Prüfung die tatsächlich dargestellte Breite und Höhe jeder Bedienfläche. Das ist entscheidend, denn dieselbe Schaltfläche kann am Desktop groß genug sein und auf dem Handy schrumpfen. Jeder Befund wird zweimal erhoben; gemeldet wird nur, was beide Messungen übereinstimmend sehen. Der Bericht zeigt bis zu drei Beispiele mit gemessener Größe — etwa eine Schaltfläche mit 18 mal 18 Pixeln — und ein Bildschirmfoto der betroffenen Stelle, damit die Fläche ohne Suchen gefunden wird.
Das bringt die Mindestgröße Ihren Besuchern
Große Bedienflächen helfen zuerst Menschen mit Zittern, eingeschränkter Feinmotorik oder größeren Fingern. Sie helfen aber allen: im fahrenden Zug, mit Handschuhen, mit dem Daumen der einen freien Hand. Wer eine Schaltfläche beim ersten Versuch trifft, bleibt im Fluss — wer dreimal daneben tippt, verlässt die Seite. Für ein Unternehmen heißt das ganz praktisch: Der Knopf „Angebot anfordern“ wird öfter gedrückt, wenn er gut zu treffen ist. Die 24 Pixel sind dabei die Untergrenze der Norm und kein Idealwert; viele Gestalter wählen bewusst deutlich größere Flächen, gerade für die wichtigste Schaltfläche einer Seite.
So gehen Sie es an
- Tippen Sie die wichtigsten Schaltflächen Ihrer Website auf dem Handy mit dem Daumen an und achten Sie darauf, ob Sie beim ersten Versuch treffen.
- Achten Sie besonders auf kleine Symbole: Lupe, Menü, Telefonhörer, Pfeile in Bildergalerien.
- Geben Sie Ihrer Agentur die Beispiele aus dem Prüfbericht weiter — dort steht die gemessene Größe jeder zu kleinen Fläche.
- Lassen Sie neue Schaltflächen von Anfang an mit mindestens 24 mal 24 Pixeln planen.
Häufige Fragen
Was sagt WCAG 2.5.8 zur Größe von Schaltflächen?
Die Regel 2.5.8 der Barrierefreiheits-Richtlinie WCAG verlangt für Bedienflächen eine Mindestgröße von 24 mal 24 Pixeln. Ausgenommen sind unter anderem Links im Fließtext, deren Höhe die Textzeile vorgibt. Die Regel gehört zur Stufe AA, an der sich der Prüfservice orientiert. Größere Flächen sind ausdrücklich erlaubt und meist die bessere Wahl.
Warum sind zu kleine Schaltflächen ein Problem?
Kleine Flächen sind mit dem Finger schwer zu treffen. Besucher tippen daneben, öffnen den falschen Link oder brechen ab. Betroffen sind zuerst Menschen mit eingeschränkter Feinmotorik, in der Praxis aber alle, die ein Handy unterwegs bedienen. Eine gut treffbare Schaltfläche führt spürbar öfter zur gewünschten Handlung, etwa zu einer Anfrage oder einem Anruf.
Zählen Links im Text auch als Bedienfläche?
Links mitten im Fließtext nimmt die Prüfung aus, denn ihre Höhe ergibt sich aus der Textzeile — das sieht auch die Norm so vor. Gemessen werden eigenständige Bedienelemente: Schaltflächen, Menüpunkte, Symbole und Eingabefelder. Genau diese Flächen muss ein Besucher gezielt treffen, deshalb gilt dort die Mindestgröße von 24 mal 24 Pixeln.
Weiter im Prüfbereich Responsive
- Warum wird Text auf einer Website abgeschnitten?Text wird abgeschnitten, wenn sein Kasten schmaler ist als der Inhalt. Die Prüfung findet solche Stellen auf vier Gerätegrößen und zeigt Beispiele.
- Wie viel Text gehört in den ersten Bildschirm einer Website?Mindestens 60 Wörter lesbarer Text sollten auf dem Handy ohne Scrollen sichtbar sein — so verstehen Besucher und Suchmaschinen sofort, worum es geht.
- Warum gehört die wichtigste Schaltfläche in den ersten Bildschirm?Besucher sollen ohne Scrollen handeln können. Die Prüfung sucht im ersten Handy-Bildschirm nach einer klar erkennbaren Schaltfläche zum nächsten Schritt.
- Wie prüft man ein einzelnes Element auf allen Bildschirmgrößen?Der Prüfservice misst ein einzelnes Element gezielt auf Smartphone, Tablet und Desktop: sichtbar, vollständig im Bild und gut bedienbar.
Dieser Prüfpunkt gehört zum Prüfbereich Responsive — dort stehen alle Prüfpunkte im Überblick. Was die Prüfung insgesamt leistet, zeigt die Leistungsseite; wie ein Ergebnis zustande kommt, erklärt das Prüfverfahren. Alle Prüfbereiche im Überblick: Wissensbasis.