Tippen Sie auf Zielgrößenprüfung

• Sofortige WCAG 2.5.8-Konformitätsprüfung: Der Touch Target Size Checker bewertet die Abmessungen, Abstände und Ränder Ihrer Elemente anhand der WCAG 2.5.8-Anforderung (mindestens 24 x 24 CSS-Pixel) in Echtzeit. Passen Sie einen beliebigen Wert an und sehen Sie sich die Ergebnisaktualisierung sofort mit einem klaren Pass/Fail-Status an.
• Visuelle Zielvorschau: Sehen Sie sich eine visuelle Darstellung Ihres Touch-Ziels mit farbcodierten Zonen an: Inhaltsbereich (Indigo), effektiv anklickbarer Bereich einschließlich Polsterung (grün/gelb/rot), Randabstand (blau gestrichelt) und die WCAG-Mindestüberlagerung × px zur schnellen Referenz.
• 100 % privat – kein Upload: Alle Berechnungen erfolgen lokal in Ihrem Browser. Ihre Designdaten verlassen niemals Ihr Gerät und werden niemals an einen Server gesendet – sicher für Kundenprojekte, Designsysteme und proprietäre Zugänglichkeitsprüfungen.
• Kostenlos und ohne Einschränkungen: Überprüfen Sie unbegrenzte Elementkonfigurationen ohne Anmeldung, ohne Abonnement und ohne Nutzungsbeschränkungen. Der Touch Target Size Checker ist für immer völlig kostenlos, ohne dass Werbung die Benutzeroberfläche blockiert.

• Prüfung der Benutzeroberfläche mobiler Apps: Mobile-Designer verwenden den Touch Target Size Checker, um jedes interaktive Element – ​​Schaltflächen, Links, Symbole – anhand von WCAG 2.5.8 zu prüfen. Durch die Sicherstellung, dass alle Berührungsziele mindestens 24 x 24 Pixel groß sind, wird die Benutzerfreundlichkeit für Benutzer mit motorischen Beeinträchtigungen verbessert und versehentliches Tippen reduziert.
• Überprüfung der Barrierefreiheits-Compliance: Barrierefreiheitsspezialisten verwenden den Touch Target Size Checker bei WCAG-Compliance-Audits. Das Tool bietet detaillierte Erläuterungen zu den Pass/Fail-Ergebnissen und erleichtert so die Dokumentation von Zugänglichkeitsergebnissen und die Empfehlung spezifischer Dimensionsanpassungen.
• Prüfung von Designsystemkomponenten: Betreuer von Designsystemen verwenden den Touch Target Size Checker, um zu überprüfen, ob alle interaktiven Komponenten – Schaltflächen, Schalter, Chips, Abzeichen – die Mindestanforderungen an die Zielgröße erfüllen, bevor sie an Entwicklungsteams versendet werden.
• Responsive Design-Validierung: Entwickler verwenden den Touch Target Size Checker, um zu überprüfen, ob Touch Targets an allen responsiven Haltepunkten groß genug bleiben. Elemente, die auf dem Desktop groß sind, können auf Mobilgeräten zu klein werden, und dieses Tool hilft dabei, diese Probleme frühzeitig zu erkennen.
• Barrierefreiheit von Formularen und Eingabefeldern: Formulardesigner verwenden den Touch Target Size Checker, um sicherzustellen, dass Eingabefelder, Kontrollkästchen, Optionsfelder und Senden-Schaltflächen über ausreichende Touch-Zielbereiche verfügen. Kleine Formularsteuerelemente stellen eine häufige Barrierefreiheitsbarriere dar, die mit diesem Tool identifiziert werden kann.
• Navigation und Benutzerfreundlichkeit von Menüs: Navigationsdesigner verwenden den Touch Target Size Checker, um Menüelemente, Hamburger-Symbole, Breadcrumb-Links und Tab-Elemente zu prüfen. Kleine Navigationsziele gehören zu den häufigsten WCAG 2.5.8-Fehlern im modernen Webdesign.

WCAG 2.5.8 Zielgröße (Minimum) ist eine Richtlinie zur Barrierefreiheit von Webinhalten, die erfordert, dass interaktive Ziele mindestens × CSS-Pixel groß sein müssen. Dadurch wird sichergestellt, dass Benutzer mit motorischen Beeinträchtigungen, eingeschränkter Geschicklichkeit oder Benutzer von Touch-Schnittstellen auf Mobilgeräten interaktive Elemente präzise antippen oder anklicken können, ohne versehentlich benachbarte Ziele zu aktivieren.

1. Elementabmessungen eingeben: Geben Sie die Inhaltsbreite und -höhe Ihres UI-Elements an (den sichtbaren Inhaltsbereich, ohne Innenabstand). Geben Sie dann die Füllwerte ein – der Füllbereich ist anklickbar und zählt zur effektiven Zielgröße.
2. Rand/Abstand hinzufügen (optional): Geben Sie Randwerte ein, um die WCAG 2.5.8-Abstandsausnahme zu überprüfen. Wenn benachbarte Ziele einen Abstand von mindestens px haben, können Ziele, die kleiner als × px sind, trotzdem passieren.
3. Überprüfen Sie die Ergebnisse: Das Tool berechnet den effektiven Touch-Zielbereich (Element + Polsterung), vergleicht ihn mit dem Minimum an × px und liefert ein eindeutiges Pass/Fail/Conditional-Ergebnis mit detaillierten Verbesserungsempfehlungen.

• Inhaltsbereich: Der sichtbare Inhalt des Elements (Text, Symbol oder Bild). Dies ist normalerweise der kleinste Teil des anklickbaren Bereichs und enthält keine Polsterung.
• Effektiver anklickbarer Bereich: Der Inhaltsbereich plus alle Polsterungen. Dies ist das eigentliche Berührungs-/Klickziel, mit dem Benutzer interagieren. Die effektive Fläche muss mindestens × px groß sein, um WCAG 2.5.8 zu erfüllen.
• Rand/Abstand: Der Abstand zwischen diesem Ziel und benachbarten Zielen. Während der Rand selbst nicht anklickbar ist, kann ein ausreichender Abstand ( px+) zwischen kleinen Zielen die WCAG 2.5.8-Ausnahme erfüllen.
• Visueller vs. interaktiver Bereich: In vielen CSS-Frameworks ist die Auffüllung im anklickbaren Bereich enthalten, aber der Hintergrundclip kann dazu führen, dass er anders aussieht. Das Tool geht immer davon aus, dass die Auffüllung anklickbar ist, was dem Browserverhalten entspricht.

Die Abstandsausnahme: Wenn ein Ziel kleiner als × px ist, kann es trotzdem WCAG 2.5.8 bestehen, wenn zwischen ihm und benachbarten Zielen auf allen Seiten ein Abstand von mindestens px besteht. Mit dieser Ausnahme wird berücksichtigt, dass sich weit auseinander liegende kleine Ziele leichter genau treffen lassen als dicht gepackte.

Wichtige Einschränkungen: Die Abstandsausnahme gilt nicht für Inline-Ziele (z. B. Links innerhalb eines Absatzes), da der Abstand zwischen Textzeilen nicht den gleichen Nutzen für die Benutzerfreundlichkeit bietet. Der Standard verlangt außerdem, dass die Abstände konsistent sind – sporadische Abstände nur an einigen Seiten reichen nicht aus, um die Ausnahmekriterien zu erfüllen.