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-blockist 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
- 2.5.8 Target Size (Minimum), Stufe AA
Abschnitte der EN 301 549
| 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)
assets/base.css.liquid Ä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)
Resources/app/storefront/src/scss/_variant-broken.scss Ä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)
assets/css/main.css Ä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
| 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)
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
| 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
| 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 anfordernOder 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