La conception web accessible n’est pas un point de contrôle à traiter après la mise en ligne ; elle consiste à intégrer la navigation au clavier, l’indicateur de focus, les libellés et les alternatives textuelles aux décisions de conception. Ce guide vous aide à inscrire ces quatre éléments dans la mise en page à l’aide d’exemples concrets. L’objectif est de permettre aux visiteurs qui n’utilisent pas de souris d’accomplir la même tâche.
La conception web accessible n’est pas une liste de contrôle que l’on ouvre une fois la palette de couleurs définie. La navigation au clavier, le maintien d’un indicateur de focus visible, les libellés de formulaire et les alternatives textuelles sont des décisions à prendre aussi tôt que celles concernant la grille, les espacements et la typographie.
Ce guide aborde l’accessibilité non comme un correctif ajouté après coup, mais à travers le focus, les libellés, les alternatives et l’ordre de navigation. Un parcours clair à la souris doit permettre à une personne qui avance uniquement avec la touche Tab d’accomplir la même tâche.
Pourquoi la conception web accessible relève du travail de conception
Si le rapport d’audit accumule des remarques comme « le focus n’est pas visible », « le menu ne s’ouvre pas au clavier » ou « l’icône n’a pas de nom », le problème n’est pas technique : c’est la conception qui n’a pas été suffisamment définie. Ces éléments dépendent de l’agencement de l’interface, du comportement des composants et de la rédaction des contenus.
Dès la conception, définissez ensemble ces quatre éléments :
- Ordre de navigation : Le parcours avec Tab suit-il la hiérarchie visuelle ?
- Focus : L’élément actif est-il visible partout, sans disparaître sous les barres qui restent au-dessus du contenu ?
- Libellé : Le nom visible du bouton, du lien ou du champ correspond-il au nom lu par les technologies d’assistance ?
- Alternative : L’information portée par une image, une icône ou un graphique peut-elle être exprimée sous forme de texte ?
Ces quatre éléments permettent d’accomplir la même tâche en cas d’incapacité temporaire, de limitation motrice, de préférence pour le clavier ou d’utilisation d’un lecteur d’écran. Dans un nouveau projet de conception web , les reléguer à la « qualité du dernier sprint » conduit ensuite à une accumulation de focus défaillants et d’alternatives vides.
Alignez la navigation au clavier sur l’ordre visuel
La personne qui utilise le clavier ne parcourt pas la page du regard : elle suit le point de focus. Celui-ci doit progresser de gauche à droite, de haut en bas, en privilégiant le chemin vers la tâche principale. Si un champ de recherche placé visuellement à gauche arrive en dernier dans l’ordre de tabulation, la conception et le comportement sont dissociés.
Lorsque vous définissez l’ordre de navigation, considérez les règles suivantes comme des décisions de conception :
- Seuls les éléments interactifs sont accessibles avec Tab : liens, boutons, champs de formulaire, menus déroulants et onglets.
- Le texte ordinaire, la surface entière d’une carte ou un bloc décoratif ne reçoivent pas le focus.
- L’ordre visuel et l’ordre du DOM sont identiques. « Corriger » cet ordre avec un tabindex positif n’est qu’un correctif provisoire.
- Un lien permettant de passer directement au contenu principal après le menu supérieur récurrent fait partie des premières mesures utiles lorsque l’en-tête est long.
Rendre toute une carte cliquable est un piège fréquent. Si la carte entière devient un lien géant, Tab s’arrête sur chaque carte et les commandes « consulter » et « comparer » qu’elle contient ne sont pas lues séparément. La solution la plus simple : la carte sert de cadre visuel ; un seul lien ou bouton clairement identifié reçoit le focus. L’ordre reste ainsi court et le nom explicite.
Composant personnalisé, menu et piège de focus
Un menu déroulant prêt à l’emploi, un sélecteur de date ou un sélecteur personnalisé peuvent sembler fonctionner correctement à la souris. Pour le clavier, il faut une machine à états distincte : Entrée ou Espace ouvre le composant, les touches fléchées parcourent les options, Échap le ferme et le focus revient à l’élément déclencheur. Ce ne sont pas des « micro-animations », mais des règles d’interaction.
Ne créez pas de piège de focus, sauf dans une fenêtre modale ou un panneau latéral superposé. Lorsqu’une boîte de dialogue s’ouvre, le focus y est placé, Tab circule à l’intérieur et, à la fermeture, le focus revient au contrôle qui l’a ouverte. Si la page en arrière-plan reste accessible avec Tab, l’utilisateur perd ses repères. Ce comportement vaut également, dans les projets de conception de sites web d’entreprise , pour les formulaires de demande de devis, les panneaux de gestion des cookies ou les sélecteurs de langue.
Une barre supérieure fixe peut masquer le lien qui reçoit le focus. Prévoyez dans la conception un espacement intérieur ou une marge de défilement correspondant à la hauteur de cette barre. Si le focus « existe » mais reste invisible, ce contrôle n’existe pas pour la personne qui utilise le clavier.
Gardez un indicateur de focus visible et cohérent
Supprimer le contour de focus par défaut promet un rendu « plus épuré » à la souris, mais efface l’élément actif au clavier. Si vous supprimez ce contour, remplacez-le par un indicateur de focus au moins aussi visible et cohérent avec votre marque. La couleur au survol ne remplace pas le focus : le survol dépend de la souris, le focus sert à la navigation au clavier.
Les consignes de conception de l’indicateur de focus peuvent rester brèves :
- L’indicateur se distingue aussi bien sur un fond clair que sur un fond sombre.
- Son épaisseur et son décalage empêchent qu’un trait trop fin passe inaperçu.
- Le même langage visuel est utilisé sur tout le site ; un indicateur sur une page et aucune marque sur une autre nuisent à la confiance.
- Le focus n’est pas rogné par des angles arrondis ou une ombre.
Dans les projets KepezWeb, l’indicateur de focus ne doit pas être laissé de côté comme un « détail de développement ». Boutons, liens, onglets, contrôles intégrés aux cartes et champs de formulaire appartiennent à la même famille. Dans la bibliothèque de composants, les états de survol, d’activation et de focus sont dessinés séparément ; le focus n’est pas « une version pâle de l’état actif ».
Les sections sombres, les textes superposés aux images et les calques semi-transparents présentent des risques particuliers pour le focus. Dans la section d’ouverture, un bouton clair sur une photo sombre reste lisible à la souris ; si son indicateur de focus se confond avec la photo, la personne qui utilise le clavier perd ses repères. La couleur du focus doit être définie spécifiquement en fonction du fond de ce bloc.
Alternative textuelle : quand la rédiger et quand la laisser vide
Une alternative textuelle traduit en mots le rôle d’une image. Il ne s’agit pas de rédiger une longue phrase pour chaque visuel. La question est la suivante : sans cette image, la page transmet-elle la même information ?
- Image informative : Produit, équipe, bureau, infographie ou graphique. L’alternative exprime brièvement l’information portée par l’image. « Image1.jpg » ou « photo du produit » ne constituent pas une information.
- Image décorative : Ambiance, texture ou motif destiné à remplir un espace. L’alternative reste vide ; le lecteur d’écran ignore l’image.
- Image répétant le texte : Si le même titre figure déjà à côté, faire lire à nouveau l’image crée du bruit inutile.
- Icône fonctionnelle : Loupe, panier, fermeture ou partage. Indiquez le nom du contrôle, et non une description du visuel : « Rechercher », « Panier », « Fermer ».
Un graphique complexe ne se résume pas en une phrase. Une alternative courte en indique le sujet ; les données essentielles figurent dans un tableau ou dans un résumé placé juste en dessous. « Graphique montrant une hausse des ventes » ne suffit pas : la période et les comparaisons représentées doivent être explicitées par écrit.
Une image placée dans un lien crée un autre piège. Si le logo renvoie vers l’accueil, l’alternative est le nom de la marque, et non « logo ». Si une image de produit sert de lien, l’alternative ne répète pas le nom du produit ; si le lien a pour fonction d’« accéder aux détails du produit », cette fonction doit être exprimée par un texte visible ou un nom accessible. La même logique est utile lors d’un audit SEO technique : une alternative vide ou répétitive nuit aussi bien aux technologies d’assistance qu’à la compréhension du contexte de l’image.
Bouton à icône et appel à l’action uniquement visuel
Une icône sans texte peut sembler « compréhensible » à la souris. Pour le clavier et le lecteur d’écran, un contrôle dépourvu de nom visible reste muet. Les icônes de cœur, de trois points, de flèche et de fermeture doivent être accompagnées d’un texte court ou d’un nom accessible cohérent. Ce nom ne doit pas contredire le libellé visible : un bouton affichant « Envoyer » ne doit pas être lu comme « Transmettre le formulaire » en arrière-plan.
Une image d’arrière-plan intégrée en CSS ne possède pas d’attribut alt. Si une information est incorporée à cette image, reprenez-la dans le texte HTML. Si une date de campagne, un prix ou un avertissement figurent uniquement dans l’image, ce contenu n’existe pas pour les personnes qui ne peuvent pas la voir. N’intégrez pas aux images des engagements variables comme un prix ou une durée ; conservez-les dans la couche textuelle.
Libellé, nom accessible et lien d’évitement
Le libellé visible est la source du nom accessible. Un texte indicatif ne remplace pas un libellé. Le texte indicatif « Votre nom » disparaît une fois le champ rempli ; en cas d’erreur, l’utilisateur ne voit plus ce qui lui était demandé. Le libellé reste à l’extérieur du champ, lui est associé par programmation et le message d’erreur décrit le champ concerné.
Les attributs ARIA ne remplacent pas le HTML sémantique. Un bouton est un bouton, un lien est un lien. Ajouter après coup la prise en charge du clavier et un nom à un div cliquable coûte davantage que de choisir le bon élément dès le départ. Utilisez ARIA pour combler une lacune dans un composant réellement personnalisé.
Le lien d’évitement (« aller au contenu ») est le premier élément pouvant recevoir le focus et devient visible lorsqu’il le reçoit. Un lien d’évitement laissé invisible, qui n’apparaît pas non plus au focus, revient à ne pas exister. Sur les longues pages d’entreprise, ce petit contrôle évite de devoir parcourir tout le menu à chaque fois.
La langue, la hiérarchie des titres et les régions de repérage contribuent également à la navigation. Une simple accumulation de h2 ou trois régions « contenu principal » perturbent aussi bien la navigation au clavier que la liste des titres du lecteur d’écran. Un titre n’est pas une taille visuelle, mais un repère structurel ; un texte de grande taille peut ne pas être un élément de titre, tandis qu’un petit libellé peut constituer un véritable titre.
Les points à vérifier dès la conception
La comparaison ci-dessous résume les décisions à prendre et à quel stade les prendre, ainsi que les correctifs appliqués après coup.
| Décision | À définir dès la conception | Correctif après coup |
|---|---|---|
| Ordre de navigation | La hiérarchie visuelle et l’ordre du DOM sont définis ensemble | L’ordre est forcé avec tabindex et des éléments de focus masqués |
| Indicateur de focus | Distinct du survol et visible sur tous les composants | Le contour est supprimé, puis réintroduit sur une seule page |
| Alternative textuelle | Le rôle du visuel est précisé : information / décoration / contrôle | Un nom de fichier ou un texte « image » sans valeur informative est ajouté |
| Libellé et nom | Le texte visible correspond au nom accessible | Seul un texte indicatif ou une icône est conservé |
| Fenêtre et menu | Des règles d’ouverture, de fermeture et de restitution du focus sont définies | La fermeture fonctionne à la souris, mais Échap et Tab ne fonctionnent pas |
Effectuez la vérification en débranchant la souris. Accomplissez la tâche principale uniquement au clavier : accéder à un service depuis le menu, envoyer le formulaire, ouvrir le lien principal d’une carte, fermer la fenêtre modale. Si le focus disparaît à un endroit, si l’ordre revient brusquement en arrière ou si le nom n’est pas annoncé, ce qui manque n’est pas un « module d’accessibilité », mais la définition des règles de conception de ce composant.
Toute tâche accomplie à la souris doit pouvoir l’être également au clavier, dans le même ordre et avec les mêmes noms.
Questions fréquentes
L’accessibilité concerne-t-elle uniquement les personnes en situation de handicap permanent ?
Non. Un bras cassé, un soleil intense, une souris défectueuse ou la simple habitude d’utiliser le clavier révèlent les mêmes lacunes. Si la conception les comble en amont, la tâche ne dépend pas d’un seul mode de saisie.
La suppression du contour de focus nuit-elle à l’image de marque ?
Supprimer le contour sans laisser de repère est nuisible ; un indicateur de focus cohérent et adapté à la marque ne l’est pas. Utiliser le style de survol comme indicateur de focus ne suffit pas. L’indicateur doit être vérifié séparément sur les fonds sombres et clairs.
Faut-il rédiger un texte alternatif pour chaque image ?
Non. Une image informative reçoit une alternative courte et exacte. Pour une image décorative, l’alternative reste vide. Pour un bouton à icône, il faut indiquer le nom du contrôle, et non décrire le visuel.
L’utilisation d’ARIA rend-elle une page accessible ?
Pas à elle seule. Les éléments HTML appropriés, les libellés visibles, l’ordre de navigation au clavier et la visibilité du focus font l’essentiel du travail. ARIA sert à combler les lacunes restantes d’un composant personnalisé ; un usage incorrect d’ARIA peut être plus déroutant qu’un contrôle muet.
Quand devez-vous tester ces éléments ?
Dès le premier dessin du composant. Effectuez un parcours au clavier avant de valider le menu, le formulaire, la fenêtre modale et le modèle de carte. Une seule vérification avant la mise en ligne ne permet pas de corriger à moindre coût des décisions de focus et de libellé qui n’ont pas été prises suffisamment tôt.
Si vous souhaitez définir dès le départ l’ordre de navigation au clavier, l’indicateur de focus et les alternatives textuelles pour un nouveau site ou une refonte, précisez le périmètre avec l’équipe KepezWeb. Pour obtenir un devis adapté à vos besoins, il vous suffit de laisser un court message.
