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

Clauses de la norme EN 301 549

La clause de la norme EN 301 549 pour chaque critère, selon la version de la norme
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)
Avant et après Données d’exemple

assets/base.css.liquid Modifications apportées à assets/base.css.liquid (lignes ajoutées : 10, lignes supprimées : 0)

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)
gives the header icons, steppers and swatches a 24px minimum; no page reports small targets Données d’exemple

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)

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)
raises the social icons, quantity steppers and swatches of the fixture theme to 24 × 24 px Données d’exemple

assets/css/main.css Modifications apportées à assets/css/main.css (lignes ajoutées : 4, lignes supprimées : 2)

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)

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)
sizes the three flagged controls and validates Données d’exemple

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)

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)

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 gratuite

Ou é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

Écrire à Validiscan

Pour une vérification gratuite, indiquez l’adresse de votre boutique et sa plateforme.

Validiscan utilise ce que vous envoyez pour vous répondre. Politique de confidentialité