Design : Est-il possible de «griser» les boutons désactivés? – Hannah Locke

Attends, wut?

Examinons cela de plus près…

1.4.3 Contraste (minimum): la présentation visuelle du texte et des images de texte a un rapport de contraste d’au moins 4,5: 1, sauf pour ce qui suit:

Grand texte: le texte à grande échelle et les images de texte à grande échelle ont un rapport de contraste d’au moins 3: 1;

Accessoire: texte ou images de texte qui sont partie d’un composant d’interface utilisateur inactif, qui sont de la décoration pure, qui ne sont visibles par personne, ou qui font partie d’une image contenant un autre contenu visuel important, n’ont pas d’exigence de contraste.

Logotypes: le texte qui fait partie d’un logo ou d’une marque n’a pas d’exigence de contraste.

Donc, si un bouton désactivé est considéré comme un « composant d’interface utilisateur inactif », ce qu’il fait techniquement, alors nous n’avons pas à le rendre accessible?

Je peux voir comment ils en sont arrivés là – il y a beaucoup de détritus d’interface utilisateur aléatoires, inactifs, de marque ou dirigés de manière créative sur la plupart des interfaces, mais cela ne peut pas inclure .. un bouton que beaucoup d’humains peuvent voir et comprendre, mais certains ne peuvent pas.

D’une part, il s’agit d’un élément d’interface utilisateur qui n’est pas disponible pour tout le monde, mais il est toujours visible pour certains utilisateurs et certainement pas une décoration pure.

Je ne sais pas pour vous, mais pour moi, il me semble que simplement «répondre» aux exigences des WCAG de haut niveau ne suffit pas.

Donc, en supposant que le fait d’avoir un bouton «grisé» réponde aux critères, que pouvons-nous faire d’autre pour aider les utilisateurs en le dépassant?

C’est le temps du chemin du désir.

Voici une liste d’autres choses que nous pouvons faire pour améliorer l’accessibilité de nos boutons désactivés. Je ne dis pas que tout cela fonctionnera, mais ce sont des choses à étudier, à essayer et bien sûr à tester (avec des humains et / ou avec des logiciels).

• Surpasser les autres couleurs pour que votre gris ne soit pas stupidement pâle. Si vous avez déjà un CTA primaire gris foncé (eh bien, cela pourrait arriver) ne faites pas de votre gris désactivé quasi-invisible, changez votre primaire à la place.

• Réduisez l’opacité, pas la saturation de la teinte. Celui-ci est intéressant. Plutôt que de devenir gris, utilisez une version opaque de votre couleur CTA principale. Cela communique ce que ce sera, plutôt que c’est une chose morte qui encombre votre interface utilisateur. Ne fait pas grand-chose pour le contraste des couleurs pures, mais peut-être que cela ne nécessite pas que l’utilisateur apprenne un autre type de style de bouton.
• Placez-le à côté (ou dans le voisinage visuel de) des boutons activés. Pas toujours possible, mais réfléchissez à la façon dont vous allez construire le modèle mental de l’utilisateur dans le cadre de votre stratégie CTA – le bouton désactivé est-il la première fois qu’il voit un bouton dans votre interface utilisateur? Comment pouvez-vous ajouter une friction appropriée à l’expérience afin qu’ils voient d’abord les actifs et ont donc une chance de savoir qu’il s’agit d’une version moins interactive?

• Ajoutez du texte de support. Vous n’êtes pas sûr de celui-ci, mais pourrions-nous utiliser un texte de support près ou en dessous du CTA désactivé qui disparaît une fois la tâche souhaitée accomplie? (texte présenté comme exemple pour mettre l’accent, pas pour recommandation)
• Assurez-vous que les tailles de police ne changent pas. Sur tous les boutons, qu’ils soient activés ou désactivés, ne faites rien de génial à la taille ou à la pondération du texte, comme réduire la police sur les boutons désactivés.
• Prise en charge des lecteurs d’écran. Nous pouvons le faire en utilisant aria-disabled=true plutôt que disabled qui permet à l’utilisateur de savoir qu’il y a effectivement un bouton présent, et aria-live pour éviter la soumission accidentelle d’un formulaire incomplet. Guide brillant sur les deux disponibles ici. Et regardez cette vidéo sur la différence avec l’expérience utilisateur d’utilisation aria-disabled=true sur différents navigateurs et lecteurs d’écran.
• Utilisez « curseur désactivé » sur les bureaux en survol.

L’alternative à tout cela, bien sûr, est simplement d’avoir un seul style CTA principal, mais cela génère des informations supplémentaires sur «l’état d’erreur» à la presse. Cependant, il semble que les boutons désactivés soient si ancrés en tant que modèle de conception que cela semblerait étrange à la fois pour les concepteurs et les utilisateurs. Pour ne pas dire que ce ne sera pas là où nous nous retrouverons.

Eh bien, apparemment, certaines personnes intelligentes y prêtent attention. J’en ai trouvé grandes discussions Git sur cette question, et il semble y avoir un groupe au nom passionnant appelé Silver Task Force (que j’imagine être comme Space Force, mais vous savez – utile).

Il semble qu’ils s’attaqueront à ce problème parmi de nombreux autres problèmes après les WCAG 2.1 et qu’ils reviendront avec des recommandations l’année prochaine.

Cependant, cela représente encore 18 mois de CTA potentiellement inaccessibles jonchent Internet, alors en attendant, essayons de concevoir pour les utilisateurs réels de nos produits en combinant les directives WCAG avec autant de tests et d’apprentissage supplémentaires que possible, et faisons des efforts pour garantir que le plus de personnes possible puissent comprendre et utiliser nos interfaces.