Votre site peut sembler impeccable sur votre écran et empêcher un client de vous contacter. À 150 % de zoom, le texte passe derrière une photo. Au clavier, le calendrier reste inaccessible. Une erreur de formulaire efface toutes les réponses. Pour une PME, l’accessibilité commence par une tâche concrète : une personne peut-elle comprendre votre offre, poser sa question et terminer la prochaine étape sans aide extérieure ?
Il ne faut pas forcément changer de style graphique. Il faut un parcours vérifiable dans le site existant. Prenez votre demande ou réservation la plus importante et suivez-la jusqu’à sa confirmation. Quelques belles captures ne démontrent pas que ce chemin fonctionne avec un agrandissement, au clavier ou avec une technologie d’assistance.
Une tâche précise plutôt qu’une impression
Définissez un objectif comme : « Demander un rappel pour une réparation sans connaître le numéro exact du modèle. » Il comprend page d’offre, bouton, formulaire, information sur les données, erreur et confirmation. Examiner seulement l’accueil risque de laisser hors du test le calendrier inaccessible ou le champ modèle devenu obligatoire.
Pour chaque étape, notez l’information nécessaire et l’impasse possible. Un champ annoncé facultatif peut bloquer l’envoi. Une fenêtre de chat peut recouvrir le dernier bouton. Un module de réservation externe peut rendre inutilisable une page pourtant correcte au moment décisif. Les éléments intégrés font partie du parcours client ; leur origine ne justifie pas de les exclure du contrôle.
Le zoom doit permettre au contenu de se réorganiser
Le zoom du navigateur réduit l’espace disponible en pixels CSS. Le texte change de lignes, la navigation peut passer au menu mobile et les colonnes doivent se placer les unes sous les autres. C’est normal. Le problème apparaît quand une hauteur fixe coupe le texte agrandi ou quand une photo en position absolue recouvre la section suivante.
L’explication du W3C sur la redistribution du contenu utilise une largeur de 320 pixels CSS comme référence technique, soit par exemple un zoom de 400 % sur une fenêtre initiale de 1280 pixels. Certains contenus, comme des tableaux complexes, ont des exceptions. Ce repère ne signifie pas qu’une même obligation légale s’applique à toute PME suisse. Il permet néanmoins de contrôler une demande ordinaire de manière concrète.
Commencez à 100, 110, 125, 150 et 200 % dans le navigateur, puis essayez un écran étroit. Repartez du haut de la page à chaque fois. Vérifiez titres, limites des images et passage au bloc suivant. Un tableau large peut avoir sa propre zone de défilement ; cela ne devrait pas provoquer un déplacement horizontal de toute la page.
Aller jusqu’à la confirmation au clavier
Posez la souris. La touche Tab permet de passer entre commandes, avec la touche d’activation adaptée pour liens et boutons. Vous devez toujours voir votre position. Supprimer le contour de focus fait perdre ce repère. L’ordre doit correspondre à l’organisation visible et au travail à effectuer.
Ouvrez menu, sélection de langue, calendrier et dialogue. Vérifiez que vous pouvez entrer dans chacun puis en sortir. Un dialogue fermé ne doit pas conserver des commandes invisibles dans l’ordre de tabulation. Après fermeture, le focus doit revenir à un endroit logique. Une commande accessible uniquement au survol de la souris a besoin d’une autre manière d’être utilisée.
Le formulaire doit expliquer ses questions
Nom, téléphone et demande nécessitent des libellés visibles associés aux champs dans le code. Un texte d’exemple disparaît à la saisie et ne remplace pas un libellé. Expliquez les informations obligatoires avant l’envoi. Si un format particulier est nécessaire, donnez un exemple clair et acceptez les variantes usuelles que votre système peut traiter.
Placez l’erreur près du champ et dites comment la corriger. « Invalide » n’aide guère. « Indiquez un numéro auquel nous pouvons vous joindre » donne une action compréhensible. Conservez les autres réponses correctes. Vérifiez aussi si les technologies d’assistance repèrent l’erreur et la confirmation sans obliger la personne à les découvrir par hasard ailleurs dans la page.
Le contraste dépend de l’état affiché
Contrôlez texte et fond dans les thèmes clair et sombre. Un bouton clair sur une section sombre peut conserver des lettres blanches après changement de thème : le texte devient blanc sur blanc. Examinez également survol, focus, filtres choisis et champs désactivés. L’état réellement affiché compte davantage que la couleur définie dans une maquette.
Mesurez le contraste avec les couleurs de premier plan et d’arrière-plan concernées. Une information doit rester perceptible autrement que par la couleur seule. Un contour rouge ne suffit pas à expliquer une erreur. Un filtre légèrement plus foncé peut sembler inchangé. Un libellé ou un autre indicateur visible aide tous les visiteurs à comprendre ce qui est sélectionné.
Une réception simple pour l’équipe
| Essai | Résultat attendu | Preuve |
|---|---|---|
| Zoom et faible largeur | Texte, image et bloc suivant restent séparés. | Navigateur, largeur, zoom et URL. |
| Clavier seul | La demande atteint la confirmation. | Suite des étapes parcourues. |
| Saisie erronée | Erreur expliquée et autres réponses conservées. | Champ, message et correction. |
| Deux thèmes | Commandes et états restent lisibles. | Mesure du contraste et état visible. |
Ajoutez une vérification avec lecteur d’écran et, si possible, avec des personnes qui utilisent ces outils au quotidien. Les scanners automatiques repèrent certains défauts techniques. Ils ne déterminent pas toujours si un libellé a du sens ou si tout le parcours reste compréhensible. Un scan réussi apporte une preuve sur ses contrôles précis, sans constituer une réception complète.
Priorités et responsabilité
Corrigez d’abord les blocages du parcours principal, puis les détails moins fréquents. Documentez chaque problème avec des étapes reproductibles et le comportement attendu. « Bizarre sur mon portable » est difficile à traiter. « Firefox, zoom 125 %, bouton de rappel recouvert par l’image » décrit une réparation concrète. Après modification, rejouez ce cas et les largeurs voisines.
Les ressources du Bureau fédéral de l’égalité pour les personnes handicapées donnent une orientation complémentaire. Dans votre entreprise, une personne doit cependant porter la réception du parcours réel, même lorsqu’une agence ou un service externe réalise les composants.
Le texte sur les frictions du site aborde les autres obstacles avant une demande. Pour le site web et le branding, apportez votre tâche client principale et un défaut reproductible. Vous pouvez alors convenir d’une amélioration ciblée et vérifier précisément ce qui a changé.
La plateforme influence aussi le travail éditorial durable. Le comparatif WordPress, Webflow et site sur mesure examine modifications réelles, publication multilingue et transmission vérifiable.
FAQ
Un scan automatique prouve-t-il l’accessibilité ?
Il contrôle certains critères techniques. Compréhension et utilisation complète nécessitent aussi des vérifications manuelles et, si possible, l’avis des utilisateurs concernés.
La page doit-elle rester identique avec le zoom ?
Non. Texte et colonnes peuvent se réorganiser. Contenus, commandes et réalisation de la tâche doivent rester accessibles.
Qui vérifie un module de réservation externe ?
L’éditeur fournit les informations techniques. Votre équipe teste aussi le parcours intégré réel et en porte la réception.