WCAG Erfolgskriterien
WCAG 2.2 AA

Erfolgskriterium 2.5.8
Größe des Zielbereichs (Minimum)
(Target Size)

[Materialsammlung]

Steuerelemente benötigen eine Mindestgröße oder einen Mindestabstand zum nächsten Steuerelement.

WCAG Kontext

Konformitätsstufe AA

Prinzip 2. Bedienbar Operable

Komponenten der Benutzerschnittstelle und die Navigation müssen bedienbar sein.

Richtlinie 2.5 Eingabeverfahren

Mach es einfacher, Funktionalitäten über die Tastatur hinaus durch verschiedene Eingaben zu bedienen.

Erläuterungen zum Kontext

Das Erfolgskriterium wurde in den WCAG 2.2 neu eingeführt.

Strukturierende Übersetzung des Erfolgskriteriums

Die Größe des Zielbereichs für Zeigereingaben beträgt mindestens 24 × 24 CSS Pixel.

Ausnahmen

Abstand
Unterdimensionierte Zielbereiche (mit weniger als 24 × 24 CSS Pixel) sind auf eine Weise positioniert, dass jeweils ein Kreis mit 24 Pixel Durchmesser und dem Mittelpunkt in der umgrenzenden Box sich nicht mit einem anderen Zielbereich oder dem Kreis für einen anderen unterdimensionierten Zielbereich überschneidet.
Äquivalent
Die Funktion kann durch ein anderes Steuerelement auf derselben Seite erzielt werden, welches dieses Kriterium erfüllt.
Zeileninhalt
Der Zielbereich befindet sich in einem Satz oder dessen Größe hängt auf eine andere Weise von der Zeilenhöhe des Textes außerhalb des Zielbereichs ab.
Kontrolle durch Darstellungsprogramm
Die Größe des Zielbereichs wird vom Darstellungsprogramm festgelegt und wird von Autor*innen nicht verändert.
Wesentlicher Bestandteil
Eine besondere Präsentation des Zielbereichs ist für die bereitgestellte Information notwendig oder rechtlich erforderlich.

Anmerkungen

  1. Zielbereiche, die der Auswahl von Werten insbesondere in Abhängigkeit von deren Position im Zielbereich dienen, werden als ein Zielbereich im Sinne dieses Kriteriums angesehen.
    Beispiele dafür sind etwa Schieberegler, eine Farbauswahl mit Farbabstufungen oder Editierbereiche mit der Möglichkeit zur Positionierung des Cursors.
  2. Bei Zielbereichen innerhalb einer Zeile sollte die vertikale Zeilenhöhe herangezogen werden.
    In einer vertikal dargestellten Sprache wäre die Zeilenhöhe beispielsweise horizontal.
Anmerkungen zur Übersetzung
  • Das Produktzeichen × (×) wurde zur Darstellung der Mindestdimensionen verwendet.
  • Die Ausnahmebestimmungen wurden unter einer Überschrift in einer Definitionsliste dargestellt.
  • Die Anmerkungen wurden unter einer Überschrift in einer nummerierten Liste dargestellt.
Englischsprachiger Originaltext des Erfolgskriteriums

The size of the target for pointer inputs is at least 24 by 24 CSS pixels, except where:

  • Spacing: Undersized targets (those less than 24 by 24 CSS pixels) are positioned so that if a 24 CSS pixel diameter circle is centered on the bounding box of each, the circles do not intersect another target or the circle for another undersized target;
  • Equivalent: The function can be achieved through a different control on the same page that meets this criterion;
  • Inline: The target is in a sentence or its size is otherwise constrained by the line-height of non-target text;
  • User agent : control: The size of the target is determined by the user agent and is not modified by the author;
  • Essential: A particular presentation of the target is essential or is legally required for the information being conveyed.
Anmerkung 1

Targets that allow for values to be selected spatially based on position within the target are considered one target for the purpose of the success criterion. Examples include sliders, color pickers displaying a gradient of colors, or editable areas where you position the cursor.

Anmerkung 2

For inline targets the line-height should be interpreted as perpendicular to the flow of text. For example, in a language displayed vertically, the line-height would be horizontal.

WCAG | Success Criterion 2.5.8 Target Size (Minimum)

Zum raschen Verständnis

Schwierigkeiten bei der Aktivierung von Steuerelementen oder gar Fehleingaben mit der Maus oder am Touch Screen sollten vermieden werden. Je größer die Fläche zur Aktivierung ist, desto leichter ist es, die Fläche auch bei motorischen Beeinträchtigungen sicher anzuzilen.

Im Grunde gibt es drei Ansätze, um dieses Erfolgskriterium zu erfüllen:

  1. Das Steuerelement selbst ist mindestens 24 Pixel hoch und breit.
  2. In einem Radius von 12 Pixeln um einen konstruierten Mittelpunkt des Steuerelements befindet sich kein anderes Steuerelement.
  3. Die Größe von Steuerelementen wird gänzlich dem Browser überlassen.

Rechteckige Steuerelemente

Das Basiskonzept besteht darin, dem Steuerelement eine minimale Breite und Höhe von jeweils 24 CSS-Pixeln zuzuweisen. Entscheidend sind also die Pixelangaben in den CSS-Anweisungen und nicht die Darstellung durch Hard- und Software.

Die folgende Illustration stellt einen quadratischen Schalter dar, dessen Icon durch einen fünfzackigen Stern repräsentiert ist. Das Erfolgskriterium ist durch eine Breite und Höhe der Komponente von 24 Pixeln erfüllt:

Türkiser Stern in einem Quadrat mit den horizontalen und vertikalen Dimensionsangaben 24px

Zirkuläre Abstände

In der ersten Ausnahmebestimmung wird die Möglichkeit eröffnet, für kleinere Komponenten durch einem Mindestabstand zu anderen Steuerelementen das Erfolgskriterium zu erfüllen. Um den Mittelpunkt eines Steuerelements wird ein Kreis mit einem Radius von 12 Pixeln gezogen, der sich mit einem entsprechenden Kreis eines anderen Steuerelements nicht überschneiden darf.

In der folgenden Illustration ist das Icon als Steuerelement selbst zu klein. Das Erfolgskriterium ist ttrotzdem erfüllt, wenn ein Kreis um die Komponente mit einem Durchmesser von 24 Pixeln ohne Überlappung zu anderen Steuerelementen verfügbar ist.

Türkiser Stern in einem strichlierten Kreis umrandet von einem gepunkteten Quadrat mit der Durchmesserangabe 24px

Weitere Ausnahmebestimmungen

Ein Beispiel für eine wesentliche Ausnahme stellen interaktive Karten dar. Es kann sein, dass zwei Steuerelemente für Orte einen geringeren Abstand aufweisen, um deren geografischen Abstand auf der Darstellung korrekt wiederzugeben.

Zielgruppen