Dieses WCAG-Kriterium verlangt, dass interaktive Bedienelemente für Zeigegeräte (Maus, Touch, Stift etc.) entweder eine Mindestfläche haben oder ausreichend Abstand zueinander besitzen, damit Nutzende sie leichter bedienen können. Viele Menschen haben Schwierigkeiten, kleine Buttons oder Links präzise zu treffen. Dieses Kriterium soll dafür sorgen, dass interaktive Elemente eine Größe von mindestens 24 × 24 CSS-Pixel haben; oder wenn sie kleiner sind, so viel Abstand zum nächsten Ziel, dass sie nicht versehentlich angetippt werden. Es gibt Ausnahmen, z. B. wenn das Ziel Teil eines Fließtextes ist, durch den Browser vorgegeben ist oder wenn die kleine Größe rechtlich, gestalterisch oder funktional unbedingt nötig ist.
Tipps und Infos zur Umsetzung des WCAG-Kriteriums 2.5.8
Hier kommen von uns noch ein paar Tipps und Infos zur Umsetzung des WCAG-Kriteriums 2.5.8:
- Verwende für Buttons, Icons, Links etc. mindestens 24 × 24 CSS-Pixel als Mindestgröße.
- Wenn ein Ziel kleiner als 24×24 px ist, stelle sicher, dass zwischen diesem Ziel und anderen Zielen ausreichend Abstand besteht; man kann sich das so vorstellen, dass man einen Kreis mit 24 px Durchmesser über das Ziel legt und dieser Kreis nicht mit einem anderen Ziel oder dessen Kreis überlappt.
- Achte auch auf Formen: Wenn das Ziel z. B. rund, abgerundet oder anders geformt ist, wird der „Bounding-Box“ zugrunde gelegt – also die umgebende rechteckige Fläche, die das Element einfasst. Der Kreis wird über den Mittelpunkt dieser Box gelegt.
- Berücksichtige Inline-Ziele (z. B. Links innerhalb eines Textabsatzes): In solchen Fällen kann das Kriterium nicht gelten, da Größe und Zeilenhöhe durch den Fließtext beschränkt sind.
- Wo die Zielgröße klein sein muss („wesentlich“), sollte zumindest eine äquivalente Funktion angeboten werden, die größer oder leichter zu treffen ist.
- Teste die Bedienbarkeit auf verschiedenen Geräten (z. B. Touch-Geräte, Maus) und bei unterschiedlicher Bildschirmauflösung bzw. Zoom. So sieht man, ob die Ziele wirklich gut zu treffen sind.
- Setze Design-Systeme oder Komponentenbibliotheken so auf, dass Standardgrößen eingehalten werden – z. B. durch CSS-Klassen mit min-width, min-height, Padding, Margin etc.
Bei Fragen beraten wir dich gerne. Mehr Infos zu diesem Kriterium findest du auch auf der folgenden englischen WAI-Seite zum WCAG-Kriterium 2.5.8 Zielgröße (Minimum).