Surface minimale des éléments interactifs : à la découverte du nouveau critère WCAG 2.5.8
En matière d’accessibilité numérique, la France dispose de son propre référentiel d’évaluation avec le RGAA (Référentiel Général d’Amélioration de l’Accessibilité). Cependant, il est important de savoir qu’il se base sur les directives internationales : les WCAG (Web Content Accessibility Guidelines), dont le contenu est régulièrement mis à jour.
Aussi, la version 2.2, qui devrait arriver avant la fin de l’année, s’étoffera de 9 nouveaux critères. Parmi eux se trouve le critère 2.5.8 Target Size (Minimum), qui nous intéresse aujourd’hui.
Déjà présente avec le critère 2.5.5 (niveau AAA), la notion de surface minimale des éléments interactifs se verra renforcée par l’ajout du critère 2.5.8 (niveau AA).
Faisons le point.
Les WCAG séparent leurs différents critères en trois niveaux : A, AA et AAA.
Le niveau A représente les critères les plus essentiels et le niveau AAA les points les plus spécifiques.
La plupart des lois et directives internationales imposent de respecter à minima le niveau AA.
L’objectif
Avant d’entamer une étude plus technique de ce nouveau critère, il est important d’en expliquer le but ainsi que la portée.
Ce dernier vise à garantir que les éléments interactifs soient suffisamment grands pour être activés plus facilement.
Il est valable dans le cas de l’utilisation d’un dispositif de pointage, mais également sur mobile, où l’activation d’un élément peut être moins précise, notamment lorsque plusieurs boutons ou liens sont proches les uns des autres.
En effet, pour des personnes ayant des tremblements ou plus largement des troubles de la motricité impactant les membres supérieurs, cibler une zone précise de l’écran peut être une tâche complexe, qui plus est si la zone en question est réduite.
Parmi les dispositifs de pointage, on peut citer la souris ou le trackball, mais aussi des outils comme le joystick ou la licorne (une baguette fixée à un casque et permettant d’appuyer sur les touches d’un clavier ou sur un écran tactile).
Un critère complémentaire
S’il y a bien quelque chose à noter d’entrée de jeu, c’est qu’il ne s’agit pas d’un remplacement du critère 2.5.5, mais bien d’un nouveau critère complémentaire, destiné à assurer une meilleure accessibilité des éléments interactifs pour les personnes utilisant un dispositif de pointage.
Afin de demeurer le plus générique possible, le terme « élément interactif » sera utilisé à plusieurs reprises dans la suite de ce billet.
Cette appellation englobe par exemple les liens, les boutons, les cases à cocher ou les options d’une liste déroulante.
L’attribution de ce critère au niveau de conformité AA permet à ce sujet de ne plus faire partie du cercle fermé des critères AAA, réputés comme étant les plus exigeants.
Le critère 2.5.5 reste donc d’actualité, mais devient la version renforcée du critère 2.5.8, qui représente donc un nouveau minimum requis (comme l’indique la mention « Minimum » de son intitulé).
Voyons maintenant ce qui diffère entre l’ancien et le nouveau critère.
Les différences
La surface des zones interactives
La principale différence entre les critères réside dans la surface minimale attendue pour les éléments interactifs.
Elles sont définies ainsi :
- 24 pixels de haut par 24 pixels de large pour le critère 2.5.8.
- 44 pixels de haut par 44 pixels de large pour le critère 2.5.5.
Les exceptions
Le critère 2.5.8 partage les exceptions d’applications du critère 2.5.5.
Il est donc non-applicable dans les cas suivants :
- S’il existe dans la page un autre élément de taille suffisante (24 par 24 pixels) permettant d’effectuer la même action.
- Si l’élément ciblé se trouve dans une phrase ou si sa taille est contrainte par la hauteur de ligne de son contenu environnant.
- Si l’élément ciblé est contrôlé par l’agent utilisateur (par exemple, le navigateur) et n’est pas modifié.
- Si l’apparence de l’élément ciblé est essentielle à sa compréhension.
Cependant, à cette liste s’ajoute une exception supplémentaire, portant sur l’espacement entre deux zones interactives.
En effet, si un élément interactif n’atteint pas la surface attendue, il reste conforme s’il y a suffisamment d’espace entre ce dernier et les zones interactives adjacentes.
Exemple
Considérons un élément interactif de 20 par 20 pixels (sa surface est donc insuffisante au regard du critère 2.5.8).
Si l’on trace un cercle de 24 pixels de diamètre depuis son centre, aucun autre élément interactif ne doit se trouver entre l’élément et la bordure du cercle. Cela représente un espacement minimum avec un autre élément interactif d’au moins 4 pixels.
Pour mieux comprendre cette notion d’intersection, voici une image de synthèse.
Pour chacun des cas suivants, des boutons ne contenant qu’une icône chacun sont alignés horizontalement.
-
Cas n°1
Les boutons font 24 pixels de haut par 24 pixels de large. C’est conforme. -
Cas n°2
Les boutons font 20 pixels de haut par 20 pixels de large et sont séparés par 4 pixels de marge. Leur surface n’est pas suffisante. Cependant, chaque bouton s’inscrit dans un cercle de 24 pixels de diamètre qui ne s’entrecroise pas avec un autre. C’est donc conforme. -
Cas n°3
Les boutons font 20 pixels de haut par 20 pixels de large, mais sans marge entre eux. Cette fois-ci, les cercles tracés depuis le centre de chaque bouton s’entrecroisent. C’est non conforme.
Conclusion
Voilà qui conclut notre tour d’horizon de ce nouveau critère.
Si son arrivée dans les WCAG est imminente, cela n’empêche cependant pas de s’appuyer dessus pour des recommandations correctives allant au-delà de l’exigence légale de conformité, le temps de son introduction dans le RGAA.
Ressources
Ce tout nouveau critère n’étant pas encore officiel, peu d’articles en français sont disponibles à son sujet.
Voici donc quelques articles en anglais pour approfondir l’ensemble de ce qui a été abordé dans ce billet :
