jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS-Tools

Kostenlose Touch Target Size Checker

Prüfe interaktive Elemente auf WCAG 2.2 Mindestgröße (2.5.8) mit AA/AAA-Ergebnissen und CSS-Empfehlungen.

Tool wird geladen...

Was ist Touch Target Size Checker?

WCAG 2.2 Erfolgskriterium 2.5.8 ZielgroBe fordert, dass interaktive Elemente eine ZielgroBe von mindestens 24x24 CSS-Pixeln (AA) haben. Das AAA-Niveau erfordert 44x44px. Diese GroBen stellen sicher, dass Menschen mit motorischen Einschrankungen oder die Touch-Gerate verwenden, interaktive Elemente zuverlassig antippen oder anklicken konnen, ohne versehentlich benachbarte Elemente zu aktivieren.

Kurze Antwort

WCAG 2.2 erfordert, dass interaktive Elemente eine ZielgroBe von mindestens 24x24px (AA) oder 44x44px (AAA) haben. Vier Ausnahmen gelten: Inline-Links, native Steuerelemente, essentielle Elemente und Elemente mit 24px+ Abstand zu benachbarten Zielen. Verwenden Sie CSS min-width/min-height sowie gap und padding, um zu kleine Ziele zu beheben.

Last updated: 2026-05-28

Einschränkungen

  • Dieses Tool pruft nur statische Dimensionen. Es berucksichtigt keine dynamischen Layouts, responsiven Breakpoints oder Zoom-Stufen, die die effektive ZielgroBe bei verschiedenen BildschirmgroBen andern konnen.
  • Die Abstandsausnahme erfordert manuelle Uberprufung des tatsachlichen Abstands zwischen benachbarten Zielen. Dieses Tool pruft den eingegebenen Abstandswert, kann aber keine tatsachlichen DOM-Layout-Abstande messen.
  • WCAG 2.5.8 ist eine Level-AA-Anforderung in WCAG 2.2. Einige Durchsetzungsinstanzen wenden sie moglicherweise strenger an als andere, und die Auslegung von Ausnahmen variiert.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

  1. Geben Sie die Breite und Hohe Ihres interaktiven Elements in CSS-Pixeln ein.
  2. Geben Sie den Abstand zum nachsten benachbarten interaktiven Element ein, falls bekannt.
  3. Wahlen Sie den Elementtyp -- verschiedene Ausnahmen gelten fur Inline-Links, native Steuerelemente und essentielle Elemente.
  4. Uberprufen Sie das Bestanden/Nicht-Bestanden-Ergebnis und die CSS-Fix-Empfehlungen.

Wofür du es nutzen kannst

  • Prufen, ob mobile Navigationsschaltflachen die 24px-AA-ZielgroBenanforderung erfullen.
  • Uberprufen, ob kleine Icon-Only-Schaltflachen ausreichenden Abstand zu benachbarten Elementen haben, um fur die Abstandsausnahme zu qualifizieren.
  • Eine Seite vor einer WCAG-Konformitatsprufung auf Touch-Barrierefreiheit auditieren.

Anwendungsfalle

Praxisbeispiele

Beispiel

Mobile Nav-Icon-Schaltflachen

Eine mobile Navigation hat 20x20px Icon-Schaltflachen. Das Tool meldet AA-Fehler. Das Hinzufugen von 4px Padding zum Erreichen von 24x24px besteht AA, oder das Hinzufugen von 24px Abstand zwischen den Schaltflachen qualifiziert fur die Abstandsausnahme.

Beispiel

Inline-Textlinks

Ein Artikel hat Inline-Textlinks, die nur 18px hoch sind. Das Tool wendet die Inline-Ausnahme an und besteht AA, da Links innerhalb von Textblocken von der MindestzielgroBe ausgenommen sind.

Haufige Fehler

  • Anzunehmen, dass Abstand allein die ZielgroBe behebt -- die Abstandsausnahme erfordert, dass das Element mindestens 20px groB ist und 24px Abstand zu benachbarten Zielen hat.
  • Die Inline-Ausnahme auf nicht-inline Elemente wie eigenstandige Schaltflachen oder Navigationslinks anzuwenden -- die Inline-Ausnahme gilt nur fur Links in Textblocken.
  • Desktop-Dimensionen anstelle von CSS-Pixeln zu prufen -- CSS-Pixel konnen auf hochauflosenden Bildschirmen von Geratepixeln abweichen. Verwenden Sie immer berechnete CSS-Werte aus den Entwicklertools.

Überprüfung

  1. Verwenden Sie die Browser-Entwicklertools, um die berechnete Breite und Hohe des Elements in CSS-Pixeln zu uberprufen.
  2. Uberprufen Sie den Abstand zwischen benachbarten interaktiven Elementen mit der Abstandsmessung der Entwicklertools oder durch Uberprufung der gap-, margin- und padding-Eigenschaften.

FAQ

Fragen zu Touch Target Size Checker

Was zahlt als Abstand zu einem benachbarten Ziel?

Abstand wird vom Rand eines Ziels bis zum Rand des nachsten benachbarten interaktiven Elements gemessen. Dies umfasst Schaltflachen, Links, Eingabefelder und jedes andere anklickbare Element. WeiBraum, Abstande, Padding oder nicht-interaktive Inhalte zwischen den Zielen zahlen als Abstand. Die Abstandsausnahme erfordert mindestens 24px Freiraum.

Gilt diese Prufung sowohl fur Desktop als auch mobil?

WCAG 2.5.8 gilt fur alle Gerate mit Zeigereingaben, einschlieblich Desktop-Mauszeigern. Obwohl das Kriterium durch mobile Touch-Barrierefreiheit motiviert wurde, ist die Anforderung gerateunabhangig. Desktop-Benutzer mit motorischen Einschrankungen oder die alternative Zeigegerate verwenden, profitieren ebenfalls von groBeren Zielen.

Verwandte Tools

Weitere css-tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Tool öffnen

Auch ausprobieren

Auch ausprobieren