Klikflader skal være mindst 24 × 24 CSS-pixels
Små knapper til antal, lukkeikoner, farveprøver og afkrydsningsfelter i filtre er svære at ramme for folk med rystende hænder eller nedsat fingerfærdighed og for alle på mobilen. De trykker på den forkerte størrelse, fjerner den forkerte vare eller giver op, og det koster ordrer, især på mobil.
- Regel-id
- vs-target-size
- Kilde
- Validiscan-kontrol
- Alvorlighed
- Alvorlig
- Rettelsesniveau
- AUTO
- på Shopify, Shopware, WooCommerce og Magento
- Status
- køres
Hvad kontrollen gør
Måler links, knapper og formularelementer og markerer klikflader, der er mindre end 24 × 24 CSS-pixels, og som ikke er omfattet af undtagelsen for afstand (2.5.8). Links i løbende tekst er undtaget. Erstatter axe-reglen target-size.
Kontrollen måler også summary-elementer og elementer med roller som checkbox, tab og option, så farveprøver i en listbox tæller med. Klikflader, der er deaktiverede, skjulte eller har størrelsen nul, springes over, ligesom spring over-links, der er parkeret uden for siden. Et betjeningselements synlige <label> lægges til dets målte flade.
En klikflade er lille, når dens bredde eller højde er under 24 CSS-pixels, med en tolerance på 0,25 px for layout med subpixel-værdier. En lille klikflade består alligevel, når:
- en cirkel på 24 px med centrum i klikfladen hverken når en anden klikflades flade eller cirklen om en anden lille klikflade uden for løbende tekst;
- den er et inline-element eller et
inline-block-link i en blok, der også indeholder tekst uden for enhver klikflade. En overskrift over en liste af links tæller ikke.
Kontrollen kører særskilt i hver scannet viewport, som standard desktop (1440 px) og mobil (390 px), så en klikflade, der kun krymper på telefoner, rapporteres for mobil. Den anvender ikke undtagelserne »Equivalent«, »User agent control« og »Essential«; dem vurderer et menneske.
Sådan retter du det
Giv ikonknapper og små betjeningselementer en klikflade på mindst 24 × 24 CSS-pixels (44 × 44 er bedre på touchskærme), for eksempel med padding eller min-width og min-height, uden at ændre det synlige ikon. Hvor en klikflade skal forblive lille, så hold mindst 24 pixels afstand til naboelementerne.
WCAG-succeskriterier
- 2.5.8 Target Size (Minimum), niveau AA
Afsnit i EN 301 549
| WCAG-kriterium | Version 3.2.1 | Version 4.1.1 |
|---|---|---|
| 2.5.8 | ikke et afsnit i denne version | 9.2.5.8 |
Hvor en opskrift retter det
Shopify: opskrift target-size-padding
Vis før og efter (1)
assets/base.css.liquid Ændringer i assets/base.css.liquid: 10 tilføjet, 0 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 1866 | 1866 | } | |
| 1867 | 1867 | ||
| 1868 | 1868 | /* ----------------------------------------------------------------- motion */ | |
| 1869 | Tilføjet | ||
| 1870 | Tilføjet | /* validiscan:target-size-padding */ | |
| 1871 | Tilføjet | .header__icon--account, | |
| 1872 | Tilføjet | .header__icon--cart, | |
| 1873 | Tilføjet | .swatch--button, | |
| 1874 | Tilføjet | .quantity__button { | |
| 1875 | Tilføjet | min-width: 24px; | |
| 1876 | Tilføjet | min-height: 24px; | |
| 1877 | Tilføjet | } | |
| 1878 | Tilføjet | /* /validiscan:target-size-padding */ |
Shopware: opskrift target-size-padding
Vis før og efter (1)
Resources/app/storefront/src/scss/_variant-broken.scss Ændringer i Resources/app/storefront/src/scss/_variant-broken.scss: 6 tilføjet, 2 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 10 | 10 | ||
| 11 | 11 | .header-actions-btn { | |
| 12 | 12 | width: 18px; | |
| 13 | Tilføjet | min-width: 24px; | |
| 13 | 14 | height: 18px; | |
| 14 | Fjernet | min-height: 0; | |
| 15 | Tilføjet | 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 | Tilføjet | min-width: 24px; | |
| 99 | 101 | height: 18px; | |
| 102 | Tilføjet | 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 | Tilføjet | min-width: 24px; | |
| 106 | 110 | height: 20px; | |
| 107 | Fjernet | min-height: 0; | |
| 111 | Tilføjet | min-height: 24px; | |
| 108 | 112 | padding: 0; | |
| 109 | 113 | } | |
| 110 | 114 |
WooCommerce: opskrift target-size-padding
Vis før og efter (1)
assets/css/main.css Ændringer i assets/css/main.css: 4 tilføjet, 2 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 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 | Fjernet | width: 18px; | |
| 714 | Fjernet | height: 18px; | |
| 713 | Tilføjet | width: 24px; | |
| 714 | Tilføjet | height: 24px; | |
| 715 | 715 | color: var(--kb-ink); | |
| 716 | Tilføjet | align-items: center; | |
| 717 | Tilføjet | justify-content: center; | |
| 716 | 718 | } | |
| 717 | 719 | ||
| 718 | 720 | .site-info { |
assets/css/woocommerce.css Ændringer i assets/css/woocommerce.css: 4 tilføjet, 4 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 421 | 421 | ||
| 422 | 422 | /* VALIDISCAN-SEED vs-target-size: 18 x 18 px colour swatches, 4 px apart. */ | |
| 423 | 423 | .kb-swatch { | |
| 424 | Fjernet | width: 18px; | |
| 425 | Fjernet | height: 18px; | |
| 424 | Tilføjet | width: 24px; | |
| 425 | Tilføjet | 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 | Fjernet | width: 18px; | |
| 493 | Fjernet | height: 18px; | |
| 492 | Tilføjet | width: 24px; | |
| 493 | Tilføjet | height: 24px; | |
| 494 | 494 | padding: 0; | |
| 495 | 495 | border: 1px solid #b9b3aa; | |
| 496 | 496 | border-radius: 2px; |
Magento: opskrift target-size-padding
Vis før og efter (1)
app/design/frontend/Validiscan/fixture/web/css/source/_theme.less Ændringer i app/design/frontend/Validiscan/fixture/web/css/source/_theme.less: 9 tilføjet, 0 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 1264 | 1264 | height: 18px; | |
| 1265 | 1265 | stroke-width: 3; | |
| 1266 | 1266 | } | |
| 1267 | Tilføjet | ||
| 1268 | Tilføjet | /* validiscan:target-size-padding */ | |
| 1269 | Tilføjet | .social-link, | |
| 1270 | Tilføjet | .actions-secondary .action, | |
| 1271 | Tilføjet | .qty-step { | |
| 1272 | Tilføjet | min-width: 24px; | |
| 1273 | Tilføjet | min-height: 24px; | |
| 1274 | Tilføjet | } | |
| 1275 | Tilføjet | /* /validiscan:target-size-padding */ |
app/design/frontend/Validiscan/fixture/web/css/styles-m.css Ændringer i app/design/frontend/Validiscan/fixture/web/css/styles-m.css: 9 tilføjet, 0 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 1232 | 1232 | height: 18px; | |
| 1233 | 1233 | stroke-width: 3; | |
| 1234 | 1234 | } | |
| 1235 | Tilføjet | ||
| 1236 | Tilføjet | /* validiscan:target-size-padding */ | |
| 1237 | Tilføjet | .social-link, | |
| 1238 | Tilføjet | .actions-secondary .action, | |
| 1239 | Tilføjet | .qty-step { | |
| 1240 | Tilføjet | min-width: 24px; | |
| 1241 | Tilføjet | min-height: 24px; | |
| 1242 | Tilføjet | } | |
| 1243 | Tilføjet | /* /validiscan:target-size-padding */ |
Begynd med et gratis tjek af din webshop.
Send din webshops adresse. Validiscan scanner den og svarer med hver fejl, scanningen kan påvise, med siden og koden.
Bestil et gratis tjekEller skriv til info@validiscan.com.
Hvad det gratis tjek omfatter, og hvad det udelader- Du sender
- din webshops adresse
- Sider, der scannes
- op til 15
- Du får
- hver fejl, scanningen kan påvise, med siden og koden
- På din webshop
- kun offentlige sider; intet login, intet købt, ingen formularer sendt
- Hvad det ikke er
- et fuldt audit