L’accessibilité des sites web permet aux visiteurs d’accéder aux contenus et aux fonctionnalités à l’aide de différents outils. Ce guide vous aide à adapter à votre site d’entreprise les vérifications de la navigation au clavier, du contraste, des textes alternatifs, des formulaires et de la lisibilité, sur la base des WCAG.
Un visiteur peut ne pas parvenir à accéder au menu avec son clavier. Il peut ne pas entendre le nom d’un champ de formulaire. Un contraste insuffisant peut l’empêcher de distinguer un prix. Ces obstacles conduisent des clients potentiels à abandonner leur demande de devis, leur prise de rendez-vous ou leur achat.
L’accessibilité web permet à des personnes aux capacités et aux conditions d’utilisation variées d’effectuer des actions sur votre site. Elle ne concerne pas uniquement les visiteurs utilisant un lecteur d’écran. Une blessure temporaire, un soleil intense, un petit écran ou une connexion lente influencent également l’expérience d’accès.
Quels sont les avantages de l’accessibilité web pour votre entreprise ?
Les WCAG, ou Règles pour l’accessibilité des contenus web, constituent un cadre international. Les WCAG 2.2 offrent des points de contrôle communs aux designers, aux équipes éditoriales et aux développeurs. La plupart des sites d’entreprise prennent le niveau AA comme premier objectif de référence.
- Perception : Le visiteur doit pouvoir comprendre les textes, les images et les médias par différents sens.
- Utilisation : Le visiteur doit pouvoir accomplir chaque tâche avec une souris, un clavier ou une technologie d’assistance.
- Compréhension : Les titres, les instructions et les messages d’erreur doivent indiquer clairement la marche à suivre.
- Compatibilité technologique : Le code doit fonctionner de manière cohérente avec les navigateurs et les technologies d’assistance.
Ces principes concernent davantage les composants que les pages prises individuellement. Examinez d’abord les éléments récurrents, tels que les menus, les fenêtres contextuelles, la recherche, les filtres et les formulaires. Évaluez séparément les exigences juridiques en fonction de vos contrats et de votre secteur d’activité.
Le niveau AA ne constitue pas, à lui seul, une preuve suffisante pour une déclaration d’accessibilité. Conservez les comptes rendus de tests par page et par composant. Intégrez chaque nouvelle fonctionnalité au périmètre de ces comptes rendus.
Définissez le périmètre de l’audit à partir du parcours des visiteurs
Ne commencez pas par vérifier toutes les pages. Sélectionnez des parcours représentatifs à partir de l’objectif que le visiteur souhaite atteindre. Pour une entreprise de services, le formulaire de devis, le lien téléphonique et l’étape de prise de rendez-vous sont importants. Pour un site de vente, la recherche de produits, le filtrage, le panier et le paiement sont prioritaires.
Par exemple, dans un parcours de demande de devis, le visiteur ouvre la page du service, examine l’offre et envoie le formulaire. Les titres, les liens, les champs de sélection et les messages d’erreur doivent fonctionner ensemble tout au long de ce parcours. Vérifier uniquement le formulaire ne suffit pas.
Pour chaque parcours, notez les points de départ, de décision et de finalisation. Regroupez les pages utilisant le même modèle. Vous pourrez ainsi voir l’impact d’une erreur dans un composant sur l’ensemble du site.
Ne limitez pas votre examen à la page d’accueil. Les résultats de recherche, le panier vide et les pages d’erreur peuvent également interrompre le parcours. Testez les préférences de cookies dans un scénario distinct.
- L’adresse de la page et le nom du composant.
- L’action que le visiteur souhaite accomplir.
- L’appareil ou la technologie d’assistance avec lequel l’obstacle apparaît.
- Le critère WCAG concerné et la priorité de correction.
- La personne responsable, le critère d’acceptation et la date cible.
Pour les nouveaux projets, intégrez ces éléments au brief de conception web . Les équipes de conception et de développement avanceront ainsi avec les mêmes critères d’acceptation.
Effectuez toutes les actions au clavier
Les personnes qui n’utilisent pas de souris parcourent toute la page au clavier. Le test au clavier est l’étape de vérification manuelle la plus rapide d’un audit d’accessibilité. Actualisez la page et accomplissez l’action visée uniquement avec les touches Tab, Maj+Tab, Entrée, Espace et Échap.
C’est à cette étape que les composants personnalisés présentent le plus d’erreurs. Tout élément ayant visuellement l’apparence d’un bouton doit permettre la même action au clavier. Le focus clavier ne doit pas se déplacer vers un élément invisible ou fermé.
Rendez le parcours du focus visible
Chaque élément pouvant recevoir le focus doit disposer d’un indicateur de focus clairement visible. L’ordre du focus doit correspondre à l’ordre de lecture à l’écran. Le bandeau de cookies ou une fenêtre de discussion fixe ne doit pas masquer le contour de focus.
- Choisissez une couleur de focus qui se distingue de l’arrière-plan.
- Comparez l’ordre du focus à l’ordre visuel.
- Vérifiez que le focus ne se déplace pas vers des éléments invisibles au chargement de la page.
Préservez le retour du focus dans les composants contextuels
Les menus déroulants, les onglets et les fenêtres modales, c’est-à-dire les boîtes de dialogue qui apparaissent à l’écran, nécessitent des tests spécifiques. Les touches Entrée et Espace doivent activer les boutons. Échap doit fermer la couche contextuelle. Lorsqu’une fenêtre modale est ouverte, le focus doit rester à l’intérieur. À sa fermeture, le focus doit revenir au bouton qui l’a ouverte.
Ajoutez un lien d’accès direct au contenu principal comme premier arrêt du parcours au clavier. Ce lien doit devenir visible lorsqu’il reçoit le focus. Pour les éléments déclenchant une action au clic, utilisez l’élément button, c’est-à-dire un bouton. Ne vous contentez pas d’ajouter un événement de clic à un élément div, c’est-à-dire un conteneur générique.
Vérification du contraste des couleurs et de la lisibilité
La couleur ne doit pas être le seul indicateur porteur de sens. Ne signalez pas un champ erroné uniquement par une bordure rouge. Ajoutez également un message d’erreur, une icône ou un libellé de champ. Appliquez la même approche aux informations de stock, de remise et de champs obligatoires.
Mesurez les rapports de contraste par composant
Pour le niveau AA, visez un rapport de contraste d’au moins 4,5:1 pour le texte courant. Pour les textes de grande taille, visez un rapport d’au moins 3:1. Vérifiez également le rapport de 3:1 pour les contours des boutons, les bordures des champs de formulaire et les icônes graphiques.
Vérifiez séparément le contraste dans le logiciel de conception et sur la page en fonctionnement. Les couches transparentes, les images d’arrière-plan et les options de mode sombre modifient le rendu final. Ne vous fiez pas uniquement au code couleur du fichier de conception.
Augmentez le zoom du navigateur à 200 %. Vérifiez que les textes ne se chevauchent pas et que le défilement horizontal ne devient pas indispensable. Pour les liens intégrés au texte, ne vous appuyez pas uniquement sur une différence de couleur. Ajoutez un soulignement ou un autre repère visuel.
Structurez le texte à l’aide de titres. Rédigez des paragraphes courts. Permettez un interligne d’au moins 1,5 fois la taille du texte. N’enfermez pas le texte dans des blocs à hauteur fixe.
Transmettez la fonction des images à l’aide de textes alternatifs
Le lecteur d’écran transmet la fonction ou les informations d’une image à partir de son texte alternatif. Celui-ci ne décrit pas chaque pixel de l’image. Il transmet les informations que le visiteur doit comprendre grâce à cette image.
Adaptez votre choix au type d’image
- Image informative : Décrivez brièvement le sujet et le contexte.
- Icône fonctionnelle : Nommez l’action déclenchée par l’icône.
- Image décorative : Utilisez un texte alternatif vide. Le lecteur d’écran ne lira pas d’informations superflues.
- Graphique ou schéma : Expliquez le résultat principal dans le texte. Si nécessaire, présentez les données sous forme de liste.
Si une image contient du texte, présentez également ce texte dans la page. Ne remplacez pas le texte alternatif par le nom du fichier ou une suite de mots-clés. Pour les images informatives, ne laissez pas le champ de texte alternatif vide dans l’interface de téléversement.
Permettez au rédacteur de contenu de choisir la fonction de l’image. Le système doit conserver un texte alternatif vide lorsque l’option d’image décorative est sélectionnée. Pour une image de produit, indiquez des informations distinctives telles que la couleur, le modèle ou le contenu du lot. Ne répétez pas les mêmes informations pour chaque image.
Testez les libellés des formulaires et la gestion des erreurs
Les formulaires de contact, de devis et de paiement influencent directement les résultats commerciaux. Chaque champ de saisie doit avoir un libellé clair. Un texte indicatif ne remplace pas, à lui seul, un libellé. Il disparaît lorsque l’utilisateur commence à saisir du texte.
Nommez les champs clairement
- Associez les champs tels que le nom, l’e-mail et le téléphone à un élément label, c’est-à-dire un libellé de champ.
- Regroupez les boutons radio et les cases à cocher dans un élément fieldset, c’est-à-dire un groupe de champs.
- Décrivez le groupe d’options à l’aide d’un élément legend, c’est-à-dire un titre de groupe.
- Indiquez par un texte, en plus de l’astérisque, qu’un champ est obligatoire.
- Définissez l’attribut de remplissage automatique pour les champs de nom, d’adresse et de téléphone.
Accompagnez le message d’erreur d’une solution
Lorsque l’utilisateur envoie le formulaire, indiquez clairement le champ qui pose problème. N’utilisez pas uniquement la couleur rouge ou une icône de point d’exclamation. Affichez un récapitulatif des erreurs au-dessus du formulaire et déplacez le focus vers celui-ci. Conservez les informations saisies, à l’exception du mot de passe.
Les liens vers le texte relatif à la KVKK, les informations précontractuelles et le contrat doivent également pouvoir être ouverts au clavier. Le libellé du lien doit préciser le document qu’il ouvre.
Pour les parcours comprenant des étapes d’adresse, de livraison et de carte bancaire sur les sites e-commerce , examinez également les limites de temps. Le visiteur doit pouvoir demander un délai supplémentaire ou être averti de la limite de temps avant de commencer.
Liste de vérification de l’accessibilité web avant publication
Les outils d’analyse automatique détectent certains problèmes de code. Toutefois, ils ne peuvent pas évaluer seuls l’ordre du focus ou le contexte d’un texte. Pour chaque version, combinez l’analyse automatique avec une vérification manuelle et des scénarios de tâches réelles.
- Vérifiez la langue de la page, la hiérarchie des titres et l’accès direct au contenu principal.
- Rédigez le libellé de chaque lien de manière à rendre sa fonction compréhensible, même indépendamment du texte qui l’entoure.
- Testez l’ordre de tabulation, la visibilité du focus et le comportement de la touche Échap.
- Mesurez les rapports de contraste des textes, des composants et des couleurs utilisées pour leurs différents états.
- Examinez les textes alternatifs des images.
- Examinez les sous-titres des vidéos et les transcriptions des contenus audio.
- Envoyez le formulaire avec des informations incorrectes, puis correctes. Écoutez les messages d’erreur et de confirmation à l’aide d’un lecteur d’écran.
- Testez le parcours principal sur un écran mobile, avec un zoom élevé et avec au moins un lecteur d’écran.
Pour chaque problème détecté, désignez une personne responsable, une priorité et une date de correction. Traitez en premier les problèmes bloquants, notamment ceux qui touchent le menu principal ou le paiement. Intégrez les règles relatives aux textes alternatifs et aux titres dans le guide de publication destiné aux équipes qui ajoutent du contenu.
Intégrez les vérifications à votre processus de travail
N’attendez pas le jour de la publication pour traiter l’accessibilité. Validez les exemples de couleurs et d’états dans le fichier de conception. Pendant le développement, examinez le HTML sémantique, c’est-à-dire le balisage porteur de sens, ainsi que le comportement au clavier. Après la mise en ligne, consignez régulièrement les retours des utilisateurs.
Cette approche permet, dans les projets de conception de sites web d’entreprise , d’aligner les décisions éditoriales, graphiques et techniques sur un même objectif.
Questions fréquentes
Que sont les WCAG ?
Les WCAG proposent des critères d’accès aux contenus web. Pour les nouveaux projets, consignez les critères WCAG 2.2 et l’objectif de niveau AA dès le démarrage. L’équipe doit intégrer cet objectif aux tests de conception, de développement et de publication.
Le niveau WCAG AA est-il suffisant pour un site d’entreprise ?
Le niveau AA constitue un point de départ pratique pour la plupart des sites d’entreprise. Toutefois, les organismes publics, les services financiers et les projets soumis à des obligations contractuelles peuvent imposer des exigences supplémentaires. Examinez la réglementation applicable et les conditions contractuelles avec votre équipe juridique.
Une analyse automatique de l’accessibilité suffit-elle ?
Non. Les outils peuvent détecter les libellés manquants et certains problèmes de contraste. Effectuez des tests manuels pour vérifier l’ordre de navigation au clavier, la qualité des descriptions et la gestion des erreurs. Un scénario de tâche réelle révèle des problèmes que les outils ne peuvent pas détecter.
Puis-je rendre mon site actuel accessible sans le reconcevoir entièrement ?
Identifiez d’abord les modèles de pages les plus utilisés et les parcours de conversion. En corrigeant les composants communs, votre équipe peut améliorer de nombreuses pages simultanément. Traitez ensuite progressivement les contenus et les médias.
Conclusion et prochaine étape
Pour un nouveau site ou un projet de refonte, intégrez dès le départ les décisions d’accessibilité au plan de conception et de développement. Présentez-nous votre parcours de navigation via le formulaire de demande de devis; précisons ensemble vos objectifs, vos priorités et le périmètre technique.
