Abstand interaktiver Bedienelemente

Silktide misst die Größe und den Abstand von Schaltflächen, Links und Formularsteuerelementen auf Ihren Seiten. Kleine, dicht beieinanderliegende Bedienelemente lassen sich leicht versehentlich betätigen, daher sollte jedes entweder mindestens 24 × 24 Pixel groß sein oder genug Freiraum darum besitzen.

Warum das wichtig ist

Jede Person kann eine kleine Schaltfläche verfehlen, doch für Menschen mit Zittern, Arthritis oder eingeschränkter Feinmotorik machen eng gepackte Bedienelemente eine Seite wirklich schwer nutzbar – der falsche Link wird angetippt, das falsche Formular abgeschickt oder die Nutzung ganz aufgegeben. Am schlimmsten ist es auf Touchscreens, wo eine Fingerkuppe deutlich unpräziser ist als ein Mauszeiger.

Dies ist das -Erfolgskriterium 2.5.8 (Zielgröße – Minimum), eine Anforderung der in WCAG 2.2, und damit Teil des Konformitätsziels, das die meisten Organisationen anstreben.

So beheben Sie das Problem

Machen Sie jedes interaktive Element mindestens 24 × 24 -Pixel groß. Das Setzen von min-width und min-height oder das Hinzufügen von Padding reicht in der Regel aus.
Alternativ fügen Sie Abstände zwischen den Bedienelementen hinzu, sodass eine 24 × 24 Pixel große, auf jedes Element zentrierte Fläche sich nicht mit benachbarten Elementen überschneidet – kleinere Ziele sind zulässig, wenn sich in der Nähe nichts anderes befindet.
Achten Sie besonders auf Symbolschaltflächen, Seitennummerierungslinks und Social-Media-Symbole, die häufig zu klein und eng gruppiert sind.

/* Problem: 16px-Symbolschaltflächen berühren sich gegenseitig */
.toolbar button {
  width: 16px;
  height: 16px;
}

/* Lösung: Klickfläche auf mindestens 24×24 vergrößern */
.toolbar button {
  min-width: 24px;
  min-height: 24px;
}

So prüft Silktide das

Es werden sowohl die mobile als auch die Desktop-Version jeder Seite getestet; die Ergebnisse können unterschiedlich ausfallen.
Die interaktiven Elemente werden ermittelt: Links, Schaltflächen, Formularfelder und Imagemap-Bereiche.
Elemente, die normalerweise nicht sichtbar sind, z. B. für außerhalb des sichtbaren Bereichs positionierte Inhalte, sowie alle von Ihnen vom Check ausgeschlossenen Elemente werden ignoriert.
Als bestanden gelten alle Elemente, die mindestens 24 Pixel breit und 24 Pixel hoch sind.
Steuerelemente, die in einem Satz oder Textblock eingebettet sind, werden ignoriert; diese sind gemäß WCAG von dieser Regel ausgenommen.
Für jedes verbleibende kleine Element wird der Abstand zu jedem anderen interaktiven Element gemessen. Der erforderliche Abstand beträgt horizontal 24 Pixel minus der Elementbreite und vertikal 24 Pixel minus der Elementhöhe.
Das Element wird gemeldet, wenn ein anderes Bedienelement in diesen Abstand hineinragt – es sei denn, beide sind Links zum selben Ziel. An den Bildschirm angeheftete Elemente (z. B. Sticky-Header) werden mit anderen angehefteten Elementen verglichen und nicht mit den Inhalten, die darunter scrollen.

Fehlerbehebung

Ein kleines Steuerelement hat den Check bestanden

Die Größe allein ist kein Fehler: Ein kleines Bedienelement besteht, wenn es genügend Freiraum um sich hat, inline im Text steht oder sich nur neben Links befindet, die zum selben Ziel führen. Dies entspricht den Ausnahmen, die WCAG selbst zulässt.

Es werden nur einige Fehler aufgeführt

Silktide meldet bis zu 10 der schwerwiegendsten Beispiele pro Seite. Das Beheben eines gemeinsamen Styles löst in der Regel viele Probleme auf einmal.

Ich möchte den strengeren Standard

Dieser Check prüft das Mindestmaß der Stufe AA von 24 × 24 Pixel. Der verwandte Check Ausreichend große Bedienelemente prüft die strengere Empfehlung der Stufe AAA von 44 × 44 Pixel.