L’anti-modèle de l’ancre sans href
Découvrez pourquoi un faux lien gêne les utilisateurs du clavier et des lecteurs d’écran.
L’anti-modèle de l’ancre sans href est une leçon Web Accessibility Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Web Accessibility Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Web Accessibility Academy comprend 4 leçons au total.
Le faux lien
Un anti-modèle courant consiste à utiliser une ancre sans href et à lui associer un gestionnaire de clic pour la faire agir comme un bouton. Cela semble correct, mais provoque des problèmes.
<a onclick="openMenu()">Menu</a>Sans href, pas de lien
Une ancre ne compte comme véritable lien que lorsqu’elle possède un href. Sans lui, le navigateur ne la considère pas du tout comme interactive.
Elle sort de l’ordre de tabulation
Une ancre sans href ne peut pas recevoir le focus. Les utilisateurs du clavier qui parcourent la page avec la touche Tab passent donc directement devant et ne peuvent jamais l’atteindre.
Le clavier ne peut pas l’activer
Même si vous forcez le focus sur cette ancre, un lien factice ignore par défaut les touches Entrée et Espace : les utilisateurs du clavier ne peuvent donc toujours pas l’activer.
Les lecteurs d’écran sont déroutés
Sans href, un lecteur d’écran peut ne pas annoncer l’ancre comme un lien. Les utilisateurs ne découvrent alors jamais qu’ils peuvent l’utiliser.
L’astuce du dièse dans href
Certains corrigent cela avec un href contenant uniquement un dièse. L’élément peut alors recevoir le focus, mais la page remonte aussi en haut, ce qui est déroutant.
<a href="#" onclick="openMenu()">Menu</a>La véritable solution
Si le contrôle effectue une action, utilisez un véritable bouton. Vous obtenez gratuitement le focus, la prise en charge du clavier et le rôle approprié.
<button type="button" onclick="openMenu()">Menu</button>Quand il doit s’agir d’un lien
Si le contrôle assure réellement une navigation, conservez l’ancre, mais donnez-lui un véritable href pointant vers la destination.
<a href="/menu">Menu</a>Pourquoi fait-on cela ?
Les développeurs choisissent souvent une ancre pour son soulignement. Mais vous pouvez styliser un bouton à la place, sans sacrifier l’accessibilité.
Le curseur ment aussi
Une ancre sans href perd même par défaut son curseur en forme de pointeur, ce qui indique aux utilisateurs voyants que rien n’est réellement cliquable ici.
L’idée à retenir
Ne simulez pas l’interactivité. Choisissez un véritable bouton pour les actions ou une ancre avec un href pour la navigation, et évitez les solutions de contournement.
Vérification rapide
Pourquoi une ancre sans href, mais avec un gestionnaire de clic, pose-t-elle problème ?
Récapitulatif
Une ancre sans href est un faux lien : elle ne peut recevoir le focus et ne fonctionne pas au clavier. Utilisez un bouton pour les actions et un véritable href pour la navigation. ✅
Questions Fréquemment Posées
La leçon « L’anti-modèle de l’ancre sans href » est-elle gratuite ?
Oui — le texte complet de « L’anti-modèle de l’ancre sans href » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Web Accessibility Academy, passe à CoddyKit PRO. Le cours Web Accessibility Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « L’anti-modèle de l’ancre sans href » ?
Découvrez pourquoi un faux lien gêne les utilisateurs du clavier et des lecteurs d’écran. Tu pratiques Web Accessibility Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Web Accessibility Academy ?
Aucune expérience préalable n'est requise. Web Accessibility Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « L’anti-modèle de l’ancre sans href » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Web Accessibility Academy ?
Oui. Chaque leçon Web Accessibility Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Les liens mènent quelque part, les boutons font quelque chose
- Un texte de lien compréhensible hors contexte
- Des boutons qui annoncent leur action
- L’anti-modèle de l’ancre sans href