Accessibilité web : les bases à respecter

Un site accessible n'est pas un luxe réservé aux grandes entreprises : c'est la condition pour que chacun puisse lire, naviguer et acheter chez vous, quel que soit son handicap, son âge ou son matériel. Voici les bases concrètes à respecter, avec une méthode pas-à-pas et une checklist directement applicable, même sans compétence technique.

L'accessibilité web (souvent abrégée a11y) consiste à concevoir des sites utilisables par tous, y compris les personnes malvoyantes, aveugles, malentendantes, à mobilité réduite ou avec des troubles cognitifs. En France, le cadre de référence est le RGAA (Référentiel Général d'Amélioration de l'Accessibilité), lui-même aligné sur les normes internationales WCAG. Au-delà de l'obligation légale pour certains organismes, l'accessibilité profite à tout le monde : meilleure lisibilité, navigation plus claire, et bonus SEO non négligeable pour votre référencement naturel.

La bonne nouvelle, c'est que l'essentiel des gains se joue sur une poignée de fondamentaux. Vous n'avez pas besoin de tout maîtriser du RGAA pour rendre votre site nettement plus inclusif : quelques corrections bien ciblées suffisent déjà à débloquer une part importante de vos visiteurs. C'est exactement ce que nous détaillons ci-dessous.

Pourquoi l'accessibilité concerne aussi les TPE et PME

Beaucoup de dirigeants pensent que l'accessibilité ne s'applique qu'au secteur public. C'est faux : au-delà des obligations réglementaires qui s'étendent progressivement au secteur privé, un site inaccessible vous prive de clients. Une personne qui ne parvient pas à remplir votre formulaire de contact ou à lire votre grille tarifaire ne reviendra pas, et ne vous dira jamais pourquoi elle est partie.

• Plus de clients atteignables : le handicap touche une part importante de la population, souvent de manière temporaire (bras cassé, écran en plein soleil, oreille bouchée dans les transports).
• Meilleur référencement : Google valorise les sites bien structurés, avec des balises correctes, du texte alternatif et une navigation logique.
• Image de marque : un site inclusif renvoie une image sérieuse, moderne et professionnelle, qui rassure avant même le premier échange.
• Moins de risques juridiques : anticiper évite des mises en conformité coûteuses réalisées dans l'urgence, sous la pression d'une réclamation.

Prenons un cas concret : un artisan chauffagiste dont le site affiche ses coordonnées uniquement dans une image, sans texte. Un client malvoyant qui utilise un lecteur d'écran n'entendra jamais le numéro de téléphone. Le devis part chez le concurrent, alors que la correction se résume à écrire le numéro en texte. L'accessibilité, à cette échelle, c'est souvent du bon sens plus que de la technique.

Les contrastes et la couleur

Le problème d'accessibilité le plus fréquent, et le plus simple à corriger, concerne les contrastes de couleur. Un texte gris clair sur fond blanc est illisible pour une personne malvoyante, mais aussi pour n'importe qui sur un écran de smartphone en extérieur. Les tendances graphiques poussent souvent vers des gris délavés et des typographies fines : élégant sur la maquette du designer, pénible à lire au quotidien.

Deuxième règle : ne jamais transmettre une information par la couleur seule. Un champ de formulaire en erreur ne doit pas être signalé uniquement par un contour rouge, mais aussi par un message texte et une icône. C'est essentiel pour les personnes daltoniennes, qui ne distinguent pas toujours le rouge du vert. Le même principe vaut pour les liens dans un paragraphe : un simple changement de couleur ne suffit pas, un soulignement les rend identifiables par tous.

Le texte alternatif des images

Chaque image porteuse d'information doit avoir un attribut alt décrivant son contenu. C'est ce texte que lisent les lecteurs d'écran utilisés par les personnes aveugles, et c'est aussi ce que Google interprète pour comprendre et indexer vos visuels. Un bon alt est court, factuel et fidèle à ce que montre l'image.

• Image informative : décrivez ce qu'elle montre (`alt="Graphique montrant la hausse des ventes en 2025"`).
• Image décorative : laissez l'attribut vide (`alt=""`) pour que le lecteur d'écran l'ignore et ne surcharge pas l'écoute.
• Image cliquable : décrivez la destination ou l'action plutôt que l'image (`alt="Télécharger la brochure PDF"`).
• Évitez les formulations redondantes comme `"image de"` ou `"photo de"` : le lecteur d'écran annonce déjà qu'il s'agit d'une image.

Attention : des images trop lourdes pénalisent aussi l'expérience, notamment sur mobile ou pour les personnes ayant une connexion lente. Compresser vos images avant de les mettre en ligne fait partie d'une démarche d'accessibilité et de performance. Pour aller plus loin sur le format et le poids idéal, voyez comment optimiser ses images pour le web.

La navigation au clavier

Toutes les personnes n'utilisent pas une souris. Certaines naviguent uniquement au clavier, avec la touche Tab pour passer d'un élément à l'autre, d'autres via une commande vocale ou un dispositif adapté qui simule le clavier. Votre site doit rester entièrement utilisable dans ce mode, du premier lien du menu jusqu'au bouton d'envoi du formulaire.

1. 1Ouvrez votre site et rangez votre souris.
2. 2Appuyez sur Tab de façon répétée : vous devez voir clairement quel élément est actuellement sélectionné (le focus).
3. 3Vérifiez que l'ordre de navigation suit une logique naturelle, de haut en bas et de gauche à droite, sans sauts déroutants.
4. 4Assurez-vous que menus, boutons, champs et fenêtres surgissantes sont tous accessibles et activables avec Entrée ou Espace, et qu'on peut refermer une pop-up avec la touche Échap.

La structure et les formulaires

Une hiérarchie de titres claire

Utilisez les balises de titre (h1, h2, h3) dans l'ordre, sans en sauter. Le h1 correspond au titre principal de la page, unique, puis les h2 pour les grandes sections et les h3 pour les sous-parties. Les lecteurs d'écran s'appuient sur cette structure pour permettre une navigation rapide par titres, exactement comme un sommaire. Un titre ne doit pas être choisi pour sa taille, mais pour son niveau logique : la mise en forme se règle ensuite en CSS.

Des formulaires compréhensibles

Le formulaire de contact est souvent le point de conversion de votre site : il doit être irréprochable, car c'est là que se perdent le plus de demandes. Les mêmes règles qui le rendent accessible le rendent aussi plus efficace, comme le montrent les bonnes pratiques d'un formulaire de contact qui convertit.

• Associez chaque champ à une étiquette (label) visible et reliée au champ, pas un simple placeholder qui disparaît à la saisie.
• Indiquez clairement les champs obligatoires avec un texte, pas seulement un astérisque de couleur.
• Affichez des messages d'erreur explicites qui disent quoi corriger (`"L'email doit contenir un @"` plutôt que `"Erreur"`).
• Regroupez les champs liés avec des intitulés de section clairs, et placez le message d'erreur près du champ concerné, pas seulement en haut de page.

Pensez aussi à la lisibilité de vos contenus : phrases courtes, vocabulaire simple, paragraphes aérés. Un texte trop dense fatigue tous les lecteurs, et particulièrement les personnes ayant des troubles cognitifs ou dyslexiques. Cette exigence de clarté rejoint directement le travail d'UX et de conversion : ce qui se lit facilement se comprend, et ce qui se comprend se transforme en contact.

L'accessibilité, ce n'est pas rendre les choses possibles pour les personnes handicapées, c'est rendre les choses meilleures pour tout le monde.

Les erreurs fréquentes qui rendent un site inaccessible

Certaines maladresses reviennent presque systématiquement sur les sites de TPE et de PME. Les connaître permet de les repérer d'un coup d'œil et d'éviter de reproduire les mêmes pièges lors d'une future mise à jour.

• Coordonnées ou horaires enfermés dans une image : ni le lecteur d'écran ni Google ne peuvent les lire. Écrivez-les toujours en texte.
• Boutons intitulés « Cliquez ici » ou « En savoir plus » : hors contexte, ils n'indiquent pas la destination. Préférez `"Demander un devis"` ou `"Voir nos tarifs"`.
• Vidéo qui démarre toute seule avec du son : gênante pour tous, désorientante pour les personnes sensibles. Laissez l'utilisateur décider.
• Texte justifié ou tout en majuscules sur de longs passages : plus difficile à lire, notamment pour les personnes dyslexiques.
• Contenu qui dépend uniquement du survol de la souris : invisible au clavier et souvent inaccessible sur écran tactile.

Votre méthode de mise en conformité pas à pas

Voici les priorités à traiter en premier, celles qui ont le plus fort impact pour un effort raisonnable. Traitez-les dans l'ordre pour progresser vite sans vous éparpiller. Chaque étape est autonome : vous pouvez vous arrêter, publier, puis reprendre plus tard.

1. 1Vérifier les contrastes de tous vos textes et boutons, en commençant par les pages les plus visitées.
2. 2Ajouter un texte alternatif pertinent à toutes les images informatives, et vider l'alt des images décoratives.
3. 3Compresser les images lourdes pour améliorer la vitesse de chargement et le confort sur mobile.
4. 4Tester la navigation au clavier et rendre le focus visible sur chaque élément interactif.
5. 5Corriger la hiérarchie des titres (un seul h1, ordre logique, sans niveau sauté).
6. 6Fiabiliser les formulaires : labels reliés, erreurs explicites, champs obligatoires signalés en texte.
7. 7Simplifier et aérer vos contenus texte pour les rendre lisibles par tous.

Questions fréquentes

En résumé

L'accessibilité web repose sur des fondamentaux accessibles à toute TPE ou PME : des contrastes suffisants, des images décrites et allégées, une navigation au clavier fonctionnelle, une structure de titres propre et des formulaires clairs. Ces bases améliorent l'expérience de tous vos visiteurs, pas seulement des personnes en situation de handicap, et renforcent au passage votre référencement naturel. Le tout se traite progressivement, sans refonte brutale.

Chez TC Automation, nous concevons et refondons des sites web pensés dès le départ pour être accessibles, rapides et conformes au RGAA. Si vous souhaitez auditer votre site actuel ou lancer un projet sur des bases saines, parlons de vos objectifs : un site accessible est un site qui travaille pour vous, sans laisser de client sur le bord de la route.