Concevoir pour l’accessibilité Web

Fournissez un contraste suffisant entre le premier plan et l’arrière-plan

Le texte au premier plan doit avoir un contraste suffisant par rapport aux couleurs d’arrière-plan. Cela inclut le texte sur des images, sur des dégradés en arrière-plan, sur des boutons, et sur d’autres éléments. Cela ne s’applique pas pour les logos, ou le texte accessoire, tel que du texte qui peut être présent dans une photographie. Les liens ci-dessous fournissent plus d’informations sur le rapport de contraste minimum recommandé par les WCAG, et sur comment vérifier le contraste. Le « rapport de contraste » est une version abrégée du terme plus techniquement correct « rapport de contraste de luminance ».

N’utilisez pas seulement la couleur pour transmettre des informations

Bien que la couleur puisse servir à transmettre une information, elle ne devrait pas être le seul moyen dont cette information est transmise. Lorsque vous utilisez la couleur pour différencier des éléments, fournissez aussi des éléments d’identification supplémentaires qui ne s’appuient pas sur la perception des couleurs. Par exemple, utilisez un astérisque en plus de la couleur pour indiquer les champs de formulaire obligatoires, et utilisez des étiquettes pour distinguer des zones sur les graphiques.

Assurez-vous que les éléments interactifs sont facilement identifiables

Fournissez des styles distinctifs pour les éléments interactifs, tels que les liens et les boutons, pour qu’ils soient faciles à identifier. Par exemple, changez l’apparence des liens lors du survol de la souris, du focus du clavier, et de l’activation via un écran tactile. Assurez-vous que les styles et l’intitulé des éléments interactifs sont cohérents partout sur le site.

Fournissez des options de navigation claires et cohérentes

Veillez à ce que le nom, le style et le positionnement de la navigation dans les pages de votre site Web soient cohérents. Fournissez plusieurs modes de navigation dans le site Web, tels qu’une option de recherche au sein du site ou un plan du site. Aidez les utilisateurs à comprendre où ils se trouvent sur le site ou la page en fournissant des indices d’orientation, comme des fils d’Ariane et des titres clairs.

Assurez-vous que les éléments de formulaire incluent des étiquettes clairement associées

Veillez à ce que tous les champs aient une étiquette descriptive adjacente au champ. Pour les langues qui se lisent de gauche à droite, les étiquettes se situent généralement à gauche ou au-dessus du champ, sauf pour les cases à cocher et les boutons radio où ils sont généralement à droite. Évitez les espaces trop importants entre les étiquettes et les champs.

Fournissez un retour facilement identifiable

Prévoyez un retour pour les interactions, tel que confirmer la soumission d’un formulaire, avertir l’utilisateur en cas de problème, ou informer l’utilisateur des modifications survenues sur une page. Les instructions doivent être faciles à trouver. Un retour important qui nécessite l’action de l’utilisateur doit s’afficher dans un style bien visible.

Utilisez des titres et l’espacement pour regrouper les contenus liés

Utilisez des blancs et la proximité pour faire mieux ressortir les relations entre les différents contenus. Stylisez les titres de manière à regrouper les contenus, mieux les organiser, et permettre de parcourir et de comprendre plus facilement le contenu.

Créez des designs pour différentes tailles de fenêtres d’affichage

Prêtez attention à l’agencement des informations contenues dans les pages dans des fenêtres de tailles différentes, tels que les téléphones mobiles ou les fenêtres de navigateur zoomées. La position et la présentation des éléments principaux, tels que les en-têtes et la navigation, peuvent être modifiés pour mieux utiliser l’espace. Veillez à ce que la taille du texte et la largeur des lignes soient définies de manière à optimiser la lisibilité et la clarté.

Incluez des équivalents aux images et contenus multimédia dans votre design

Prévoyez une zone dans votre design pour les équivalents aux images et contenus multimédia. Par exemple, vous pourriez avoir besoin :

• De liens visibles vers les transcriptions de l’audio ;
• De liens visibles vers les versions des vidéos avec audiodescription ;
• De texte à côté des icônes et des boutons graphiques ;
• De sous-titres et de descriptions pour les tableaux ou les graphiques complexes.

Travaillez avec les auteurs de contenu et les développeurs pour fournir des équivalents aux contenus non textuels.

Fournissez des boutons de commande pour le contenu qui démarre automatiquement

Fournissez des boutons de commande visibles pour permettre aux utilisateurs d’arrêter toute animation ou tout son qui démarre automatiquement. Cela s’applique aux carrousels, aux diaporamas d’images, au son en arrière-plan, et aux vidéos.