Interaktive Ziele müssen mindestens 24 × 24 CSS-Pixel groß sein

Winzige Mengen-Schaltflächen, Schließen-Icons, Farbfelder und Filter-Kontrollkästchen sind für Menschen mit Tremor oder eingeschränkter Fingerfertigkeit schwer zu treffen, ebenso für alle am Smartphone. Sie tippen auf die falsche Größe, entfernen den falschen Artikel oder geben auf, was vor allem mobil Bestellungen kostet.

Regel-ID
vs-target-size
Quelle
Validiscan-Prüfung
Auswirkung
Schwerwiegend
Korrekturstufe
AUTO
auf Shopify, Shopware, WooCommerce und Magento
Status
wird ausgeführt

Was geprüft wird

Misst Links, Schaltflächen und Formularelemente und markiert Ziele, die kleiner als 24 × 24 CSS-Pixel sind und die Abstandsausnahme nicht erfüllen (2.5.8). Links in Fließtext sind ausgenommen. Ersetzt die axe-Regel target-size.

Die Prüfung misst auch summary-Elemente und Elemente mit Rollen wie checkbox, tab und option, deshalb zählen auch Farbfelder in einer Listbox. Deaktivierte und verborgene Ziele sowie Ziele der Größe null werden übersprungen, ebenso Skip-Links, die außerhalb der Seite geparkt sind. Ein sichtbares <label> eines Bedienelements wird zu dessen gemessener Fläche hinzugerechnet.

Ein Ziel gilt als klein, wenn seine Breite oder Höhe unter 24 CSS-Pixeln liegt; für Layouts mit Subpixel-Werten gilt eine Toleranz von 0,25 px. Ein kleines Ziel besteht trotzdem, wenn:

  • ein Kreis mit 24 px Durchmesser um die Mitte des Ziels weder die Fläche eines anderen Ziels erreicht noch den Kreis eines anderen kleinen Ziels außerhalb von Fließtext;
  • es ein Inline-Element oder ein Link mit inline-block ist und in einem Block steht, der außerdem Text außerhalb aller Ziele enthält. Eine Überschrift über einer Liste von Links zählt dabei nicht.

Die Prüfung läuft in jedem gescannten Viewport getrennt, standardmäßig Desktop (1440 px) und mobil (390 px). Ein Ziel, das nur auf Smartphones schrumpft, wird deshalb für den mobilen Viewport gemeldet. Die Ausnahmen „Equivalent“, „User agent control“ und „Essential“ wendet die Prüfung nicht an; ob sie greifen, beurteilt ein Mensch.

So wird es behoben

Geben Sie Icon-Schaltflächen und kleinen Bedienelementen eine Trefferfläche von mindestens 24 × 24 CSS-Pixeln (auf Touchscreens besser 44 × 44), zum Beispiel mit padding oder min-width und min-height, ohne das sichtbare Icon zu verändern. Wo ein Ziel klein bleiben muss, halten Sie mindestens 24 Pixel Abstand zu seinen Nachbarn.

WCAG-Erfolgskriterien

Abschnitte der EN 301 549

Der Abschnitt der EN 301 549 zu jedem Kriterium, je Version der Norm
WCAG-Kriterium Version 3.2.1 Version 4.1.1
2.5.8 in dieser Version kein Abschnitt 9.2.5.8

Wo ein Rezept es behebt

Shopify: Rezept target-size-padding

Vorher und nachher anzeigen (1)
Vorher und nachher Beispieldaten

assets/base.css.liquid Änderungen an assets/base.css.liquid: 10 hinzugefügt, 0 entfernt

Änderungen an assets/base.css.liquid: 10 hinzugefügt, 0 entfernt
Zeile vorher Zeile nachher Änderung Code
1866 1866 }
1867 1867
1868 1868 /* ----------------------------------------------------------------- motion */
1869 Hinzugefügt
1870 Hinzugefügt /* validiscan:target-size-padding */
1871 Hinzugefügt .header__icon--account,
1872 Hinzugefügt .header__icon--cart,
1873 Hinzugefügt .swatch--button,
1874 Hinzugefügt .quantity__button {
1875 Hinzugefügt min-width: 24px;
1876 Hinzugefügt min-height: 24px;
1877 Hinzugefügt }
1878 Hinzugefügt /* /validiscan:target-size-padding */

Shopware: Rezept target-size-padding

Vorher und nachher anzeigen (1)
gives the header icons, steppers and swatches a 24px minimum; no page reports small targets Beispieldaten

Resources/app/storefront/src/scss/_variant-broken.scss Änderungen an Resources/app/storefront/src/scss/_variant-broken.scss: 6 hinzugefügt, 2 entfernt

Änderungen an Resources/app/storefront/src/scss/_variant-broken.scss: 6 hinzugefügt, 2 entfernt
Zeile vorher Zeile nachher Änderung Code
10 10
11 11 .header-actions-btn {
12 12 width: 18px;
13 Hinzugefügt min-width: 24px;
13 14 height: 18px;
14 Entfernt min-height: 0;
15 Hinzugefügt min-height: 24px;
15 16 padding: 0;
16 17 }
17 18
96 97 /* 18 px colour swatches, 20 px quantity and remove buttons (vs-target-size). */
97 98 .product-detail-configurator-option-input {
98 99 width: 18px;
100 Hinzugefügt min-width: 24px;
99 101 height: 18px;
102 Hinzugefügt min-height: 24px;
100 103 margin-right: 4px;
101 104 }
102 105
103 106 .quantity-selector-group .btn,
104 107 .line-item-remove-button {
105 108 width: 20px;
109 Hinzugefügt min-width: 24px;
106 110 height: 20px;
107 Entfernt min-height: 0;
111 Hinzugefügt min-height: 24px;
108 112 padding: 0;
109 113 }
110 114

WooCommerce: Rezept target-size-padding

Vorher und nachher anzeigen (1)
raises the social icons, quantity steppers and swatches of the fixture theme to 24 × 24 px Beispieldaten

assets/css/main.css Änderungen an assets/css/main.css: 4 hinzugefügt, 2 entfernt

Änderungen an assets/css/main.css: 4 hinzugefügt, 2 entfernt
Zeile vorher Zeile nachher Änderung Code
710 710 /* VALIDISCAN-SEED vs-target-size: 18 x 18 px icon links, 4 px apart. */
711 711 .kb-social__link {
712 712 display: inline-flex;
713 Entfernt width: 18px;
714 Entfernt height: 18px;
713 Hinzugefügt width: 24px;
714 Hinzugefügt height: 24px;
715 715 color: var(--kb-ink);
716 Hinzugefügt align-items: center;
717 Hinzugefügt justify-content: center;
716 718 }
717 719
718 720 .site-info {

assets/css/woocommerce.css Änderungen an assets/css/woocommerce.css: 4 hinzugefügt, 4 entfernt

Änderungen an assets/css/woocommerce.css: 4 hinzugefügt, 4 entfernt
Zeile vorher Zeile nachher Änderung Code
421 421
422 422 /* VALIDISCAN-SEED vs-target-size: 18 x 18 px colour swatches, 4 px apart. */
423 423 .kb-swatch {
424 Entfernt width: 18px;
425 Entfernt height: 18px;
424 Hinzugefügt width: 24px;
425 Hinzugefügt height: 24px;
426 426 padding: 0;
427 427 border: 1px solid rgba(0, 0, 0, 0.2);
428 428 border-radius: 50%;
489 489 /* VALIDISCAN-SEED vs-target-size: 18 x 18 px quantity steppers glued to the input. */
490 490 .kb-qty-minus,
491 491 .kb-qty-plus {
492 Entfernt width: 18px;
493 Entfernt height: 18px;
492 Hinzugefügt width: 24px;
493 Hinzugefügt height: 24px;
494 494 padding: 0;
495 495 border: 1px solid #b9b3aa;
496 496 border-radius: 2px;

Magento: Rezept target-size-padding

Vorher und nachher anzeigen (1)
sizes the three flagged controls and validates Beispieldaten

app/design/frontend/Validiscan/fixture/web/css/source/_theme.less Änderungen an app/design/frontend/Validiscan/fixture/web/css/source/_theme.less: 9 hinzugefügt, 0 entfernt

Änderungen an app/design/frontend/Validiscan/fixture/web/css/source/_theme.less: 9 hinzugefügt, 0 entfernt
Zeile vorher Zeile nachher Änderung Code
1264 1264 height: 18px;
1265 1265 stroke-width: 3;
1266 1266 }
1267 Hinzugefügt
1268 Hinzugefügt /* validiscan:target-size-padding */
1269 Hinzugefügt .social-link,
1270 Hinzugefügt .actions-secondary .action,
1271 Hinzugefügt .qty-step {
1272 Hinzugefügt min-width: 24px;
1273 Hinzugefügt min-height: 24px;
1274 Hinzugefügt }
1275 Hinzugefügt /* /validiscan:target-size-padding */

app/design/frontend/Validiscan/fixture/web/css/styles-m.css Änderungen an app/design/frontend/Validiscan/fixture/web/css/styles-m.css: 9 hinzugefügt, 0 entfernt

Änderungen an app/design/frontend/Validiscan/fixture/web/css/styles-m.css: 9 hinzugefügt, 0 entfernt
Zeile vorher Zeile nachher Änderung Code
1232 1232 height: 18px;
1233 1233 stroke-width: 3;
1234 1234 }
1235 Hinzugefügt
1236 Hinzugefügt /* validiscan:target-size-padding */
1237 Hinzugefügt .social-link,
1238 Hinzugefügt .actions-secondary .action,
1239 Hinzugefügt .qty-step {
1240 Hinzugefügt min-width: 24px;
1241 Hinzugefügt min-height: 24px;
1242 Hinzugefügt }
1243 Hinzugefügt /* /validiscan:target-size-padding */

Beginnen Sie mit einem kostenlosen Check Ihres Shops.

Senden Sie die Adresse Ihres Shops. Validiscan scannt ihn und antwortet mit jedem Fehler, den der Scan nachweisen kann, jeweils mit der Seite und dem Code.

Kostenlosen Check anfordern

Oder schreiben Sie an info@validiscan.com.

Was der kostenlose Check umfasst und was nicht
Sie senden
die Adresse Ihres Shops
Gescannte Seiten
bis zu 15
Sie erhalten
jeden Fehler, den der Scan nachweisen kann, mit Seite und Code
In Ihrem Shop
nur öffentliche Seiten; keine Anmeldung, nichts gekauft, kein Formular abgeschickt
Was er nicht ist
ein vollständiges Audit

Nachricht an Validiscan

Für einen kostenlosen Check nennen Sie die Adresse Ihres Shops und seine Plattform.

Validiscan verwendet, was Sie senden, um Ihnen zu antworten. Datenschutzerklärung