The Good Manager  >  Modules d'apprentissage

100 points à savoir sur…
Accessibilité numérique

100
points à savoir sur…
Retour au sommaire du module

Notion 63

Notez les exigences techniques requises pour un design accessible.

Compétences ciblées

Tenir compte des spécifications et des exigences que vous devrez respecter avant le processus de conception.

Dès le début de votre projet, établissez une liste de contrôle pour chaque élément de développement. Quelques exemples :

Au niveau du contenu

  • Veillez à ce que les textes soient faciles à lire (peu de niveaux de titres avec une bonne hiérarchie, phrases courtes, listes...).
  • Nommez les liens de manière explicite.
  • Donnez des titres identiques pour les mêmes fonctions.
  • Utilisez un langage simple et évitez les figures de style, les expressions idiomatiques et les métaphores compliquées. Voici un analyseur de lisibilité qui peut vous aider à évaluer votre niveau de langue : https://datayze.com/readability-analyzer.php. Pour un examen plus détaillé des éléments de lisibilité, reportez-vous à la Leçon 5 : Notion 32 de ce module.
  • Utilisez un texte aligné à gauche pour les langues de gauche à droite (LTR), et un texte aligné à droite pour les langues de droite à gauche (RTL). Un texte centré ou justifié est difficile à lire.

En termes de couleurs

Testez les contrastes. Sur une page web, le contraste des couleurs est la différence entre la couleur utilisée pour les informations au premier plan (polices, images d'un texte, liens, infographies, diagrammes, etc.) et la couleur d'arrière-plan. Assurez-vous que les informations restent compréhensibles même sans couleurs... Activez des modes tels que le mode Sombre, le mode Contraste accru, le mode Couleurs inversées, le mode Mouvement réduit et le mode Contraste élevé. Votre contenu est-il toujours lisible ? Vos icônes, bordures, liens, champs de formulaire et autres contenus sont-ils toujours présents ? Pouvez-vous distinguer le contenu de premier plan de l'arrière-plan ?

Voici quelques exemples de bons et mauvais contrastes de couleurs sur un bouton "Menu" :

Transcription
Exemples de bons et de mauvais contrastes de couleurs.
Veillez à appliquer également cette pratique lors de la mise en place le survol d'un bouton.

En ce qui concerne les médias

Assurez-vous que les médias ne font pas de lecture automatique. Les vidéos et les sons inattendus peuvent être distrayants et perturbants, en particulier pour certains types de handicaps cognitifs tels que le TDAH (voir la leçon 5 pour plus d'informations sur les besoins de ce public). Certains types de vidéos et d'animations en lecture automatique peuvent déclencher des troubles vestibulaires et des crises d'épilepsie. Fournissez une fonction de pause globale sur tout élément multimédia
Fournissez des sous-titres pour les vidéos. Les sous-titres permettent à une personne qui ne peut pas entendre le contenu audio d'une vidéo d'en comprendre quand même le contenu. Fournir des transcriptions pour les fichiers audio. Les transcriptions permettent aux personnes qui ne peuvent pas entendre de comprendre le contenu audio. Elles permettent également aux personnes d'assimiler le contenu audio à un rythme qui leur est confortable.

En termes de navigation

Proposez une version responsive de votre site. Facilitez l'accès aux contenus cachés. Proposez plusieurs modes de navigation. Ne pas bloquer l'orientation de l'affichage (pour les personnes qui ne pourraient pas tourner leur appareil).

Au niveau des formulaires

Nommez chaque champ du formulaire (en plus des caractères de substitution). Aidez l'utilisateur à corriger ses erreurs. Lui permettre de vérifier les informations qu'il a saisies. Indiquez clairement les champs obligatoires.

Au niveau des zones tactiles

Prévoyez des zones suffisamment grandes et espacées les unes des autres. Pensez aux personnes qui ont des problèmes de motricité, qui utilisent leur appareil mobile dans un environnement en mouvement (transports publics) ou qui ont une mauvaise vue...

Pour aller plus loin :
https://www.a11yproject.com/posts/large-touch-targets/
https://www.a11yproject.com/posts/design-accessible-animation/
https://www.a11yproject.com/posts/alt-text/
https://www.a11yproject.com/checklist/