<aside> ⬅️ ÉTAPE 1 - Observation & Analyse
</aside>
<aside> ➡️ ÉTAPE 3 - Présentation
</aside>
Maintenant, on va reprendre chaque point mentionné et on va procéder ensemble pour proposer des améliorations.
→ À toi de jouer pour apporter tes propres propositions aussi !
Si tu as eu un résultat qui ne respecte pas au moins le niveau AA* et le ratio 4.5:1, cela veut dire qu’il faut proposer une nuance qui respecte l’accessibilité. Par exemple, personnellement j’ai procédé en passant par un outil colorsafe.co lequel il m’a proposé différentes nuances d’orange. Ensuite, j’ai préféré de passer par l’outil whocanuse.com pour trouver manuellement le ratio minimum qui respecte l’accessibilité. Si par exemple, tu as une obligation de garder la charte (orange) parce que le client pense que cela rappel le code BTP, il serait préférable de changer son usage. J’aurai proposé, d’utiliser la couleur orange moins pour les textes et utiliser pour une touche sur les illustrations.
*Les AA ?
Un seul A :
le niveau minimum d'exigence auquel tous les sites Web doivent adhérer.
Double A :
le niveau d'accessibilité acceptable pour de nombreux services en ligne (au moins 4.5:1).
Triple A :
le niveau d'accessibilité de référence, qui fournit tout pour une offre accessible complète (au moins 7:1).
Récemment, j’ai vu qu’ils vont enlever “un seul A” car ils pensent qu’il faut minimum respecter le double A.
Il faut tout d’abord vérifier si dans le design système* du produit, les structures hiérarchiques sont bien défini et mise en place. Ensuite, tu prévois de communiquer avec l’équipe technique pour voir ce que vous pouvez faire pour résoudre le problème, puisque dans le code, la structure doit être appliquée.
*Design système : Pour les designers, le design système est une bibliothèque visuels qui réside les principes de la charte graphique du produit / de la marque. Un kit qui facilite l’échange entre les designers et développeurs.
De ton côté pas grand chose à faire, seulement essayer de voir avec l’équipe technique. Pour optimiser les échanges avec l’équipe technique. Notes quelques sites et montre les comme une exemple. Ceci leur permettra de mieux comprendre ce que tu veux dire.
Si tu te rends compte que techniquement, les champs sont vides car on ne comprend pas où il faut cliquer. Et puis, si le lecteur d’écran lis seulement les liens sans t’expliquer le contenu, donc il y a un problème de structure dans le code. C’est à dire que le lecteur d’écran ne transmet pas les sections comme il faut, par manque d’Aria. Ce qui provoque une manque de contexte pour l’utilisateur en situation handicap. Personnellement, le site Wave m’a aidé pour me rendre compte de ce problème. Dans le champ de Home page, il y a une animation et c’est pour cela, l’input (le champ) ne contient pas une information. En revanche, sur la page formulaire, chaque input est respecté. Dans ce cas, voici la proposition que l’on pourra faire :
Ajouter un titre au dessus du champs pour le champs de home page
Revoir avec l’équipe technique pour mieux contracturer les sections grâce à la présence Aria landmark.
Si tu considères qu’il y a une image importante parce qu’elle véhicule un message complémentaire sur le service et qui a un impact sur l’avis de l’utilisateur, tu expliques au client qu’il faut intégrer le code pour ajouter un texte alternatif <img class="image" src="image.jpg" alt="alternative pertinente">. Cependant, le texte alternatif ne doit pas être seulement des mots clés. Il doit être une phrase courte mais compréhensible. **Par exemple, dans la partie footer, je constate que les icônes des réseaux sociaux ont comme texte alternatif “ootravaux”. Il est donc impossible de discerner uniquement via le texte que ce sont des liens de partage vers les réseaux sociaux. Les éléments n’effectuent pas leur rôle pour orienter et informer l’utilisateur.ice
Si tu remarques qu’il y a des messages importants qui sont transmis uniquement par une couleur, il faut améliorer et intégrer des icônes.. Notamment, penser les champs du formulaire parce que c’est important pour créer une interaction avec l’utilisateur. C’est pour cela, lors d’un error ou un check, absolument faut communiquer par des icônes graphiques.