` référencé dans le SVG — l'`aria-label` sur le lien est le plus simple et le plus robuste. À noter : l'icône WhatsApp a aussi un problème de contraste (1.98:1) — traité en [issue 05](05-contrastes.md), même composant, même PR. ## Vérification ```js [...document.querySelectorAll('a,button')].filter(e => !e.textContent.trim() && !e.getAttribute('aria-label') && !e.querySelector('img[alt]:not([alt=""])') ).length // attendu : 0, sur chaque page type ``` - Commande vocale : « cliquer sur Appeler

# 07 — Icônes de nav sans nom accessible (WhatsApp, téléphone) > **Item** : Empty links and buttons — tier **avoid** (anti-pattern à éliminer) > **Verdict** : 🔴 **FAIL** · **Priorité : P2 — fix de 10 minutes** ## Constat Deux liens de la zone contact rapide de la navigation principale — présents sur **toutes les pages** — sont vides pour l'accessibilité : ```html ``` Un lecteur d'écran annonce « lien » sans plus ; la commande vocale ne peut pas les cibler (« cliquer sur WhatsApp » ne correspond à rien). Ce sont pourtant **les deux raccourcis de contact d'un service d'urgence** — les contrôles les plus critiques du site. Contraste révélateur : les icônes sociales du footer (Facebook/X/Instagram) ont, elles, un `aria-label="Suivez ABC Guêpes sur …"` correct. Le bon pattern existe déjà dans la codebase — il n'a juste pas été appliqué à la nav. ## Correctif ```html ``` - `aria-label` décrit **l'action**, pas l'icône (« Nous contacter sur WhatsApp », pas « logo WhatsApp »). - `aria-hidden="true"` + `focusable="false"` sur le SVG pour qu'il ne double pas l'annonce. - Alternative équivalente : un `