Umsetzung

• 

  Klickfläche ist mindestens 24 × 24 Pixel

  Interaktive Elemente sollten eine anklick- oder antippbare Fläche von mindestens 24 × 24 CSS-Pixeln haben.

  Bei klickbaren Icons kann das Icon selbst kleiner sein (z. B. 18 × 18 Pixel), solange der unsichtbare Klickbereich mindestens 24 × 24 Pixel groß ist.

  Empfehlung: Wo immer möglich, sollten deutlich größere Klickflächen verwendet werden. Apple und Android selbst geben für Mobile sogar 44 px bzw. 48 px als kleinste sinnvolle Größe an.

  WCAG-Technik(en) in Englisch:

  • SC 2.5.8 verstehen: Zielgröße (Minimum)

• 

  Abstand zu benachbarten Bedienelementen

  Das Bedienelement darf an sich kleiner als 24 × 24 Pixel sein, solange es in einem Radius von 24 Pixeln keine Überschneidungen mit anderen interaktiven Klickflächen gibt. Damit soll verhindert werden, dass User versehentlich das falsche Ziel treffen.

  WCAG-Technik(en) in Englisch:

  • SC 2.5.8 verstehen: Zielgröße (Minimum)

Anmerkungen

• 

  Ausnahme: Alternative in geforderter Größe vorhanden

  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.

• 

  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.

• 

  Ausnahme: Element kommt vom User-Agent (Browser/OS)

  Auch Elemente, die vom Browser selbst kommen, sind hier ausgenommen, da man auf diese kaum selbst Einfluss hat.

  Ein gutes Beispiel ist der native HTML-Date-Picker, der oft winzige Buttons hat. (Zugegeben hat dieser ab auch durch das Input-Feld eine zugängliche Alternative, die groß genug ist!)

• 

  Ausnahme: Größe ist 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 ist.