Praxisleitfaden Klickziele und Abstände
Zu kleine Klickziele vergrößern
Prüfen Sie Zielgröße und Abstand am Beispiel einer Paarungswand.
target-sizeWCAG 2.5.8
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-target-size.html
Befund verstehen
Brett zwei ist schwer gezielt auszuwählen
Die vier Schalter unter „Brett markieren“ sind jeweils 18 × 18 CSS-Pixel groß. Zwischen ihnen liegen nur 2 Pixel. Der zweite Schalter unterschreitet damit die Mindestgröße; auch die Abstandsprüfung schlägt fehl.
Warum das relevant ist
Wer mit zitternder Hand, einem Stift oder einem Finger ein Brett markieren möchte, kann leicht den benachbarten Schalter treffen. Der vorhandene Name „Brett zwei markieren“ löst dieses geometrische Problem nicht.
Scanner-Signal
target-size meldet .board-pin[data-focus="2"]: 18 × 18 CSS-Pixel und unzureichender Abstand.
- Regel
target-size- Referenz
- WCAG 2.5.8
Gemessene Fundstelle
Brett zwei: 18 × 18 CSS-Pixel
Abstand zwischen den Schaltern: 2 CSS-Pixel
Axe: Zielgröße und Abstand unzureichend
WCAG-Bezug: 2.5.8, Stufe AAZielgrößen in Komponenten nachprüfen
Eine gemeinsame Schaltergröße kann mehrere Seiten betreffen. Prüfen Sie nach der Vergrößerung auch Platzbedarf und Aktivierung in schmalen Ansichten.
- Runde eins× Befund im Beispiel
- Runde zwei× Befund im Beispiel
- Turnierübersicht Ohne diesen Befund im Beispiel
Nach der Änderung erneut prüfenMessen Sie die aktive Fläche und prüfen Sie, ob jeder Schalter weiterhin das zugehörige Brett auswählt.
Schematische Zuordnung, kein Scanergebnis. „Ohne diesen Befund“ sagt nichts über andere Barrieren aus.
Wann ein kleines Ziel zulässig sein kann
WCAG 2.5.8 verlangt 24 × 24 CSS-Pixel oder eine passende Ausnahme.
| Fall | Wann trifft er zu? | Passende Umsetzung |
|---|---|---|
| Aktive Fläche vergrößern | Das Ziel ist ein eigenständiger Schalter wie die Brettauswahl. | Geben Sie ihm ausreichend Platz für ein 24 × 24 CSS-Pixel großes Quadrat. Hier wählen wir 44 × 44 Pixel als großzügigere Gestaltungsgröße. |
| Abstand nachweisen | Die kleinere aktive Fläche soll bestehen bleiben. | Denken Sie um die Mitte jedes zu kleinen Ziels einen Kreis mit 24 Pixel Durchmesser. Er darf weder ein anderes Ziel noch den entsprechenden Kreis eines anderen zu kleinen Ziels schneiden. Hier scheitert diese Ausnahme. |
| Weitere Ausnahmen begründen | Der Kontext rechtfertigt eine andere Ausnahme des Kriteriums. | Möglich sind ein gleichwertiges, konformes Bedienelement auf derselben Seite, ein Ziel im Satz beziehungsweise durch die Textzeilenhöhe begrenztes Ziel, eine unveränderte Browser-Zielgröße oder eine für den Inhalt wesentliche beziehungsweise gesetzlich verlangte Darstellung. Eine kompakte Gestaltung allein genügt nicht. |
Fundstelle im Zusammenhang
Die ganze Paarungswand bleibt sichtbar
Die Kalibrierseite zeigt vier fiktive Schachpaarungen. Oben rechts steuern die vier nummerierten Schalter, welche Brettzeile hervorgehoben wird. Überschrift, Einstellungen und alle Paarungen bleiben im Beleg erhalten.
Die Markierung umfasst die gesamte Brettauswahl, damit alle vier Schalter und ihre Abstände sichtbar bleiben. Geprüft wird der zweite Schalter: Seine aktive Fläche ist zu klein und seine Nachbarn stehen zu nah. Die Vergleichsansicht zeigt die Gruppe nach der Korrektur.
Aktive Fläche anpassen
Die Schalter erhalten 44 × 44 Pixel
Die Korrektur vergrößert alle vier vorhandenen Buttons. Ihre Beschriftungen, Ereignisbehandlung und der Abstand von 2 Pixeln bleiben erhalten. Größere Ziele erfüllen hier bereits die Größenanforderung; ein zusätzlicher Abstand von 24 Pixeln ist nicht nötig.
Im Seitensystem Ändern Sie die Größe der Button-Komponente oder deren Innenabstand. Entscheidend ist die klickbare Fläche des Buttons; ein größerer Hintergrund auf einem nicht klickbaren Container hilft nicht.
Vorher
.board-pin {
width: 18px;
height: 18px;
padding: 0;
}
.board-focus {
display: flex;
gap: 2px;
}Nachher
.board-pin {
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
flex-shrink: 0;
padding: 0;
}
.board-focus {
display: flex;
gap: 2px;
}Markierte Zeilen wurden geändert
Im Layout umsetzen
Die aktive Fläche zählt
Messen Sie die bedienbare Fläche im gerenderten Zustand, einschließlich ihrer Nachbarn.
- 1
Vergrößern Sie den Button selbst. Ein kleines Symbol kann innerhalb einer größeren klickbaren Fläche stehen.
- 2
Prüfen Sie Flex- und Grid-Layouts: Schalter dürfen bei Platzmangel nicht unter ihre Mindestmaße schrumpfen. Lassen Sie die Gruppe bei Bedarf umbrechen.
- 3
Testen Sie schmale Ansichten und geöffnete Menüs. Andere Nachbarn oder überlagernde Elemente können die nutzbare Fläche verändern.
- 4
Nutzen Sie 44 × 44 Pixel als großzügige Gestaltungspraxis. Das ist die hier gewählte Korrektur, während WCAG 2.5.8 auf 24 × 24 Pixel mit Ausnahmen abstellt.
Fehlkorrekturen vermeiden
Was den Trefferbereich nicht zuverlässig verbessert
Nur das Symbol vergrößern
Ein skaliertes Icon kann über den Button hinausragen, ohne dessen aktive Fläche entsprechend zu erweitern. Messen Sie den tatsächlichen Trefferbereich.
Immer 24 Pixel Abstand verlangen
24 Pixel ist bei der Abstandsausnahme der Kreisdurchmesser, kein pauschaler Zwischenraum. Bei hinreichend großen Zielen verlangt dieses Kriterium keinen zusätzlichen Abstand.
Die Inline-Ausnahme auf jede Zeile anwenden
Eine Buttonleiste wird nicht dadurch zum ausgenommenen Fließtext, dass ihre Schalter nebeneinander stehen. Die Brettauswahl bleibt eine eigenständige Bediengruppe.
Zoom als Reparatur einplanen
Die Messung erfolgt in CSS-Pixeln. Nutzende zum Vergrößern der Seite aufzufordern korrigiert die zu kleine Ausgangsfläche nicht.
Brett zwei besteht den erneuten Regeltest
Nach der Änderung misst der ausgewählte Schalter 44 × 44 CSS-Pixel. Axe meldet für target-size an diesem Element einen bestandenen Test. Zusätzlich wurde geprüft, dass sein Klick weiterhin die zweite Brettzeile hervorhebt.
So prüfen Sie die Korrektur nach
- Die veröffentlichte Seite erneut laden und Größe sowie Nachbarabstände in den relevanten Ansichten messen.
- target-size erneut ausführen und die ursprünglich markierte Fundstelle vergleichen.
- Die Brettauswahl mit Maus, Touch und Tastatur erproben: Jedes Ziel soll die zugehörige Zeile auswählen und einen erkennbaren Fokus behalten.
Der Beleg bestätigt die Korrektur dieser Fundstelle in der erfassten Desktopansicht. Er weist weder vollständige Barrierefreiheit der Kalibrierseite noch die Qualität aller Eingabemethoden nach.
Verifizierte Änderung
Brett zwei: 18 × 18 → 44 × 44 CSS-Pixel
Axe target-size: Verstoß → bestanden
Funktionsprüfung: Klick markiert Brett zweiPrüfumfang abgrenzen
Geometrie automatisch prüfen, Bedienung zusätzlich erproben
Ein Scan bewertet erreichbare gerenderte Zustände; die Nutzung braucht ergänzende Prüfungen.
Automatisch prüfbar
- Zu kleine Ziele und zu nahe Nachbarn im geladenen Seitenzustand erkennen.
- Die betroffene Schaltfläche über Selektor und Seitenbeleg zuordnen.
- Nach der Korrektur denselben geometrischen Regeltest wiederholen.
Im Kontext zu entscheiden
- Prüfen, ob eine kontextabhängige Ausnahme tatsächlich zutrifft.
- Geöffnete Menüs, zusätzliche Dialoge und responsive Ansichten separat bedienen.
- Erreichbarkeit, Fokus, verständliche Beschriftung und verlässliche Aktivierung mit verschiedenen Eingabemethoden beurteilen.