Développement web
Accessibilité web : les bases à respecter sur un site professionnel
Définition
L’accessibilité web rend un site utilisable par le plus grand nombre.
L’accessibilité web regroupe les pratiques qui permettent à tous les utilisateurs d’accéder à un site, de comprendre ses contenus, de naviguer dans ses pages et d’effectuer ses actions, quelles que soient leurs capacités, leurs outils ou leur contexte d’usage.
Elle concerne les personnes aveugles ou malvoyantes, sourdes ou malentendantes, ayant des troubles moteurs, cognitifs, neurologiques ou temporaires. Mais elle améliore aussi l’expérience de tous : navigation mobile, lecture en plein soleil, fatigue visuelle, connexion lente, usage au clavier ou environnement bruyant.
Sur un site professionnel, l’accessibilité ne doit pas être pensée comme une correction tardive. Elle doit être intégrée dès la conception : structure HTML, contrastes, navigation clavier, formulaires, messages d’erreur, images, vidéos, composants interactifs et qualité éditoriale.
Un site accessible n’est pas un site simplifié. C’est un site plus clair, plus solide et plus respectueux des vrais usages.
Approche
Intégrer l’accessibilité comme une exigence de qualité web.
Chez Edikka, l’accessibilité web est pensée comme une fondation professionnelle. Elle ne doit pas être traitée uniquement à la fin d’un projet, au moment de corriger les erreurs visibles. Elle doit guider les choix de structure, de design, de contenu et de développement.
Cette approche évite de réduire l’accessibilité à une checklist juridique. Le sujet est plus large : rendre le site compréhensible, navigable, robuste, lisible et actionnable pour tous les utilisateurs, sans dégrader l’identité visuelle ni la qualité de l’expérience.
HTML
02Contrastes
03Clavier
04Formulaires
Positionnement
L’accessibilité n’est pas un sujet séparé du design, du SEO ou du développement.
L’accessibilité web traverse plusieurs disciplines. Elle touche le design lorsque les contrastes sont trop faibles, le développement lorsque les composants ne sont pas navigables au clavier, l’éditorial lorsque les liens sont vagues, et le SEO lorsque la structure HTML manque de clarté.
Pour éviter la cannibalisation avec les articles sur l’UX/UI, le SEO technique ou l’UX writing, cet article se concentre sur les bases à respecter sur un site professionnel : les règles essentielles qui permettent au site d’être utilisable, compréhensible et robuste.
Design
Les couleurs, contrastes, tailles, espacements et états visuels doivent rester lisibles et perceptibles.
HTML
La structure doit être sémantique, logique et exploitable par les technologies d’assistance.
UX writing
Les textes doivent expliquer clairement les actions, erreurs, champs, boutons et messages importants.
Technique
Les composants doivent être utilisables au clavier, robustes et compatibles avec les lecteurs d’écran.
Enjeu
Pourquoi l’accessibilité améliore la qualité globale d’un site.
Un site inaccessible crée des barrières : un bouton impossible à atteindre au clavier, un formulaire sans message d’erreur clair, un contraste trop faible, une image informative sans alternative, une modale qui piège le focus ou un lien dont le libellé ne veut rien dire.
Ces problèmes ne concernent pas seulement une minorité d’utilisateurs. Ils révèlent souvent un manque de robustesse dans la conception. Un site accessible est généralement plus clair, plus maintenable, plus stable et plus facile à utiliser dans des contextes variés.
Inclure
Permettre à davantage d’utilisateurs d’accéder aux contenus, services, formulaires et fonctionnalités.
Clarifier
Rendre les interfaces plus lisibles, mieux structurées et plus faciles à comprendre.
Fiabiliser
Construire des composants plus robustes, compatibles avec différents outils et modes d’interaction.
Professionnaliser
Renforcer la crédibilité du site en montrant une attention réelle à la qualité d’usage.
Méthode
Les 10 bases d’accessibilité à respecter sur un site professionnel.
L’accessibilité doit être traitée comme une méthode de conception. Il ne suffit pas de tester une page à la fin du projet. Il faut intégrer les bonnes pratiques dans les composants, les gabarits, les formulaires, les contenus et les workflows de publication.
Les bases suivantes permettent déjà de réduire une grande partie des obstacles courants, tout en améliorant la qualité générale du site.
HTML sémantique
Structurer correctement les pages avec un HTML compréhensible
Le HTML sémantique est la base de l’accessibilité. Il permet aux navigateurs, moteurs de recherche et technologies d’assistance de comprendre le rôle des éléments : titres, sections, navigation, contenus principaux, boutons, liens ou formulaires.
- Utiliser de vrais titres h1 h2 h3 dans un ordre logique
- Employer des balises adaptées : main, nav, section, article, button
- Éviter de transformer des div en faux boutons ou faux liens
- Préserver une structure lisible même sans CSS
- Associer les composants interactifs à un rôle clair et à un nom accessible
Hiérarchie
Organiser les contenus pour faciliter la lecture et la navigation
Une page accessible doit être compréhensible rapidement. La hiérarchie des contenus aide tous les utilisateurs à se repérer, mais elle est particulièrement importante pour ceux qui naviguent avec un lecteur d’écran ou au clavier.
Une page bien structurée doit rester compréhensible par ses titres, même avant de lire tous les paragraphes.
- Un titre principal clair pour chaque page
- Des sections organisées dans un ordre logique
- Des titres explicites, pas seulement décoratifs
- Des paragraphes courts et lisibles
- Des listes utilisées lorsque l’information gagne à être structurée
Contrastes
Garantir une lisibilité suffisante des textes et éléments importants
Les contrastes sont essentiels pour la lecture. Un texte trop clair sur un fond clair, un bouton insuffisamment visible ou un état actif trop discret peuvent empêcher certains utilisateurs de comprendre ou d’utiliser l’interface.
Vérifier les contrastes des titres, paragraphes, labels, aides et messages d’erreur.
Rendre les actions principales visibles dans leurs états normal, survol, focus et désactivé.
Ne pas faire porter l’information uniquement par une icône peu contrastée.
Différencier clairement les états actif, sélectionné, erreur, succès ou indisponible.
Clavier
Permettre une navigation complète au clavier
Un site professionnel doit pouvoir être utilisé sans souris. La navigation au clavier est essentielle pour de nombreux utilisateurs, mais elle permet aussi de vérifier la robustesse réelle des composants interactifs.
- Tous les liens, boutons, menus, champs et composants doivent être atteignables au clavier
- L’ordre de tabulation doit suivre la logique visuelle et éditoriale
- Le focus visible ne doit jamais être supprimé sans alternative claire
- Les menus, modales, accordéons et sliders doivent être utilisables au clavier
- L’utilisateur doit pouvoir sortir d’un composant sans être piégé
Focus visible
Rendre l’élément actif clairement identifiable
Le focus indique où se trouve l’utilisateur lorsqu’il navigue au clavier. S’il est invisible ou trop discret, l’utilisateur perd le contrôle du parcours.
Chaque élément interactif doit afficher un état de focus suffisamment visible et cohérent.
Le focus doit avancer dans un ordre prévisible, sans sauts incohérents ni zones cachées.
Les modales, menus mobiles et panneaux dynamiques doivent gérer correctement l’entrée et la sortie du focus.
Formulaires
Concevoir des formulaires compréhensibles et corrigeables
Les formulaires sont des zones critiques. Ils doivent être simples à comprendre, faciles à remplir, navigables au clavier et capables d’expliquer clairement les erreurs.
- Associer chaque champ à un label visible et explicite
- Ne pas utiliser uniquement le placeholder comme label
- Indiquer les champs obligatoires de manière claire
- Afficher les erreurs près des champs concernés
- Expliquer comment corriger chaque erreur
- Prévoir des messages de confirmation après l’envoi
Images
Donner une alternative utile aux images informatives
Toutes les images n’ont pas besoin du même traitement. Une image décorative peut avoir un attribut alternatif vide. Une image informative doit fournir une alternative qui transmet l’information utile.
Utiliser un alt="" vide si l’image n’apporte aucune information.
Décrire l’information utile, pas simplement l’apparence de l’image.
Si l’image est un lien ou bouton, l’alternative doit expliquer l’action.
Pour un graphique ou schéma, prévoir une description plus complète dans le contenu.
Liens & boutons
Écrire des actions compréhensibles hors contexte
Les liens et boutons doivent indiquer clairement leur destination ou leur action. Des libellés comme “cliquez ici”, “en savoir plus” ou “voir” peuvent devenir ambigus lorsqu’ils sont lus hors contexte par une technologie d’assistance.
- Écrire des libellés de liens explicites
- Différencier un lien de navigation et un bouton d’action
- Ne pas utiliser uniquement une icône sans nom accessible
- Éviter plusieurs liens identiques menant vers des destinations différentes
- Indiquer clairement les actions importantes ou irréversibles
Composants interactifs
Rendre les menus, modales, accordéons et sliders réellement utilisables
Les composants interactifs sont souvent les zones les plus fragiles. Ils doivent fonctionner avec la souris, le clavier, les lecteurs d’écran et sur mobile, sans bloquer l’utilisateur ni masquer une information essentielle.
Navigation clavier, état ouvert ou fermé, bouton de fermeture et ordre de focus.
Focus contenu dans la modale, fermeture possible et retour au déclencheur.
État développé ou réduit, titre explicite et interaction clavier correcte.
Contrôles accessibles, pause possible si animation, information lisible sans dépendre du défilement.
Tests
Tester avec des outils, mais aussi avec de vrais parcours
Les outils automatiques sont utiles pour repérer certaines erreurs : contrastes, attributs manquants, structure ou problèmes simples. Mais ils ne détectent pas tout. L’accessibilité doit aussi être vérifiée avec des tests manuels.
RGAA & standards
Comprendre le rôle du RGAA sans transformer le projet en usine à conformité.
En France, le RGAA sert de référentiel pour contrôler l’accessibilité numérique. Il permet d’évaluer un site à partir de critères et de tests, en s’appuyant sur les standards internationaux d’accessibilité.
Pour un site professionnel, l’intérêt du RGAA est double : il donne une méthode de vérification, mais il aide aussi les équipes à traduire l’accessibilité en exigences concrètes de design, contenu et développement.
RGAA, WCAG, tests, preuves.
Référentiel français permettant d’auditer l’accessibilité d’un site et de ses contenus.
Standards internationaux qui structurent les principes d’un contenu web accessible.
Vérifications automatiques et manuelles sur les pages, composants, contenus et parcours.
Corrections documentées, composants conformes, parcours testés et règles maintenues.
Signaux faibles
Les signes qu’un site présente des barrières d’accessibilité.
Les problèmes d’accessibilité ne sont pas toujours visibles lors d’une navigation classique à la souris. Ils apparaissent souvent lorsqu’on teste le site au clavier, avec un lecteur d’écran, sur mobile ou dans des conditions de lecture moins favorables.
Le site ne peut pas être parcouru entièrement au clavier.
Le focus disparaît ou devient difficile à voir pendant la navigation.
Les contrastes sont trop faibles sur les textes, boutons ou messages importants.
Les formulaires indiquent une erreur sans expliquer comment la corriger.
Les images importantes n’ont pas d’alternative textuelle utile.
Les composants interactifs fonctionnent à la souris, mais pas correctement au clavier.
Priorisation
Corriger d’abord les barrières qui empêchent l’usage.
Tout ne se corrige pas au même niveau d’urgence. Les priorités doivent porter sur les problèmes qui empêchent de naviguer, comprendre, remplir un formulaire, envoyer une demande ou accéder aux informations essentielles.
Une démarche efficace commence par les composants communs à tout le site : header, menu mobile, boutons, formulaires, modales, liens, contrastes, gabarits de pages et messages d’erreur.
Navigation
Rendre le menu, les liens, les boutons et les composants principaux utilisables au clavier.
Formulaires
Associer labels, aides, erreurs, confirmations et champs obligatoires de manière claire.
Contrastes
Corriger les textes, boutons, états et éléments essentiels dont la lisibilité est insuffisante.
Composants
Tester et corriger modales, accordéons, sliders, menus déroulants et contenus dynamiques.
Design accessible
Créer une interface accessible sans perdre l’identité visuelle.
L’accessibilité n’impose pas un design pauvre ou standardisé. Elle impose une interface lisible, cohérente et utilisable. Il est possible de conserver une identité visuelle forte tout en respectant les besoins de contraste, d’espacement, de hiérarchie et de focus.
La qualité graphique doit être mise au service de la compréhension. Un site premium inaccessible donne une impression de maîtrise incomplète. Un site premium accessible démontre une exigence supérieure.
Ne jamais faire porter une information uniquement par la couleur.
Prévoir des zones de clic confortables et suffisamment séparées.
Utiliser une taille, une longueur de ligne et un interlignage adaptés à la lecture.
Prévoir des états visibles pour focus, hover, actif, erreur, succès et désactivé.
Contenus
Rendre les contenus compréhensibles, pas seulement visibles.
L’accessibilité éditoriale est souvent oubliée. Pourtant, un contenu trop dense, des titres vagues, des liens imprécis ou des instructions ambiguës peuvent créer autant de barrières qu’un problème technique.
Un site professionnel doit écrire pour être compris rapidement : phrases claires, vocabulaire explicite, titres utiles, liens descriptifs, messages d’erreur précis et instructions placées avant les actions.
Titres, liens, erreurs, instructions.
Les titres doivent décrire clairement le contenu ou l’étape qu’ils introduisent.
Les liens doivent indiquer la destination ou l’action, sans dépendre uniquement du contexte visuel.
Les messages doivent expliquer le problème et la correction attendue.
Les consignes utiles doivent être données avant l’action, pas seulement après l’échec.
Workflow
Intégrer l’accessibilité dans le workflow de création du site.
L’accessibilité devient coûteuse lorsqu’elle est traitée après coup. Elle doit être intégrée dans les wireframes, le design system, les composants front-end, les contenus, les tests et la recette avant mise en ligne.
Plus une erreur est corrigée tard, plus elle peut impacter plusieurs pages, composants ou gabarits. La bonne méthode consiste à créer des composants accessibles dès le départ, puis à les réutiliser.
Prévoir les parcours clavier, les messages, les erreurs, les composants et les états dès les wireframes.
Valider contrastes, tailles, focus, états, espacements et hiérarchie visuelle.
Coder des composants sémantiques, testables et compatibles avec les technologies d’assistance.
Tester au clavier, avec outils automatiques, lecteur d’écran et scénarios utilisateurs.
Erreurs fréquentes
Les erreurs qui rendent un site professionnel moins accessible.
Les erreurs les plus fréquentes viennent souvent d’un décalage entre apparence visuelle et fonctionnement réel. Un composant peut sembler clair à la souris, mais devenir incompréhensible au clavier ou avec un lecteur d’écran.
Utiliser des éléments non interactifs pour déclencher des actions sans comportement clavier correct.
Retirer l’outline sans proposer un état de focus visible et cohérent.
Privilégier une esthétique trop subtile au détriment de la lisibilité réelle.
Utiliser des placeholders comme labels et afficher des erreurs trop générales.
Livrables
Ce qu’un travail d’accessibilité web doit produire.
Une démarche d’accessibilité ne doit pas se limiter à une liste d’erreurs. Elle doit produire des corrections concrètes, des composants plus robustes, des règles de conception et un système de contrôle pour éviter les régressions.
Diagnostic priorisé
Une liste des barrières les plus importantes, classées par impact utilisateur et complexité de correction.
Corrections composants
Des menus, boutons, formulaires, modales, accordéons et messages rendus accessibles à la source.
Règles éditoriales
Des consignes pour titres, liens, alternatives d’images, messages d’erreur et instructions.
Checklist de recette
Un protocole de vérification clavier, contraste, lecteur d’écran, formulaires et parcours critiques.
Ce qui fonctionne
Les principes d’un site professionnel réellement accessible.
Un site accessible ne repose pas sur une correction isolée. Il combine une structure HTML propre, un design lisible, une navigation clavier complète, des formulaires compréhensibles, des alternatives utiles et des composants testés.
L’accessibilité fonctionne lorsqu’elle devient une habitude de conception, pas une vérification tardive.
Percevoir, comprendre, naviguer, agir.
Les informations importantes sont visibles, contrastées et disponibles sous plusieurs formes si nécessaire.
Les contenus, titres, liens, formulaires et messages sont clairs et prévisibles.
Le site fonctionne au clavier, avec un ordre logique et un focus visible.
Les actions, erreurs, confirmations et composants interactifs sont accessibles et maîtrisables.
Conclusion
L’accessibilité web est une exigence de qualité, pas une contrainte secondaire.
Respecter les bases de l’accessibilité web permet de créer un site plus inclusif, mais aussi plus robuste, plus lisible et plus professionnel. HTML sémantique, contrastes, navigation clavier, formulaires clairs, alternatives d’images et composants accessibles sont des fondations essentielles.
L’accessibilité ne doit pas être ajoutée après le design et le développement. Elle doit être intégrée dans la conception, le design system, le code, les contenus et la recette.
Un site accessible montre une exigence supérieure : il respecte les utilisateurs, réduit les barrières, améliore l’expérience et renforce la qualité globale du projet digital.
L’accessibilité web commence par des bases simples mais essentielles : structure claire, contrastes lisibles, navigation clavier, formulaires compréhensibles et composants réellement utilisables.
L’accessibilité web n’est pas une option technique. C’est une condition de qualité professionnelle.
Un site professionnel doit pouvoir être compris, parcouru et utilisé par le plus grand nombre. L’accessibilité ne concerne pas seulement les personnes en situation de handicap : elle améliore aussi la clarté, la navigation, la lisibilité, le SEO et la qualité globale de l’expérience utilisateur.
Chez Edikka, l’accessibilité est pensée comme une exigence de conception, pas comme une correction tardive. Elle commence dans le HTML, se poursuit dans le design, se vérifie dans les formulaires, les contrastes, les textes alternatifs, la navigation clavier et la structure des contenus. Un site accessible est plus robuste, plus clair, plus crédible et plus durable.
Construire une base HTML claire et compréhensible
L’accessibilité commence par un balisage propre : un seul H1, des titres hiérarchisés, des boutons utilisés comme boutons, des liens utilisés comme liens, des labels associés aux champs et une structure logique. Un HTML sémantique aide les lecteurs d’écran, améliore la compréhension du contenu et donne au site une base plus solide pour le référencement naturel.
Rendre les contenus lisibles, visibles et utilisables
Un site accessible doit rester confortable à lire et à utiliser : contrastes suffisants, tailles de texte adaptées, espaces lisibles, boutons identifiables, liens explicites et messages d’erreur clairs. L’objectif n’est pas seulement de respecter une règle, mais de réduire l’effort nécessaire pour comprendre, choisir et agir.
Prévoir une navigation efficace au clavier et sans obstacle
Les menus, formulaires, boutons, modales et éléments interactifs doivent pouvoir être utilisés sans souris. Les états de focus doivent être visibles, l’ordre de tabulation doit être logique et les actions importantes doivent rester compréhensibles. Une interface accessible ne bloque pas l’utilisateur : elle lui laisse toujours un chemin clair pour avancer.
L’accessibilité web ne se limite pas au RGAA ou à une checklist. C’est une méthode de qualité : structurer correctement, rendre lisible, guider les actions, éviter les blocages et concevoir des interfaces utilisables par tous. Un site accessible est un site plus professionnel.
Pour aller plus loin sur ce sujet
Des réponses complémentaires pour clarifier les points essentiels abordés dans cet article.
