Les cibles interactives doivent mesurer au moins 24 × 24 pixels CSS
Les minuscules boutons de quantité, icônes de fermeture, pastilles de couleur et cases à cocher de filtre sont difficiles à toucher pour les personnes qui ont des tremblements ou une dextérité réduite, et pour toute personne sur téléphone. Elles touchent la mauvaise taille, suppriment le mauvais article ou abandonnent, ce qui coûte des commandes, en particulier sur mobile.
- Identifiant de la règle
- vs-target-size
- Source
- Contrôle Validiscan
- Impact
- Grave
- Niveau de correction
- AUTO
- sur Shopify, Shopware, WooCommerce et Magento
- Statut
- exécutée
Ce que fait le contrôle
Mesure les liens, les boutons et les champs de formulaire et signale les cibles de moins de 24 × 24 pixels CSS qui ne remplissent pas l’exception d’espacement (2.5.8). Les liens placés dans le texte courant sont exclus. Remplace la règle axe target-size.
Le contrôle mesure aussi les éléments summary et les éléments dotés de rôles comme checkbox, tab et option ; les pastilles de couleur d’une liste d’options (listbox) comptent donc. Les cibles désactivées, masquées ou de taille nulle sont ignorées, de même que les liens d’évitement placés hors de la page. Le <label> visible d’une commande s’ajoute à sa surface mesurée.
Une cible est petite quand sa largeur ou sa hauteur est inférieure à 24 px CSS, avec une tolérance de 0,25 px pour la mise en page au sous-pixel. Une petite cible réussit malgré tout quand :
- un cercle de 24 px de diamètre centré sur elle n’atteint ni la surface d’une autre cible, ni le cercle d’une autre petite cible située hors du texte courant ;
- elle est un élément inline, ou un lien en
inline-block, dans un bloc qui contient aussi du texte hors de toute cible. Un titre placé au-dessus d’une liste de liens ne compte pas.
Le contrôle s’exécute séparément dans chaque zone d’affichage scannée, par défaut ordinateur (1440 px) et mobile (390 px) ; une cible qui ne rétrécit que sur téléphone est donc signalée pour le mobile. Il n’applique pas les exceptions « Equivalent », « User agent control » et « Essential » ; une personne en juge.
Comment corriger
Donnez aux boutons en forme d’icône et aux petits éléments interactifs une zone cliquable d’au moins 24 × 24 pixels CSS (44 × 44 est préférable sur les écrans tactiles), par exemple avec padding ou avec min-width et min-height, sans modifier l’icône visible. Lorsqu’une cible doit rester petite, laissez au moins 24 pixels entre elle et ses voisines.
Critères de succès WCAG
- 2.5.8 Target Size (Minimum), niveau AA
Clauses de la norme EN 301 549
| Critère WCAG | Version 3.2.1 | Version 4.1.1 |
|---|---|---|
| 2.5.8 | aucune clause dans cette version | 9.2.5.8 |
Où une recette corrige le problème
Shopify : recette target-size-padding
Afficher l’avant et l’après (1)
assets/base.css.liquid Modifications apportées à assets/base.css.liquid (lignes ajoutées : 10, lignes supprimées : 0)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 1866 | 1866 | } | |
| 1867 | 1867 | ||
| 1868 | 1868 | /* ----------------------------------------------------------------- motion */ | |
| 1869 | Ajoutée | ||
| 1870 | Ajoutée | /* validiscan:target-size-padding */ | |
| 1871 | Ajoutée | .header__icon--account, | |
| 1872 | Ajoutée | .header__icon--cart, | |
| 1873 | Ajoutée | .swatch--button, | |
| 1874 | Ajoutée | .quantity__button { | |
| 1875 | Ajoutée | min-width: 24px; | |
| 1876 | Ajoutée | min-height: 24px; | |
| 1877 | Ajoutée | } | |
| 1878 | Ajoutée | /* /validiscan:target-size-padding */ |
Shopware : recette target-size-padding
Afficher l’avant et l’après (1)
Resources/app/storefront/src/scss/_variant-broken.scss Modifications apportées à Resources/app/storefront/src/scss/_variant-broken.scss (lignes ajoutées : 6, lignes supprimées : 2)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 10 | 10 | ||
| 11 | 11 | .header-actions-btn { | |
| 12 | 12 | width: 18px; | |
| 13 | Ajoutée | min-width: 24px; | |
| 13 | 14 | height: 18px; | |
| 14 | Supprimée | min-height: 0; | |
| 15 | Ajoutée | 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 | Ajoutée | min-width: 24px; | |
| 99 | 101 | height: 18px; | |
| 102 | Ajoutée | 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 | Ajoutée | min-width: 24px; | |
| 106 | 110 | height: 20px; | |
| 107 | Supprimée | min-height: 0; | |
| 111 | Ajoutée | min-height: 24px; | |
| 108 | 112 | padding: 0; | |
| 109 | 113 | } | |
| 110 | 114 |
WooCommerce : recette target-size-padding
Afficher l’avant et l’après (1)
assets/css/main.css Modifications apportées à assets/css/main.css (lignes ajoutées : 4, lignes supprimées : 2)
| Ligne avant | Ligne après | Modification | 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 | Supprimée | width: 18px; | |
| 714 | Supprimée | height: 18px; | |
| 713 | Ajoutée | width: 24px; | |
| 714 | Ajoutée | height: 24px; | |
| 715 | 715 | color: var(--kb-ink); | |
| 716 | Ajoutée | align-items: center; | |
| 717 | Ajoutée | justify-content: center; | |
| 716 | 718 | } | |
| 717 | 719 | ||
| 718 | 720 | .site-info { |
assets/css/woocommerce.css Modifications apportées à assets/css/woocommerce.css (lignes ajoutées : 4, lignes supprimées : 4)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 421 | 421 | ||
| 422 | 422 | /* VALIDISCAN-SEED vs-target-size: 18 x 18 px colour swatches, 4 px apart. */ | |
| 423 | 423 | .kb-swatch { | |
| 424 | Supprimée | width: 18px; | |
| 425 | Supprimée | height: 18px; | |
| 424 | Ajoutée | width: 24px; | |
| 425 | Ajoutée | 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 | Supprimée | width: 18px; | |
| 493 | Supprimée | height: 18px; | |
| 492 | Ajoutée | width: 24px; | |
| 493 | Ajoutée | height: 24px; | |
| 494 | 494 | padding: 0; | |
| 495 | 495 | border: 1px solid #b9b3aa; | |
| 496 | 496 | border-radius: 2px; |
Magento : recette target-size-padding
Afficher l’avant et l’après (1)
app/design/frontend/Validiscan/fixture/web/css/source/_theme.less Modifications apportées à app/design/frontend/Validiscan/fixture/web/css/source/_theme.less (lignes ajoutées : 9, lignes supprimées : 0)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 1264 | 1264 | height: 18px; | |
| 1265 | 1265 | stroke-width: 3; | |
| 1266 | 1266 | } | |
| 1267 | Ajoutée | ||
| 1268 | Ajoutée | /* validiscan:target-size-padding */ | |
| 1269 | Ajoutée | .social-link, | |
| 1270 | Ajoutée | .actions-secondary .action, | |
| 1271 | Ajoutée | .qty-step { | |
| 1272 | Ajoutée | min-width: 24px; | |
| 1273 | Ajoutée | min-height: 24px; | |
| 1274 | Ajoutée | } | |
| 1275 | Ajoutée | /* /validiscan:target-size-padding */ |
app/design/frontend/Validiscan/fixture/web/css/styles-m.css Modifications apportées à app/design/frontend/Validiscan/fixture/web/css/styles-m.css (lignes ajoutées : 9, lignes supprimées : 0)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 1232 | 1232 | height: 18px; | |
| 1233 | 1233 | stroke-width: 3; | |
| 1234 | 1234 | } | |
| 1235 | Ajoutée | ||
| 1236 | Ajoutée | /* validiscan:target-size-padding */ | |
| 1237 | Ajoutée | .social-link, | |
| 1238 | Ajoutée | .actions-secondary .action, | |
| 1239 | Ajoutée | .qty-step { | |
| 1240 | Ajoutée | min-width: 24px; | |
| 1241 | Ajoutée | min-height: 24px; | |
| 1242 | Ajoutée | } | |
| 1243 | Ajoutée | /* /validiscan:target-size-padding */ |
Commencez par une vérification gratuite de votre boutique.
Envoyez l’adresse de votre boutique. Validiscan la scanne et vous envoie chaque échec que le scan peut prouver, avec sa page et son code.
Demander une vérification gratuiteOu écrivez à info@validiscan.com.
Ce que couvre la vérification gratuite, et ce qu’elle laisse de côté- Vous envoyez
- l’adresse de votre boutique
- Pages scannées
- jusqu’à 15
- Vous recevez
- chaque échec que le scan peut prouver, avec la page et le code
- Sur votre boutique
- pages publiques uniquement ; aucune connexion, aucun achat, aucun formulaire envoyé
- Ce qu’elle n’est pas
- un audit complet