Gehirngerecht Digital

Die WCAG-Kriterien

WCAG 2.5.8: Zielgröße (Minimum)

Zurück zu allen WCAG-Kriterien

ÜBERBLICK

Umsetzbarkeit:

  • Komplexität:Einfach
  • Dauer:Kann dauern

Wichtig für Rolle:

Design

Worum gehts?

Bedienelemente wie Buttons oder Links müssen eine klickbare Fläche von mindestens 24 × 24 px haben, die sich nicht mit der klickbaren Fläche anderer bedienbarer Elemente überschneidet.

Es sind zwei Schaltflächen mit Icons zu sehen. Die Erste ist nur 16 mal 16 Pixel und damit zu klein. Die Zweite ist 24 mal 24 Pixel und damit groß genug.

Umsetzung

Mindestens eine der folgenden Möglichkeiten muss umgesetzt werden, um das Kriterium zu erfüllen. Nähere Informationen dazu findest du in den jeweils verlinkten WCAG-Techniken.

  • Es sind zwei Schaltflächen mit Icons zu sehen. Die Erste ist nur 16 mal 16 Pixel und damit zu klein. Die Zweite ist 24 mal 24 Pixel und damit groß genug.

    Elemente haben Mindestgröße von 24 × 24 Pixel

    Gib deinen interaktiven Elementen eine anklick- oder antippbare Fläche von mindestens 24 × 24 CSS-Pixel. 

    Bei einem Icon beispielsweise empfehlen wir, dass das Icon selbst 24 × 24 Pixel groß ist. Es ist aber nach der WCAG auch okay, wenn das Icon nur 18 × 18 Pixel hat, solange der unsichtbare Klickbereich drumherum mindestens 24 × 24 Pixel groß ist. Das ist zum Beispiel mit CSS-padding um das Icon möglich.

    WCAG-Technik(en) in Englisch:

  • Es sind Buttons zu sehen, die auf verschiedene Arten das Kriterium erfüllen. Bei dem Obersten ist das Icon zwar nur 16px groß, die Klickfläche hat aber die nötige Größe von 24px. Bei den zwei anderen Elementen darunter sind die klickbaren Bereiche mindestens 24px breit und hoch und überlappen sich nicht.

    Abstand zu benachbarten Bedienelementen ist groß genug

    Es ist tatsächlich auch ok, wenn ein Bedienelement kleiner als 24 × 24 Pixel ist, solange es dann in einem Radius von 24 Pixeln keine andere interaktive Klickfläche überschneidet.

    Damit soll verhindert werden, dass User versehentlich das falsche Ziel treffen.

    WCAG-Technik(en) in Englisch:

  • Ein klickbares Element links oben ist zu klein, das ist aber in Ordnung da es weiter unten auf der Seite eine Alternative gibt, die groß genug ist!

    Alternative vorhanden, die groß genug ist

    Ein Bedienelement muss die Anforderungen an die Mindestgröße nicht erfüllen, wenn es irgendwo auf der Seite ein zweites Bedienelement gibt, das die gleiche Funktion ausführt und die Mindestanforderungen einhält.

    WCAG-Technik(en) in Englisch:

    Anmerkungen

    • Ein Link innerhalb eines Paragraphen. Die Höhe des Links in diesem Absatz ist zwangsweise durch die Zeilenhöhe begrenzt.

      Ausnahme: Inline-Links im Fließtext

      Links in Paragrafen sind von dem Kriterium ausgenommen, da die Höhe der Links oft abhängig von der Höhe des Fließtextes ist. 

    • Illustration einer Glühbirne mit fröhlichen Augen.

      Ausnahme: Bedienelemente, die durch den User-Agent (Browser/OS) gerendert werden und nicht vom Autor geändert werden können

      Auch Elemente, die vom Browser selbst gerendert werden, sind hier ausgenommen. Ein gutes Beispiel ist der native HTML-Date-Picker, der oft winzige Buttons hat.

    • Illustration einer Glühbirne mit fröhlichen Augen.

      Ausnahme: Elemente, deren Größe für die Darstellung essenziell

      Es gibt Bedienelemente, bei denen die Größe der Darstellung essenziell (z. B. kleine Icons in einer Landkarte mit präziser Platzierung) oder sogar aus rechtlichen Gründen vorgegeben. Diese sind auch vom Kriterium ausgenommen. 

              DAs Accessbility-Center

              Teste selbstständig auf digitale Barrierefreiheit! 

              Mit unserem manuellen Test-Tool prüfst du deine Website selbstständig, schnell und effizient auf digitale Barrierefreiheit!

              • Alle Prüfschritte leicht erklärt
              • Teile und exportiere Prüfberichte
              • Teste direkt auf der Live-Webseite!
              Zum Accessibility-Center