Sur le site d’un atelier GPS, un bouton « Demander de l’aide » peut être visible à l’écran et pourtant inutilisable : impossible à atteindre au clavier, ou annoncé comme « bouton sans nom » par un lecteur d’écran. Pour quelqu’un qui souhaite demander une mise à jour de carte ou un diagnostic, la démarche s’arrête là. Un site accessible permet d’obtenir les mêmes informations et d’effectuer les mêmes démarches, quel que soit le mode de lecture, de navigation ou de saisie utilisé.
Commencer par les parcours indispensables
Avant de choisir les couleurs ou la mise en page, listez ce qu’un visiteur vient faire : connaître les services, vérifier les conditions d’intervention, trouver les coordonnées et envoyer une demande. Servez-vous de ces parcours pour tester le site. Une page de présentation impeccable ne rattrape pas un formulaire de contact inutilisable.
Pour un atelier de GPS portables, indiquez notamment les modèles acceptés, les renseignements à préparer avant un rendez-vous et la façon de décrire une panne. Écrivez les limites du service dans la page, plutôt que de les placer uniquement sur une affiche intégrée à une image. Elles resteront ainsi lisibles quand on agrandit le texte ou qu’on utilise un lecteur d’écran.
Une structure qui reste compréhensible sans mise en forme
Chaque page doit avoir un titre visible et descriptif, suivi de sous-titres dans un ordre logique. « Mise à jour de cartes : conditions de prise en charge » est plus parlant que « Nos solutions ». Dans le code, utilisez de vrais éléments de titre, pas de simples lignes en gras : les technologies d’assistance s’en servent pour passer rapidement d’une section à l’autre.
Gardez les mêmes intitulés de menu sur tout le site. « Services », « Tarifs » et « Contact » sont plus faciles à retrouver que des noms qui changent selon la page. Sur une longue fiche consultée depuis un petit écran, des sous-titres précis permettent aussi de revenir directement à une consigne.
Rendre la lecture confortable, même en zoomant
Le texte doit se détacher suffisamment de son fond, y compris pour les horaires et les messages d’erreur. Un gris très clair sur blanc reste difficile à lire, même sur une page soignée. Mesurez le contraste avec un outil adapté plutôt que de vous fier à votre impression : pour le texte courant, le niveau AA des WCAG prévoit généralement un rapport minimal de 4,5:1 ; le seuil diffère pour les grands caractères.
La couleur ne doit jamais porter seule une information. Une bordure rouge autour d’un champ ne précise pas ce qui manque ; ajoutez, par exemple, « Indiquez le modèle du GPS ». Choisissez des caractères lisibles, un interligne confortable et des paragraphes assez courts. Évitez aussi les largeurs figées : au zoom, lire chaque ligne ne devrait pas imposer un défilement horizontal.
Faites l’essai à 200 % de zoom et sur un écran étroit. Les colonnes d’une fiche de service peuvent alors se chevaucher, ou une bannière recouvrir le bouton de contact. Même lorsque la place manque, le contenu principal doit rester accessible.
Permettre une navigation complète au clavier
Posez la souris et parcourez le site avec Tab, puis Maj + Tab pour revenir en arrière. Tous les liens, boutons, champs et commandes importantes doivent être accessibles, avec un repère visuel clair quand ils reçoivent le focus. Supprimer le contour de focus sans le remplacer revient à faire naviguer la personne à l’aveugle. Vérifiez aussi l’ordre de passage : il doit suivre la lecture attendue, du menu au contenu, puis au formulaire.
Le texte d’un lien doit indiquer où il mène. « Consulter les conditions de mise à jour des cartes » reste compréhensible hors contexte, contrairement à « En savoir plus ». Pour une action, comme afficher des coordonnées ou envoyer un formulaire, employez un vrai bouton. Un bloc de texte rendu cliquable risque de mal fonctionner au clavier ou d’être annoncé de façon incohérente par les aides techniques.
Si vous utilisez un menu déroulant ou une fenêtre de prise de rendez-vous, essayez de l’ouvrir, de l’utiliser et de la fermer sans souris. Le focus ne doit pas se perdre. Corrigez avant publication toute animation ou fenêtre qui empêche d’accéder au reste de la page.
Images, vidéos et documents : donner accès à l’information
Une image informative a besoin d’un texte alternatif qui explique ce qu’elle montre d’utile. Pour une photo indiquant où trouver le numéro de modèle, « Étiquette du modèle au dos du GPS, près du port USB » aide davantage que « GPS ». À l’inverse, une image purement décorative peut avoir un texte alternatif vide pour ne pas interrompre la lecture. Ne réservez pas non plus des consignes indispensables à une capture d’écran.
Si une vidéo montre comment préparer un appareil avant l’intervention, sous-titrez les paroles et les sons nécessaires à la compréhension. Une transcription ou des consignes écrites permettent de retrouver une étape sans revoir toute la vidéo. Quant aux conditions de service en PDF, proposez un document structuré et lisible ; quand c’est possible, une page HTML bien organisée sera souvent plus pratique sur téléphone.
Soigner les formulaires de contact
Chaque champ doit porter une étiquette visible et liée au champ dans le code. « Modèle du GPS » doit rester identifiable après la saisie : un exemple qui disparaît dès qu’on commence à taper ne remplace pas une étiquette. Signalez les champs obligatoires et ne précisez un format que lorsqu’il est nécessaire. Si vous demandez le numéro de série, expliquez pourquoi ; s’il n’est pas indispensable au premier échange, laissez la personne le fournir plus tard.
Après l’envoi, confirmez clairement que la demande a été reçue. Si un champ pose problème, indiquez lequel et placez le message près de celui-ci, sans effacer les réponses déjà saisies. Un simple « Erreur » laisse le visiteur deviner ce qu’il doit corriger. Enfin, une vérification antispam ne doit pas dépendre exclusivement de la reconnaissance d’une image ou d’un geste à la souris.
Vérifier le site dans des conditions réelles
L’accessibilité se contrôle sur les pages telles qu’elles seront utilisées, pas seulement sur une maquette. Testez au minimum l’accueil, une page de service et le contact :
- Augmentez le zoom et vérifiez le texte, le menu et les messages.
- Sans souris, accomplissez chaque démarche au clavier.
- Si vous pouvez tester un lecteur d’écran, écoutez les titres, les liens et les champs.
- Envoyez le formulaire avec un champ manquant, puis vérifiez le message d’erreur, la correction et la confirmation.
Les outils automatiques détectent certains problèmes, comme un contraste insuffisant ou une image sans texte alternatif. Ils ne savent pas toujours dire si un libellé est utile : un contrôle humain reste nécessaire. Après une modification, refaites au moins le parcours touché. Une nouvelle bannière peut masquer un bouton qui fonctionnait la veille.
Terminez par un essai concret sur la page « Contact » : envoyez une demande avec « GPS bloqué au démarrage » et une adresse de réponse. Si le formulaire exige aussi un numéro de série, une date d’achat et une version logicielle, demandez-vous lesquels de ces renseignements sont indispensables dès le premier message. Les autres pourront être recueillis lors de l’échange avec l’atelier.