10 considérations clés pour concevoir des solutions Web accessibles

, Ottawa Canada

Comme le dicton le dit, un objectif sans plan n’est qu’un souhait. La planification est donc extrêmement importante lors de la conception des solutions d'accessibilité des sites web. Les équipes numériques devraient tenir compte de plusieurs facteurs pour s’assurer que tous les utilisateurs, y compris ceux ayant des capacités variables, peuvent percevoir, comprendre, naviguer et interagir efficacement avec l'application web.
 

  1. Substituts textuels
  • Fournir un texte descriptif alternatif pour les images afin de transmettre leur contenu et leur fonction aux utilisateurs qui ne peuvent pas les voir. Une phrase simple sur ce qu’est l’image présentée peut dramatiquement améliorer l’expérience utilisateur de ceux qui utilisent des technologies d’assistance comme les lecteurs d’écran.
  • Utilisez un balisage approprié pour le contenu non textuel, comme les vidéos et l’audio, pour assurer la compatibilité avec les technologies d’assistance.
  1. HTML sémantique
  • "Utilisez des éléments HTML sémantiques (par exemple, les en-têtes, les listes, les repères) pour transmettre la structure du document et améliorer la navigation pour les utilisateurs de lecteurs d'écran. Lorsqu'une page est clairement étiquetée avec H1, H2, H3, dans l'ordre approprié, vous réduisez les risques de confusion pour les utilisateurs.
  • Évitez de vous fier uniquement à des indices visuels (par exemple, couleur, style de police) pour transmettre le sens ou la fonctionnalité."
  1. Accessibilité du clavier
  • Assurez-vous que tous les éléments et fonctions interactives peuvent être accessibles et utilisés à l’aide d’un clavier seul, sans nécessiter d’interaction avec la souris et veillez à fournir spécifiquement une navigation pour les utilisateurs de clavier.  Par exemple, utilisez sautez la navigation pour permettre aux utilisateurs de technologies d’assistance de sauter la lecture du menu en haut de chaque page (pouvez-vous imaginer la gêne!) 
  • Fournir des indicateurs de focus visibles pour indiquer l’élément actuellement focalisé pour les utilisateurs de clavier.
  1. Contraste des couleurs
  • Maintenez un contraste suffisant des couleurs (au moins 4,5:1) entre le texte et les éléments de fond pour assurer la lisibilité par les utilisateurs ayant une faible vision ou des déficiences de vision des couleurs. Un bon outil (et gratuit) que nous recommandons est le vérificateur de contraste des couleurs de Web Aim - https://webaim.org/resources/contrastchecker/ (en anglais seulement)
  • Ne vous fiez pas uniquement à la couleur pour transmettre des informations ou distinguer des éléments. Par exemple, un champ de formulaire qui devient rouge pour indiquer une erreur signifie que les utilisateurs des lecteurs d'écran ou ceux qui ont des difficultés à voir différentes couleurs n'auront aucune indication sur la nature de l'erreur."
  1. Mises en page flexibles
  • Concevez des mises en page qui s'adaptent à différentes tailles d'écran et appareils, afin d'accommoder les utilisateurs pouvant utiliser une variété d'appareils, y compris des technologies d'assistance.
  • Évitez les mises en page à largeur fixe et assurez-vous que le contenu reste lisible et utilisable à différents niveaux d’agrandissement. La recommandation actuelle est de concevoir des mises en page pouvant être agrandies jusqu'à 200%. Cela permettra aux utilisateurs qui ont besoin de zoomer de voir le contenu sans que la mise en page de la solution web soit considérablement altérée."
  1. Texte des liens descriptifs
  • Utilisez du texte de lien descriptif qui fournit du contexte sur la cible du lien, plutôt que des phrases génériques comme "cliquez ici" ou "lire plus". Cela peut se trouver sur l’application frontale (visiblement à l'écran) ou à travers le code afin que les personnes utilisant des technologies d'assistance obtiennent un contexte plus spécifique sur l'endroit où pointe un lien.
  • Assurez-vous que le but de chaque lien est clair lorsqu'il est lu hors contexte (par exemple, dans une liste de liens)."
  1. Navigation claire
  • Concevez des menus de navigation clairs et cohérents qui sont faciles à comprendre et à naviguer en utilisant des technologies d'assistance. Cela signifie d'utiliser des titres conviviaux et une navigation cohérente. (Ce n'est pas le moment d'utiliser une phraséologie floue dans votre menu. Si vous voulez dire "À propos de nous", ou "Nous contacter" ou "Nos services", alors dites-le !)
  • Fournissez des liens pour sauter la navigation afin de permettre aux utilisateurs de contourner la navigation répétitive et de passer directement aux zones principales de contenu."
  1. Accessibilité des formulaires
  • Assurez-vous que les éléments de formulaire sont correctement étiquetés et associés programmatiquement à leurs étiquettes correspondantes pour aider les utilisateurs de lecteurs d'écran à comprendre ce qu'ils doivent faire.
  • Fournissez des messages d'erreur utiles et des suggestions pour remplir correctement les formulaires. Nous avons tous vu des exemples d'une boîte d'erreur rouge en haut d'un formulaire sans aucune information significative sur le problème... tellement frustrant !"
  1. Accessibilité des vidéos et des audios
  • Fournissez des sous-titres en bas d'écran et/ou des transcriptions pour le contenu vidéo et audio afin de les rendre accessibles aux utilisateurs sourds ou malentendants. Cela leur permettra de lire ce qui est dit dans une vidéo ou un fichier audio.
  • Incluez des contrôles pour ajuster le volume, la vitesse de lecture et d'autres paramètres afin de répondre aux préférences et besoins des différents utilisateurs. Nous avons tous vu une vidéo qui avance trop rapidement... quoi??? Alors, donnez aux utilisateurs les contrôles pour arrêter, revenir en arrière, augmenter le volume, etc."
  1. Expérience utilisateur cohérente
  • Les conceptions web stratégiques savent que créer des éléments d'interface utilisateur, que les utilisateurs comprennent et peuvent facilement naviguer, est la clé ! Maintenez la cohérence dans la conception et la fonctionnalité sur différentes pages du site web pour améliorer la convivialité pour tous les utilisateurs.
  • Testez le site web avec de vrais utilisateurs, y compris des personnes ayant des défis visuels, des défis de mouvement et celles qui utilisent des technologies d'assistance afin que vous puissiez identifier et résoudre tout obstacle d'accessibilité ou problème d'utilisabilité.