Comment interpréter les directives wcag2.0 sur le contraste des boutons et des icônes
Les directives d'accessibilité du W3C offrent des directives claires et utilisables pour créer un texte lisible pour tout le monde. Il existe un certain nombre d'outils très utiles pour vérifier les niveaux de contraste, il est donc assez facile d'obtenir au moins les bases jusqu'au niveau AA.
Cependant, les textes ne montrent pas clairement quoi faire avec les boutons, les icônes et les autres commandes visuelles. Ils sont différents du texte, sont utilisés différemment, ce qui m'amène à penser qu'il est possible d'être plus indulgent avec le contraste ici.
Bien sûr, si vous voulez être prudent, vous pouvez également viser un rapport de contraste de 4,5. Cependant, nous essayons généralement de rendre les choses jolies et pas simplement le plus petit dénominateur commun accessible. De plus, avoir un contraste visuel élevé sur tout empêche également la convivialité, en particulier dans les interfaces utilisateur qui sont nécessairement encombrées.
Je regarde habituellement les grands gars pour des conseils. Apple, Facebook, Microsoft, etc. s'assurent généralement qu'ils sont accessibles, et ont par exemple du texte et des liens avec un contraste approprié. Cependant, ces deux plans proviennent d'iOS7:
capture d'écran de la calculatrice ios7
capture d'écran des paramètres ios7
Le contraste orange à blanc dans les boutons n'est pas conforme au niveau AA, pas même pour les gros textes. J'aurais pensé que cela rendrait difficile de distinguer quel signe est sur le bouton pour beaucoup de gens. Il en va de même pour le vert dans le curseur. Cela ne rendrait-il pas difficile l'utilisation de nombreuses personnes? L'option d'augmentation du contraste dans les paramètres iOS ne les affecte pas du tout. Ils offrent une option "étiquettes" pour le curseur marche/arrêt, mais cela n'a pratiquement aucun contraste. La seule façon de "résoudre" ce problème est de passer aux couleurs inversées.
Donc, WCAG étant flou à ce sujet, comment dois-je faire pour définir une référence pour mon équipe de conception pour créer des boutons et des icônes accessibles?
J'ai interprété les directives pour que le texte s'applique sans condition, que le texte apparaisse sur un bouton ou dans une vidéo. Les boutons ne sont différents que d'une zone de texte car ils sont plus susceptibles d'avoir des bordures 3D, des ombres et des arrière-plans dégradés. Cependant, seule la couleur d'arrière-plan s'applique à l'indice de contraste.
Malheureusement, tous les outils d'évaluation du contraste sont extrêmement obsolètes. Ils ne prennent pas en charge les dégradés, les calques transparents ou les arrière-plans d'image.
Post script: Mon expérience avec iOS 7 suggère qu'il n'est pas conforme aux directives d'utilisation ainsi qu'à ses prédécesseurs. Le rejet du skeuomorphisme par la conception plate pourrait avoir supprimé certaines techniques 2D importantes pour déterminer la distance et l'importance visuelle.
Quatre longues années se sont écoulées ... mais c'est toujours une question très pertinente.
Je peux comprendre la confusion dans ce contexte.
Ce que j'ai compris dans mon expérience, c'est que les applications installées dans un système d'exploitation n'ont besoin de produire des résultats appropriés que lorsque l'hôte (le système d'exploitation) est défini sur un mode d'accessibilité. Ainsi, par défaut, tout se passe. Il est présumé qu'une personne ayant des besoins spéciaux activera les paramètres appropriés dans le système d'exploitation, puis toutes les applications effectueront également les ajustements nécessaires.
Cela dit - avec Android sur les téléphones Samsung, en particulier - j'ai conçu différents skins pour les applications plutôt que de laisser le système d'exploitation essayer de deviner ce qui a l'air agréable. Je pense que c'est probablement facultatif, mais je veulent toujours ce contrôle.
Les sites Web n'ont pas encore un tel luxe. Peut-être qu'un jour, chaque navigateur pourra détecter si les paramètres d'accessibilité sont activés dans le système d'exploitation et déclencher un CSS approprié. Mais pour l'instant ... il est essentiel que nous nous assurions que l'interface utilisateur est conforme pour tout le monde.
Notez également qu'il ne s'agit pas seulement de couleur, mais également d'échelle. Les rapports de contraste requis sont réduits à mesure que les choses deviennent plus grandes. Texte, par exemple ... le rapport de contraste pour le texte 14px est supérieur au texte 16px.
J'applique cette même logique aux icônes; traiter une icône 20px de la même manière qu'un texte 20px.
À votre santé.