Target Size
Zielgröße
Die Zielgröße ist der gesamte Bereich, den eine Person zum Klicken oder Tippen verwenden kann, um eine Steuerung zu benutzen. Sie kann größer als das sichtbare Symbol sein.
Ein weiteres Beispiel
In einer Medizin-App liegt jedes kleine Erinnerungsicon innerhalb eines 32-mal-32-CSS-Pixel-Buttons. Abstand zwischen den Buttons verhindert falsche Tipparbeiten. Bei 200% Zoom bewegen sich die Steuerungen, anstatt sich zu überlappen, und dichte Kartenpins haben ebenfalls eine Liste.
Hauptteile
- 01Sichtbare Steuerung
- 02interaktive Trefferfläche
- 03Trennung von Nachbarn
Verwenden Sie es, wenn
Mach die Zeigerziele mindestens 24 mal 24 CSS-Pixel groß oder lasse genügend Platz um sie herum. Teste Touch, Zoom und unterschiedliche Bewegungsanforderungen.
Nutze es nicht, wenn
Beurteilen Sie nicht nur das sichtbare Symbol. Der gesamte Trefferbereich, der Abstand, Inline-Ausnahmen und ein anderer nutzbarer Pfad sind alle wichtig.
In Code verwendeter Name
minimum 24×24 CSS px target or sufficient spacing under WCAG 2.5.8 Vor dem Ausliefern
Give assistive tools the control’s name (accessible name), purpose (role), value, and state. Check keyboard use, visible focus, target size, disabled and busy states, feedback, and recovery.
Outcome: Complete the task with Zielgröße (Target Size). User context: In einer Medizin-App liegt jedes kleine Erinnerungsicon innerhalb eines 32-mal-32-CSS-Pixel-Buttons. Abstand zwischen den Buttons verhindert falsche Tipparbeiten. Bei 200% Zoom bewegen sich die Steuerungen, anstatt sich zu überlappen, und dichte Kartenpins haben ebenfalls eine Liste. Recommended pattern: Zielgröße (Target Size). Why it fits: Mach die Zeigerziele mindestens 24 mal 24 CSS-Pixel groß oder lasse genügend Platz um sie herum. Teste Touch, Zoom und unterschiedliche Bewegungsanforderungen. Do not use it when: Beurteilen Sie nicht nur das sichtbare Symbol. Der gesamte Trefferbereich, der Abstand, Inline-Ausnahmen und ein anderer nutzbarer Pfad sind alle wichtig. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): Der Standard deckt nur den aufgeführten Umfang ab. Er wählt nicht den visuellen Stil, die Produktentscheidung oder das Vibulary-Beispiel aus. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Diese Anfrage prüfen
Review how Zielgröße (Target Size) is used now. Definition: Die Zielgröße ist der gesamte Bereich, den eine Person zum Klicken oder Tippen verwenden kann, um eine Steuerung zu benutzen. Sie kann größer als das sichtbare Symbol sein. Release checks: Give assistive tools the control’s name (accessible name), purpose (role), value, and state. Check keyboard use, visible focus, target size, disabled and busy states, feedback, and recovery. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.