Taille de la case à cocher de la zone «cliquable» sur le bureau
Je me demande s'il existe des directives concernant la taille de la zone "cliquable" d'une case à cocher sur le bureau. J'avais une discussion avec notre développeur et quand il teste le produit, il clique parfois les cases à cocher. Je me suis donc demandé s'il existait des directives connues à ce sujet.
Dans l'image ci-dessus, la zone la plus sombre est la zone de clic actuelle. La hauteur de la zone marquée est de 24 pixels. Je n'ai moi-même jamais raté de clic, pas plus que les utilisateurs sur lesquels nous l'avons testé.
Pour les tablettes/mobiles, nous n'utilisons pas les cases à cocher ci-dessus, sur les mobiles/tablettes, elles sont plus grandes et quelque peu différentes, les cases à cocher mobiles/tablettes respectent des directives telles que la taille minimale de la cible tactile.
Si vous avez fait des tests à ce sujet, j'aimerais savoir.
Mise à jour: Merci pour les réponses, grâce à la réponse de Christophe j'ai trouvé que Microsoft suggère un taille de 17px . Cependant, ils n'offrent aucun détail sur la raison pour laquelle, peut-être que quelqu'un a trouvé des recherches pour un critère AA.
la réponse de slugolicious est correcte dans le sens où le critère de succès 2.5.5, introduit dans WCAG 2.1, définit une taille cible minimale de 44 par 44 pixels. Cependant, il faut vraiment jeter un coup d'œil à Comprendre le critère de succès 2.5.5: taille cible , ce qui explique le but de ce critère de succès (soulignement le mien):
L'objectif de ces critères de réussite est de garantir que les tailles cibles sont suffisamment grandes pour que les utilisateurs puissent les activer facilement, même si l'utilisateur accède au contenu sur un petit appareil à écran tactile de poche , a une dextérité limitée ou a du mal à activer de petites cibles pour d'autres raisons. Par exemple, les souris et les dispositifs de pointage similaires peuvent être difficiles à utiliser pour ces utilisateurs, et une cible plus grande les aidera à activer la cible.
Le toucher est particulièrement problématique car il s'agit d'un mécanisme d'entrée avec précision grossière . Les utilisateurs n'ont pas le même niveau de contrôle précis lorsqu'ils utilisent des entrées telles qu'une souris ou un stylet. Un doigt est plus grand qu'un pointeur de souris , et obstrue généralement la vue de l'utilisateur de l'emplacement précis sur l'écran qui est touché/activé. (...)
Une hauteur de 44 pixels est assez grande pour les cases à cocher et les boutons radio sur le Web ou sur le bureau, ce qui est l'une des raisons pour lesquelles SC 2.5.5 est au niveau AAA: c'est un niveau c'est non recommandé pour tous les sites Web :
Il n'est pas recommandé d'exiger la conformité au niveau AAA en tant que politique générale pour des sites entiers car il n'est pas possible de satisfaire à tous les critères de réussite du niveau AAA pour certains contenus.
Cependant, votre question portait sur les tailles cibles des cases à cocher sur le bureau , pas sur le Web ou sur les appareils mobiles. Plusieurs systèmes d'exploitation et développeurs de bibliothèques de widgets ont créé des directives pour les interfaces de bureau, mais je n'ai pu trouver de recommandations pour la taille cible dans aucune de ces directives. Voici quelques exemples.
- Les directives d'interface humaine d'Apple contiennent une page sur cases à cocher qui ne disent rien sur la taille ou la hauteur; la même chose s'applique aux [boutons radio] ( https://developer.Apple.com/design/human-interface-guidelines/macos/buttons/radio-buttons ).
- Les Microsoft Windows Design Guidelines for Desktop Apps contiennent des sections sur cases à cocher et boutons radio . Le sous-chapitre Dimensionnement et espacement recommandés recommande une hauteur de 17 pixels pour les cases à cocher et leurs étiquettes . Le texte ne dit pas s'il s'agit de la hauteur exacte recommandée ou d'une hauteur minimale. (De plus, cela n'est mentionné que dans une image et non dans le texte ou le texte alternatif de l'image. La taille cible n'est pas mentionnée sur la page générale à propos de Contrôles .)
- Les directives relatives à l'interface humaine du système d'exploitation élémentaire contiennent une section sur contrôles de sélection , qui ne mentionne pas la taille cible. Cependant, il a un lien vers l'article façons de rendre les cases à cocher, les boutons radio plus faciles à cliquer , qui recommande de placer les boutons radio et les cases à cocher dans une "zone de boutons". Essentiellement, cela revient à s'assurer que l'étiquette est également cliquable (tout comme les étiquettes HTML correctement connectées) et que l'étiquette et le contrôle ont la même couleur de surbrillance au survol. (Le focus du clavier n'est pas mentionné, malheureusement.)
- Le chapitre sur Menus et barres d'outils dans le Java TM Look and Feel Design Guidelines, Volume 1 ne mentionne pas non plus la taille cible. La section sur Conception pour l'accessibilité mentionne la taille de la police et recommande d'exécuter des études d'utilisabilité qui impliquent également des utilisateurs malvoyants, mais rien n'est dit sur la taille cible. Volume 2 ne couvre pas ce sujet non plus.
- La documentation d'Oracle sur Implémentation Java Swing User Interfaces ne dit rien sur la taille cible non plus. (Les commentaires sur la taille se réfèrent à des composants plus grands.)
Un nouveau critère de succès WCAG 2.1 est " 2.5.5 Target Size ", mais c'est une conformité AAA.
La taille de la cible pour les entrées de pointeur est d'au moins 44 par 44 pixels CSS, sauf lorsque:
Équivalent : la cible est disponible via un lien ou un contrôle équivalent sur la même page d'au moins 44 par 44 pixels CSS;
Inline: La cible est dans une phrase ou un bloc de texte;
Contrôle de l'agent utilisateur: La taille de la cible est déterminée par l'agent utilisateur et n'est pas modifiée par l'auteur;
Essentiel: Une présentation particulière de la cible est essentielle à l'information véhiculée.