Comment concevoir des produits avec les normes d’accessibilité (WCAG)

Aujourd’hui, la conception accessible est devenue de plus en plus importante car elle fournit non seulement une navigation et un contrôle structurés, mais également une excellente expérience utilisateur globale.

Bien que cela ne soit pas limité aux personnes ayant des problèmes physiques et mentaux, mais à la majorité des utilisateurs. Un excellent design accessible offre une meilleure expérience non seulement pour les personnes handicapées, mais aussi pour les personnes sans handicap.

Pourquoi le design accessible est-il si important aujourd’hui ?

1) Aujourd’hui, une grande partie de la population mondiale utilise Internet, que ce soit pour rechercher des actualités, payer des factures, réserver ou regarder une vidéo. Par conséquent, l’accessibilité est devenue une nécessité pour répondre à tous les types de public présents sur la plate-forme.

2) En tant que concepteurs UX, il est également de notre devoir de sympathiser avec différents types d’utilisateurs et de les aider à accéder et à expérimenter le produit sans aucun défi.

3) La bonne accessibilité ou WCAG est officialisée par la loi 508 en tant que norme d’accessibilité. La plupart d’entre nous connaissent l’affaire des pizzas dominos, où un homme aveugle a poursuivi des dominos en affirmant que le site Web de l’entreprise n’était pas accessible et qu’il avait rencontré de nombreux problèmes pour commander des pizzas.

Comprendre les WCAG

WCAG 2.1 est la version mise à jour de WCAG 2.0, il comprend 17 nouvelles normes qui s’adressent aux personnes ayant d’autres handicaps, 2.1 s’adressent non seulement aux utilisateurs Web mais également aux utilisateurs mobiles.

Les directives WCAG sont classées en 3 niveaux de conformité différents. Il faut atteindre ces niveaux s’ils veulent rendre leur site Web vraiment accessible.

• Niveau A — Le niveau de conformité le plus bas et le plus facile à obtenir. Le niveau A définit un niveau d’accessibilité minimum dont disposent la plupart des sites Web.
• Niveau AA — Il s’agit du niveau de conformité recommandé pour toutes les informations basées sur le Web.
• Niveau AAA — Le niveau de conformité le plus élevé et le plus difficile à obtenir. Il est toujours recommandé de s’efforcer d’atteindre une conformité AAA complète car il n’est pas possible de satisfaire à tous les critères de réussite de niveau AAA pour certains contenus.

Les WCAG classent en outre les directives comme suit : –

Perceptible: Votre produit doit être perceptible, cela signifie que tous les utilisateurs doivent pouvoir facilement comprendre votre contenu. S’il y a un fichier audio ou vidéo dans votre produit, il doit avoir des légendes/sous-titres. Si le contenu est basé sur du texte, la fonction de synthèse vocale doit être activée pour votre site Web.

Opérable: Votre produit doit être facile à utiliser. Les utilisateurs handicapés ont du mal à utiliser les commandes de la souris. L’ensemble de votre site Web doit être accessible via le clavier, les actions Continuer et Retour également, Évitez d’utiliser des informations basées sur le temps comme (formulaires de saisie) car cela augmentera la charge cognitive de vos utilisateurs.

Compréhensible: L’utilisateur doit toujours être informé des actions/fonctions des boutons, les champs de saisie doivent avoir un texte d’indication détaillé. Les icônes doivent être utilisées pour une explication facile (évitez d’utiliser des icônes complexes) REMARQUE : l’affichage des fils d’Ariane sur chaque écran donne la tranquillité d’esprit aux utilisateurs.

Robuste: Les utilisateurs doivent pouvoir accéder à votre site Web à partir de n’importe quelle plate-forme et il doit avoir des directives similaires pour chacun. Le code doit être propre. Le concepteur et le développeur doivent souvent collaborer pour vérifier si tout est conforme aux normes WCAG.

Comment utiliser WCAG dans vos conceptions avec des exemples

Il existe maintenant de nombreuses directives et méthodes pour utiliser correctement les WCAG dans votre conception, mais pour les besoins de cet article, nous allons vérifier uniquement quelques exemples qui sont les plus utilisés.

1. Conception à contraste élevé

Assurez-vous toujours que vos conceptions ont suffisamment de contraste, WCAG suggère d’utiliser du noir sur fond blanc car il a le contraste maximum, mais même si vous utilisez d’autres couleurs, assurez-vous qu’il est suffisamment contrasté.

2. Zoom réactif

WCAG suggère qu’un site Web devrait avoir un zoom de 400 %. Une fois zoomé, le contenu doit être présenté dans une seule colonne, ce qui évite un long défilement inutile. Les développeurs doivent tester cette fonctionnalité sur une taille de téléphone idéale de 320 pixels de large.

3. Données visuelles

Les WCAG suggèrent que toutes les données visuelles soient présentées à l’aide d’une numérotation, car une personne daltonienne aura du mal à les analyser. Les données doivent également avoir une fonctionnalité de lecture de texte. (Des outils comme JAWS et NVDA peuvent être utilisés pour ajouter de telles fonctionnalités)

4. Taille de la police

Évitez d’utiliser 12px lors de la conception pour l’accessibilité, utilisez au moins une taille de police de 14px ou 14px gras comme police de base.

.

5. Repères visuels

Des repères visuels et des textes d’indication doivent être présents pour les utilisateurs afin de faciliter la compréhension de tout type d’information.

6. Raccourci clavier

Des raccourcis clavier d’action rapide peuvent être ajoutés à un site Web pour l’accessibilité des utilisateurs. Cela réduit non seulement le nombre de clics, mais rend l’exécution d’une action beaucoup plus rapide et accessible.

7. Augmentez la taille de la police

Un sélecteur de taille de police par défaut devrait être disponible sur le site Web pour faciliter l’accès des utilisateurs. En règle générale, 3 tailles de police différentes peuvent être utilisées, mais d’autres peuvent également être ajoutées.

8. Non, tronquer le texte

Tout type de texte, qu’il s’agisse de paragraphes ou de textes d’astuce, doit être complètement et clairement visible pour les utilisateurs. Les utilisateurs n’ont pas besoin d’effectuer d’action supplémentaire comme cliquer sur le paragraphe ou (en savoir plus) qui est généralement utilisé pour afficher le texte tronqué.

9. Aucune contrainte de temps

Lors de la conception pour WCAG, il est nécessaire d’éviter toute action qui a des contraintes de temps comme effectuer un paiement ou remplir un formulaire, cela peut augmenter la charge cognitive de l’utilisateur et peut le rendre stressé. Noter – S’il est nécessaire d’avoir des contraintes de temps pour une action particulière. L’utilisateur doit être averti avant l’expiration du délai et disposer d’au moins quelques secondes pour prolonger le délai avec une action simple (par exemple, « appuyez sur la barre d’espace »), et l’utilisateur est autorisé à prolonger le délai d’au moins dix fois.

Organiser des ressources utiles pour comprendre en profondeur les principes des WCAG et comment les appliquer

Site Web officiel des WCAG

W3C est l’organisation internationale de normalisation pour le World Wide Web. Répertorier toutes les étapes et en profondeur derrière le processus de WCAG et sa mise en œuvre.

https://www.w3.org/

Meilleurs exemples réels de sites Web WCAG

Vous trouverez ci-dessous la liste des sites Web hautement acclamés pour les normes WCAG. Cela vous aidera à comprendre à quoi ressemble un site Web standard WCAG réel. Tous ces sites Web sont marqués pour les normes AAA.

https://www.visionaustralia.org/
https://www.parrapark.com.au/
https://www.deque.com

Doit lire les articles WCAG

https://medium.com/c2-group/wcag-2-1-guidelines-explained-with-examples-5c7c5d8b69eb

https://www.thinkbean.com/drupal-development-blog/website-accessibility-design-vs-aa-vs-aaa

https://www.microsoft.com/en-gb/trust-center/compliance/accessibility

https://www.niaaa.nih.gov/

Mes meilleurs plugins Figma pour vérifier le score de compatibilité WCAG

1. STARK pour Figma
2. A11y de Microsoft (hautement recommandé)
3. Vérificateur de contraste
4. Contraste avancé
5. Accessibility Insights pour le Web (plugin Web de Microsoft)
   https://microsoftedge.microsoft.com/addons/detail/accessibility-insights-fo/ghbhpcookfemncgoinjblecnilppimih

Conclusion 📋

La prochaine fois que vous concevez un site Web ou une application, gardez toujours l’accessibilité à l’esprit. En tant que designer, nous devons apprendre à construire nos expériences produit pour tout le monde. 🙂

Merci d’avoir lu jusqu’au bout. J’espère que vous avez trouvé cela utile. 🤝

Références

Source clé – https://bit.ly/2QL5iBV
Source clé – https://bit.ly/3bXbu6z
Source clé – https://bit.ly/3pud02V

TROUVÉ CELA UTILE ? PARTAGEZ-LE