Accessibilité web : les bases pour un site plus inclusif

Rendre un site plus accessible, ce n’est pas seulement cocher une case pour les personnes handicapées. C’est surtout permettre à davantage de visiteurs de comprendre, naviguer et agir, quelles que soient leurs capacités, leur appareil ou leur situation.

L’accessibilité web, c’est quoi exactement ?

L’accessibilité web consiste à concevoir des pages et des fonctionnalités que des personnes ayant des capacités différentes peuvent utiliser. Cela concerne notamment les personnes aveugles ou malvoyantes, sourdes ou malentendantes, ayant des difficultés motrices, cognitives ou de concentration, mais aussi les personnes temporairement limitées par une blessure, un environnement bruyant, une mauvaise connexion ou un écran difficile à lire.

Un site accessible ne demande pas à tout le monde d’utiliser le web de la même manière. Il propose plusieurs chemins pour accéder à l’information et évite de dépendre d’un seul sens, d’un seul appareil ou d’une seule façon de cliquer.

Le référentiel le plus connu est le WCAG, pour Web Content Accessibility Guidelines. Il organise les bonnes pratiques autour de quatre idées simples : le contenu doit pouvoir être perçu, utilisé, compris et rester compatible avec les technologies d’assistance. Pour une petite entreprise, l’objectif n’est pas de réciter toute la norme, mais de repérer les obstacles les plus fréquents et de les réduire progressivement.

1. Vérifier les contrastes et ne pas dépendre uniquement de la couleur

Un texte gris clair sur un fond blanc peut sembler élégant dans une maquette et devenir pénible à lire sur un téléphone, en plein soleil ou avec une fatigue visuelle. Le contraste entre le texte et son arrière-plan doit être suffisamment marqué pour que l’information reste lisible.

Comme repère technique, le niveau AA de WCAG 2.2 demande généralement un contraste d’au moins 4,5 : 1 pour le texte courant et 3 : 1 pour un texte de grande taille. Ce chiffre ne remplace pas le jugement humain, mais il aide à repérer rapidement les couleurs trop faibles.

Il faut aussi éviter de transmettre une information par la couleur seule. Un champ obligatoire indiqué uniquement en rouge, un graphique compréhensible uniquement grâce à trois couleurs ou un statut affiché sans texte peuvent laisser une partie des visiteurs sans repère.

À vérifier sur votre site :

• Les textes courants restent-ils lisibles sur mobile ?
• Les boutons et liens se distinguent-ils clairement du texte environnant ?
• Les messages d’erreur sont-ils accompagnés d’une explication, et pas seulement d’une couleur ?
• Les informations importantes restent-elles compréhensibles en niveaux de gris ?

2. Rendre la navigation possible au clavier

Tout le monde ne navigue pas avec une souris ou un écran tactile. Certaines personnes utilisent le clavier, un contacteur, une commande vocale ou une technologie d’assistance. Un site qui ne fonctionne qu’au clic peut donc rendre un menu, une fenêtre ou un formulaire inaccessible.

Le test de base est simple : débranchez la souris et utilisez la touche Tab pour avancer. Vous devez pouvoir atteindre les liens, les boutons, les champs et les contrôles dans un ordre logique. La touche Entrée doit activer un lien ou un bouton, et la touche Échap doit généralement permettre de fermer une fenêtre modale lorsque c’est prévu.

Le visiteur doit aussi savoir où se trouve le curseur. Le focus visible — contour, soulignement ou autre indicateur clairement identifiable — ne doit pas être supprimé simplement parce qu’il ne correspond pas au design.

À vérifier sur votre site :

• Chaque élément interactif est-il atteignable avec Tab ?
• Le focus est-il toujours visible, y compris sur les boutons colorés ?
• L’ordre de navigation suit-il le sens de lecture de la page ?
• Les menus, carrousels et fenêtres modales peuvent-ils être utilisés sans souris ?

3. Écrire des textes alternatifs vraiment utiles

Une image n’est pas automatiquement accessible parce qu’elle possède un champ « texte alternatif ». Ce texte doit transmettre l’information utile à une personne qui ne voit pas l’image, sans répéter inutilement ce qui est déjà écrit autour.

Pour une photo d’équipe présentée comme preuve de proximité, un texte comme « L’équipe Cadarsir réunie autour d’une table » peut être pertinent. Pour une image purement décorative qui n’ajoute rien au contenu, le texte alternatif doit rester vide afin que la technologie d’assistance puisse l’ignorer. À l’inverse, une image contenant une information importante ne devrait pas être publiée sans équivalent textuel.

Les icônes utilisées comme boutons doivent également avoir un nom compréhensible. Une loupe seule peut être claire visuellement, mais son bouton doit annoncer son action, par exemple « Rechercher ».

La bonne question à se poser : si cette image disparaissait, quelle information manquerait-il ? La réponse permet de décider s’il faut la décrire, la rendre décorative ou reprendre son contenu dans le texte.

4. Concevoir des formulaires compréhensibles

Un formulaire est souvent le point de contact le plus important d’un site. S’il est difficile à remplir, l’accessibilité devient directement un sujet commercial : un visiteur peut abandonner avant d’envoyer sa demande.

Chaque champ doit avoir une étiquette visible et explicite. « Nom », « Adresse e-mail » et « Décrivez votre besoin » sont plus utiles que des indications vagues placées uniquement dans un texte gris à l’intérieur du champ. Le placeholder peut donner un exemple, mais il ne doit pas remplacer le label.

Les consignes doivent apparaître avant l’erreur. Si un numéro de téléphone doit respecter un format particulier, indiquez-le dès le départ. En cas de problème, le message doit expliquer ce qui est incorrect et comment le corriger. Évitez le simple « Formulaire invalide » ou le champ rendu rouge sans explication.

Enfin, limitez les questions à ce qui est réellement nécessaire. Un formulaire plus court est souvent plus accessible, plus rapide et plus efficace.

Checklist formulaire :

• Chaque champ a-t-il un label associé et visible ?
• Les champs obligatoires sont-ils identifiés en texte ?
• Les erreurs indiquent-elles précisément quoi corriger ?
• Le formulaire fonctionne-t-il au clavier et sur un petit écran ?
• Le message de confirmation est-il compréhensible après l’envoi ?

5. Rendre les contenus faciles à comprendre

L’accessibilité ne se limite pas au code. Un texte très long, rempli de jargon, de phrases imbriquées ou de boutons ambigus peut devenir difficile à comprendre, même lorsque la page est techniquement bien construite.

Commencez par annoncer clairement le sujet de la page. Utilisez des titres qui décrivent réellement les sections, des paragraphes courts, des listes lorsque cela aide et des liens qui indiquent leur destination. « Découvrir nos prestations » est plus informatif que « Cliquez ici » répété plusieurs fois.

Expliquez les termes techniques à leur première apparition. Une petite structure n’a pas besoin de parler comme un cahier des charges pour paraître experte. Au contraire, une expertise expliquée simplement rassure davantage les personnes qui découvrent votre activité.

La langue de la page doit aussi être correctement déclarée dans le code, et les changements de langue doivent être signalés lorsque le contenu en contient. Cela aide les lecteurs d’écran et certains outils de lecture à prononcer les mots de façon plus adaptée.

6. Soigner la structure, le mobile et le zoom

Une page accessible doit rester exploitable lorsque le visiteur agrandit le texte, utilise un écran étroit ou consulte le site avec un réglage d’affichage différent. Une mise en page qui dépend d’une taille d’écran précise risque de masquer des informations ou de créer un défilement horizontal pénible.

La structure HTML compte également. Un seul titre principal, des sous-titres hiérarchisés, des listes correctement balisées et des boutons utilisés pour les actions rendent la page plus lisible pour les visiteurs comme pour les technologies d’assistance.

Les animations méritent une attention particulière. Un mouvement permanent, une vidéo qui démarre seule ou un contenu qui change trop vite peut gêner la lecture et la concentration. Prévoyez un moyen de mettre en pause, évitez l’autoplay lorsque ce n’est pas indispensable et ne faites pas reposer une information importante sur une animation.

7. Tester avec de vrais parcours, pas uniquement avec un outil automatique

Les outils d’audit sont utiles pour repérer des problèmes répétitifs : contraste insuffisant, image sans attribut alt, label manquant ou structure douteuse. Ils ne comprennent cependant pas toujours l’intention d’une image, la clarté d’un texte ou la logique réelle d’un parcours.

Ajoutez donc des tests simples avec des objectifs concrets :

1. Trouver une information : une personne peut-elle comprendre en quelques secondes où se trouve votre prestation principale ?
2. Prendre contact : peut-elle remplir et envoyer le formulaire sans souris ni deviner les erreurs ?
3. Lire sur mobile : le texte reste-t-il confortable sans zoom permanent ?
4. Revenir en arrière : le parcours reste-t-il cohérent si l’on utilise le bouton précédent du navigateur ?
5. Faire relire : une personne extérieure comprend-elle les titres, les boutons et les consignes ?

Le meilleur audit combine les outils, l’observation et l’expérience de personnes différentes. L’accessibilité est une démarche d’amélioration continue, pas un autocollant posé une fois pour toutes sur un site.

Une checklist d’accessibilité pour commencer aujourd’hui

Voici une première vérification réalisable en moins d’une heure :

• Lire la page d’accueil en zoomant et sur un téléphone.
• Parcourir le menu et le formulaire avec la touche Tab.
• Repérer les textes gris trop pâles et les liens uniquement distingués par la couleur.
• Vérifier que chaque image utile possède une description adaptée.
• Contrôler que les champs de formulaire ont des labels et des messages d’erreur explicites.
• Remplacer les liens vagues par des intitulés qui annoncent l’action.
• Faire tester un parcours clé par une personne qui ne connaît pas le site.

Ne cherchez pas à tout corriger en même temps. Commencez par les pages qui reçoivent le plus de visites ou qui génèrent le plus de demandes : accueil, prestations, contact, réservation et contenus essentiels.

Faut-il refaire tout le site pour le rendre plus accessible ?

Pas forcément. Certaines améliorations sont rapides : corriger un contraste, ajouter un label, réécrire un bouton ou renseigner un texte alternatif. D’autres problèmes viennent de la structure du thème, d’un composant impossible à utiliser au clavier ou d’une dépendance qui bloque les corrections.

Un audit permet de distinguer les actions prioritaires des chantiers plus lourds. Il évite aussi de refaire une page entière alors qu’une correction ciblée suffit. À l’inverse, si l’accessibilité, la performance, le mobile et la maintenance sont tous fragiles, une refonte peut être l’occasion de repartir sur des bases plus cohérentes.

L’important est de ne pas promettre une conformité abstraite sans vérifier les usages réels. Une démarche sérieuse décrit ce qui a été testé, ce qui reste à améliorer et comment les corrections seront suivies.

Chez Cadarsir, un site inclusif doit rester simple à utiliser

Pour Cadarsir, l’accessibilité fait partie d’une conception web de qualité : comprendre le besoin, structurer les contenus, choisir des composants clairs, tester les parcours et améliorer le site dans le temps. L’objectif n’est pas d’ajouter une couche technique difficile à expliquer, mais de réduire les obstacles qui empêchent un visiteur de trouver une réponse ou de prendre contact.

Cette approche concerne aussi les entrepreneurs et petites structures qui n’ont pas une équipe dédiée. On peut commencer par un audit ciblé, corriger les pages prioritaires, puis intégrer l’accessibilité dans les prochaines créations, les contenus et la maintenance courante.

Conclusion : rendre son site plus inclusif, étape par étape

Les bases de l’accessibilité web sont à la portée d’une petite entreprise. Des contrastes lisibles, une navigation au clavier, des textes alternatifs pertinents, des formulaires guidés et des contenus compréhensibles améliorent déjà l’expérience de nombreux visiteurs.

Le plus efficace est de partir des parcours réels : comprendre votre offre, trouver une information, demander un devis, réserver ou vous contacter. Testez ces actions avec plusieurs méthodes, corrigez les obstacles les plus importants et gardez une trace des améliorations.

Un site plus accessible n’est pas seulement plus inclusif. Il est souvent plus clair, plus confortable sur mobile, plus robuste dans le temps et plus accueillant pour tout le monde.

FAQ : les bases de l’accessibilité web

Pour aller plus loin :WCAG 2.2 et les principes d’accessibilité du W3C.