<aside> ⬅️ Comment ça va se passer ?
</aside>
<aside> ➡️ ÉTAPE 2 - Propositions
</aside>
→ Tu vas aller sur le Home page (la page d’accueil) du site ootravaux.fr On va traiter point par point...
Tout d’abord, tu vas sur l’outil whocanuse.com et tu vérifies le contraste d’une couleur, orange sur un fond blanc, (à savoir qu’il faut minimum respecter le ratio 4,5:1). Ensuite, tu regardera la combinaison de deux couleurs (orange x bleu).
✖ Pratique Pour pouvoir accéder au code hexagone (ex ; #00000) des couleurs, tu installes l’extension Google qui s’appelle CSS PEEPER.
Ensuite, tu vérifies la hiérarchie* des titres, H1, H2 etc. Tu regardes si tu comprends bien les sections, s’ils sont bien composés, séparés l’un de l’autre. Pour le moment, tu fais confiance à tes yeux et puis on validera par une étape technique plus tard.
*Pourquoi la hiérarchie est-elle importante ? La hiérarchie typographique (la taille du texte) permet de classer les éléments en ordre dans lequel tu souhaites que les utilisateurs les voient. Son application est nécessaire parce qu’elle met chaque élément à sa place et faire ressortir les éléments les plus importants aux yeux. En design, on la désigne sous forme H1 = titre, H2 = sous titre...etc
Troisièmement, tu vas vérifier si le point d’indication (état de focus) est présent sur le site. Pour expliquer mieux ce que ça veut dire :
Si tu vas sur le site bbc news par exemple et tu appuies sur le tab, tu vas voir que la navigation par clavier détecte les liens qui existent sur le site. De plus, tu vas remarquer un rectangle bleu autour de chaque lien sélectionné. Donc maintenant à toi d’essayer et voir sur le site ootravaux.fr
Tu notes s’il y a une interaction lorsqu’on utilise le clavier pour naviguer le site.
✖ Pratique
Puis, tu actives ton VoiceOver sur mac OS / NVDIA sur Microsoft, afin de vérifier si le lecteur d’écran comprend bien la hiérarchie et si les liens sont lisibles à travers la voix. Tu fais cette démarche avec les yeux fermés. Tu notes quelle partie tu ne comprends pas. Cela va nous confirmer si Aria landmark* existe pour faciliter le lecteur d’écran.
✖ Pratique NVDA - WINDOWS — Appuyez sur commande Contrôle+alt+n VOICEOVER -APPLE — Appuyez sur Commande + F5.
*Aria, qu’est ce que c’est ? Aria est intéressant si on veut composer le contenu du site, c’est à dire séparer les sections (comme avis, comment ça marche, menu navigation, champs..etc) et donner du contexte lors de lecteur d’écran. Techniquement, développé sous main. nav. header.
Avant de finir, tu vérifies si les images ont un alt texte. C’est à dire les images qui véhiculent une certaine type d'information, elles doivent être nommées (comme si tu nommes un dossier sur ton ordinateur), mais ceci se fait par les développeurs. Une technique que j’ai apprise : si tu enlèves une photo et tu vois qu’il n'y a aucun impact / changement de message, ça veut dire que cette image n’apporte pas une information, et sa présence a uniquement pour l’esthétisme.
✖ Pratique : Sache que, tu peux télécharger l’extension Google “web developper”, ensuite cliquer sur image / display alt attributs, tu verras les intitulés des images.
Pour finir, afin de mieux communiquer les messages, il faut utiliser des icônes graphiques et éviter de transmettre un message uniquement par une couleur. C’est important de prendre en compte les différents déficiences visuelles*.
*Les différents déficiences visuelles : Il existe plusieurs handicaps visuel, et chacun a une spécifié pour voir les couleurs ou pas du tout. Ceux qui ne distinguent pas les couleurs verte, rouge et bleue, voir ne perçoivent pas du tout car ils sont atteint par une maladie génétique et qui ne remarquent pas les nuances des couleurs (comme les niveaux de gris).
◉ Tu pourras également, utiliser un outil qui s’appelle wave.webaim.org très pratique ! Établi par WebAIM “le bible de l’accessibilité”. Je l’appelle ainsi parce que sur ce site tu trouveras tous les articles sur l’accessibilité. En somme, cet outil inspecte et identifie les points à résoudre pour rendre le site accessible en quelques minutes. Il suffit que tu vérifies point par point et voir les erreurs.