Le Guide du site vitrine
L’accessibilité numérique consiste à concevoir un site utilisable par des personnes ayant des capacités, des équipements ou des contextes de consultation différents. Cela concerne notamment les visiteurs aveugles ou malvoyants, les personnes sourdes ou malentendantes, les personnes ayant des difficultés motrices ou cognitives, mais aussi toute personne qui consulte une page avec un écran très lumineux, un téléphone ancien, une connexion limitée ou une main momentanément indisponible.
Un site vitrine accessible permet de consulter une présentation, comprendre une offre, remplir un formulaire et trouver un moyen de contact sans dépendre d’un seul mode d’interaction. La question ne se limite donc pas à l’ajout d’un outil d’assistance. Elle concerne la structure des pages, les textes, les images, les boutons, les contrastes, les vidéos et le comportement du site au clavier.
Pour guider les vérifications, les Web Content Accessibility Guidelines, publiées par le W3C, organisent l’accessibilité autour de quatre principes : le contenu doit être perceptible, utilisable, compréhensible et robuste. En pratique, ces principes aident à repérer les obstacles avant la mise en ligne, puis lors de chaque évolution du site.
L’accessibilité apporte aussi une meilleure qualité d’usage générale. Une navigation structurée aide les moteurs et les technologies d’assistance à interpréter les pages. Des libellés explicites réduisent les erreurs dans les formulaires. Des textes lisibles rendent l’information plus claire sur mobile comme sur ordinateur. Ces bénéfices ne remplacent pas l’objectif d’inclusion, mais ils montrent que l’accessibilité relève de la qualité technique globale.
Avant de modifier le code ou de choisir une extension, il est utile de recenser les actions attendues sur un site vitrine. L’audit doit partir de parcours concrets plutôt que d’une liste abstraite de critères. Examinez par exemple l’arrivée sur la page d’accueil, l’accès aux prestations, la consultation des tarifs ou des informations pratiques, puis l’envoi d’une demande de contact.
Cette méthode permet de traiter en premier les défauts qui empêchent une action essentielle. Un bouton de contact inaccessible au clavier doit être corrigé avant une amélioration visuelle secondaire. Conservez un relevé des anomalies avec la page concernée, le mode de test, le résultat attendu et la correction envisagée. Ce document devient un support de suivi lors des mises à jour.
La structure d’une page donne des repères aux visiteurs et aux logiciels qui l’interprètent. Utilisez un seul titre principal pour présenter le sujet de la page, puis des titres de niveau inférieur dans un ordre logique. Un titre ne doit pas être choisi uniquement parce que sa taille ou son apparence convient. Sa fonction est d’annoncer le contenu qui suit.
Les zones principales gagnent à être identifiables : en-tête, navigation, contenu principal et pied de page. Les éléments interactifs doivent utiliser des composants adaptés à leur rôle. Un lien sert à aller vers une autre adresse ou une autre partie de la page. Un bouton déclenche une action, comme ouvrir un panneau ou envoyer des données. Remplacer tous les boutons par des éléments non sémantiques rend l’usage au clavier et l’interprétation par un lecteur d’écran plus incertains.
La hiérarchie doit aussi se retrouver dans le contenu rédactionnel. Évitez de simuler des titres avec du texte en gras ou une suite de retours à la ligne. Organisez les listes avec de véritables listes, les informations comparatives avec un tableau correctement structuré et les citations ou blocs de texte selon leur rôle.
Un contrôle rapide consiste à afficher la page sans styles, lorsque l’environnement de développement le permet, puis à vérifier si l’ordre de lecture reste cohérent. Le contenu principal doit apparaître dans une séquence logique, les liens doivent conserver un intitulé compréhensible et aucun texte important ne doit être transmis uniquement par une image décorative.
De nombreux visiteurs utilisent le clavier, un contacteur ou une technologie qui reproduit les touches. Le parcours doit donc être possible sans souris. Appuyez successivement sur la touche Tab et observez le déplacement du focus. Tous les liens, boutons, champs, cases à cocher et éléments ouvrant une interaction doivent être atteignables.
Le focus doit rester visible. Un contour supprimé par une règle CSS prive le visiteur d’un repère essentiel. Son apparence peut être personnalisée, mais elle doit présenter un contraste suffisant avec l’arrière-plan et rester perceptible sur chaque composant.
Vérifiez également l’ordre de tabulation. Il doit suivre l’ordre visuel et la logique de lecture. Un visiteur ne devrait pas atteindre le pied de page avant le formulaire principal ni ouvrir un élément placé visuellement en haut après plusieurs contrôles situés plus bas.
Les menus déroulants et fenêtres modales demandent une attention particulière. Quand un panneau s’ouvre, le focus doit aller vers son contenu ou vers son titre utile. La touche Échap doit permettre de le fermer lorsque ce comportement est pertinent. À la fermeture, le focus doit revenir au bouton qui a déclenché l’ouverture. Sans cette gestion, le clavier peut se retrouver dans une partie invisible ou éloignée de l’écran.
Testez chaque composant interactif avec cette liste :
Un lien nommé en fonction de sa destination est plus utile qu’un intitulé vague comme en savoir plus. Le visiteur doit pouvoir comprendre l’action ou la destination en lisant le lien, parfois hors du contexte du paragraphe. Préférez une formulation telle que consulter les prestations de maintenance à une succession de liens identiques.
Les images doivent être évaluées selon leur rôle. Une image informative nécessite un texte alternatif qui transmet l’information utile. Une image décorative doit être ignorée par les technologies d’assistance afin de ne pas alourdir la lecture. Le texte alternatif ne doit pas recopier une légende déjà présente ni décrire des détails sans rapport avec l’objectif de l’image.
Un logo qui sert de lien vers l’accueil doit avoir un intitulé indiquant cette destination. Une image contenant une information indispensable ne doit pas être le seul endroit où cette information apparaît. Les visuels utilisés comme boutons doivent aussi conserver un nom accessible et un état compréhensible.
La rédaction participe à l’accessibilité cognitive. Utilisez des phrases organisées, des titres explicites, des listes lorsque plusieurs éléments sont énumérés et un vocabulaire cohérent. Expliquez les termes techniques lors de leur première apparition. Les instructions d’un formulaire doivent indiquer ce qui est attendu avant la saisie, et non seulement après l’apparition d’une erreur.
La couleur ne doit jamais être l’unique moyen de transmettre une information. Un message d’erreur indiqué en rouge doit aussi comporter un texte explicite et être associé au champ concerné. Un lien dans un paragraphe ne devrait pas être reconnaissable uniquement par une variation de couleur. Le soulignement ou un autre indice visuel peut renforcer sa distinction.
Le contraste concerne le texte, les icônes utiles, les contours de champs et les états interactifs. Les seuils de référence varient selon la taille du texte et selon qu’il s’agit d’un contenu courant ou d’un élément graphique. Les critères WCAG publiés par le W3C donnent les niveaux et les exceptions à examiner. Utilisez un analyseur de contraste pour contrôler les combinaisons réellement employées, notamment sur les boutons, les textes placés sur des images et les messages d’état.
La lisibilité dépend aussi de la taille, de l’espacement et de la mise en page. Un site doit rester utilisable lorsque le visiteur agrandit le texte ou la page. Contrôlez l’absence de chevauchement, de texte coupé et de barre de défilement horizontale injustifiée. Les blocs trop denses, les lignes très longues et les animations persistantes peuvent compliquer la lecture.
Avant de publier une nouvelle charte graphique, testez plusieurs situations : écran à faible luminosité, mode sombre lorsque le site le propose, zoom du navigateur et affichage sur un téléphone. Une couleur qui semble distincte dans une maquette peut devenir illisible sur un écran différent.
Sur un site vitrine, le formulaire de contact constitue souvent le parcours le plus important. Chaque champ doit posséder une étiquette persistante, placée de manière à rester associée à sa zone de saisie. Un texte indicatif placé uniquement dans le champ ne remplace pas cette étiquette, car il disparaît pendant la saisie et peut manquer de contraste.
Regroupez les informations qui ont un lien, indiquez les champs obligatoires avant la validation et précisez le format attendu lorsqu’il peut y avoir un doute. Pour un numéro de téléphone ou une date, donnez un exemple compréhensible sans imposer un format inutilement restrictif.
Les erreurs doivent être précises. Un message comme champ invalide n’explique pas la correction à effectuer. Indiquez le problème près du champ, conservez la valeur déjà saisie lorsque cela ne présente pas de risque et rendez le message repérable par un lecteur d’écran. Après une soumission, annoncez clairement si la demande a été transmise ou si une action reste nécessaire.
Vérifiez aussi les protections contre les envois automatisés. Un mécanisme visuel ou chronométré qui bloque les utilisateurs peut rendre le contact impossible. Privilégiez une solution qui prévoit une alternative accessible et informez le visiteur de la raison d’une vérification. Les données demandées doivent rester proportionnées à l’objectif du formulaire, ce qui réduit à la fois la friction et l’exposition de données personnelles.
Une vidéo informative doit proposer des sous-titres synchronisés pour les dialogues et les informations sonores indispensables. Une transcription peut compléter le dispositif en rendant le contenu consultable sous forme de texte. Lorsque la vidéo contient une information visuelle qui n’est pas exprimée à l’oral, une description adaptée peut être nécessaire.
Évitez la lecture automatique du son. Elle peut perturber une personne utilisant un lecteur d’écran, surprendre un visiteur dans un environnement partagé ou rendre la page difficile à contrôler. Les commandes de lecture, de pause et de volume doivent être accessibles au clavier et posséder des intitulés compréhensibles.
Les animations décoratives doivent respecter le choix du visiteur lorsque le système indique une préférence pour la réduction des mouvements. Les carrousels doivent proposer des commandes explicites, ne pas changer de contenu trop rapidement et permettre l’arrêt du défilement automatique. Une information qui apparaît brièvement sans possibilité de pause peut être manquée par des personnes ayant un temps de lecture plus long.
Pour chaque média, posez cette question : l’information est-elle encore compréhensible si le son est coupé, si la vidéo n’est pas regardée ou si l’animation est désactivée ? Si la réponse est négative, ajoutez une alternative textuelle ou un autre moyen d’accès au contenu.
Les outils automatiques sont utiles pour repérer des erreurs répétitives : absence d’étiquette, contraste insuffisant, attribut manquant, identifiant dupliqué ou structure de titres incohérente. Ils ne peuvent toutefois pas juger correctement la pertinence d’un texte alternatif, la logique d’un parcours ou la clarté d’un message d’erreur.
Associez plusieurs méthodes :
Faites varier les modèles de pages. Une page d’accueil correcte ne garantit pas que la page de contact, une fenêtre de consentement ou une galerie le soit aussi. Les composants fournis par un thème ou une extension doivent être testés dans leur configuration réelle, car une personnalisation peut modifier leur comportement.
Après chaque correction, rejouez le parcours complet. Une modification du menu peut résoudre le focus sur ordinateur tout en créant un problème sur mobile. Conservez la date du test, le navigateur utilisé, les anomalies observées et les corrections validées. Cette traçabilité facilite la maintenance sans présenter un audit ponctuel comme une garantie permanente.
L’accessibilité ne se traite pas uniquement à la fin d’un projet. Elle doit être intégrée au cycle de création et de publication. Lors de la conception, prévoyez une structure de contenu, des composants avec des états de focus et d’erreur, ainsi que des règles de rédaction pour les images et les liens. Lors de l’intégration, testez les composants avant de les réutiliser sur plusieurs pages.
Lors de la mise en ligne, vérifiez les parcours prioritaires avec le clavier, le zoom, les contrastes et les formulaires. Lors de la maintenance, ajoutez l’accessibilité à la liste de contrôle de chaque nouvelle page, image, vidéo ou module. Une personne chargée de publier du contenu doit savoir comment renseigner un texte alternatif pertinent, choisir un titre structuré et éviter les documents difficiles à consulter.
| Moment du projet | Contrôles à prévoir | Résultat attendu |
|---|---|---|
| Conception | Parcours, structure, composants et contenus alternatifs | Une interface pensée pour plusieurs modes d’usage |
| Développement | Clavier, focus, rôles, formulaires et messages d’état | Des interactions utilisables et compréhensibles |
| Publication | Pages types, contrastes, zoom, médias et liens | Une version vérifiée avant diffusion |
| Maintenance | Tests après chaque évolution et suivi des anomalies | Une accessibilité préservée dans le temps |
Les obligations applicables dépendent du pays, du statut de l’activité, du public concerné et du service proposé. Pour connaître les règles qui s’appliquent à une situation précise, consultez les textes officiels et les référentiels publiés par les organismes compétents. Une démarche technique sérieuse ne doit pas présenter un site comme conforme sur la base d’un seul score automatique.
Cette liste peut servir de contrôle final sur chaque modèle de page :
Si un point échoue, notez la page, le composant concerné et l’impact sur le parcours. Corrigez d’abord les obstacles qui empêchent de consulter une information ou d’envoyer une demande, puis planifiez les améliorations de confort. Cette priorisation rend le travail mesurable et évite de réduire l’accessibilité à une retouche esthétique.
Oui. Le nombre de pages ne détermine pas la nécessité de rendre les contenus et les parcours utilisables. Un site court peut contenir un formulaire inaccessible, une vidéo sans sous-titres ou un menu impossible à utiliser au clavier. L’audit doit se concentrer sur les actions réellement proposées aux visiteurs.
Non. Les outils automatiques repèrent une partie des défauts techniques, mais ils ne savent pas toujours déterminer si un texte alternatif est pertinent, si un ordre de lecture est logique ou si une consigne est compréhensible. Une vérification humaine reste nécessaire.
Non. Les images et animations peuvent transmettre une information ou soutenir la compréhension. Elles doivent être accompagnées d’alternatives adaptées, contrôlables lorsque nécessaire et conçues sans dépendre exclusivement de la couleur, du mouvement ou du son.
Commencez par les parcours prioritaires au clavier : ouvrir le menu, atteindre les pages importantes, remplir le formulaire et obtenir une confirmation. Ce test révèle rapidement les composants bloquants, avant d’être complété par les contrôles de contraste, de zoom, de structure et de médias.
