Tab, encore Tab, et le focus disparaît complètement de l’écran : ce symptôme, sur un menu construit avec les éléments Nested Tabs ou Nested Accordion d’Elementor, trahit presque toujours un contenu masqué qui reste accessible au clavier alors qu’il ne devrait pas l’être. Aucun outil automatisé ne détecte fiablement ce genre de piège : seule une vérification manuelle, touche par touche, le révèle.
Pourquoi les éléments imbriqués posent ce risque particulier
Les widgets Nested Tabs et Nested Accordion d’Elementor permettent d’imbriquer des conteneurs entiers dans un onglet ou un panneau d’accordéon, contrairement aux anciens widgets Tabs et Accordion qui n’acceptaient que du texte simple. Cette richesse de contenu, pratique pour construire des menus complexes ou des interfaces à onglets élaborées, augmente aussi le nombre de liens et de boutons potentiellement présents dans un panneau fermé, donc invisible à l’écran mais parfois toujours accessible par la touche Tab si le masquage n’est pas correctement géré.
La checklist de vérification manuelle
- Naviguer uniquement au clavier, en débranchant mentalement la souris : utiliser Tab pour avancer, Maj + Tab pour reculer, Entrée ou Espace pour activer un élément actif.
- Vérifier que le focus reste visible en permanence. Un contour de focus qui disparaît sur un onglet ou un bouton d’accordéon empêche de savoir où l’on se trouve dans la navigation.
- Ouvrir un onglet, puis appuyer sur Tab plusieurs fois, pour vérifier que le focus circule uniquement dans le contenu visible de l’onglet actif, jamais dans un onglet fermé situé plus loin dans le DOM.
- Fermer un accordéon dont le contenu contient un lien, puis appuyer sur Tab depuis l’en-tête de l’accordéon précédent. Le focus ne doit jamais s’arrêter sur ce lien devenu invisible.
- Tester la touche Échap sur un sous-menu ou un panneau ouvert, quand le comportement attendu du composant le prévoit, pour vérifier qu’elle referme correctement l’élément sans perdre le focus.
Ce que révèle un focus piégé
Quand le focus atterrit sur un lien invisible, deux causes techniques reviennent le plus souvent : le panneau fermé n’utilise pas l’attribut hidden ou une propriété CSS équivalente qui retire réellement l’élément de l’ordre de tabulation, ou un widget tiers ajouté à l’intérieur du panneau réintroduit son propre focus indépendamment du composant Nested Tabs qui l’englobe. Ce second cas est plus difficile à corriger : il demande souvent d’ajouter un attribut tabindex="-1" conditionnel sur l’élément fautif via une personnalisation CSS ou JavaScript ciblée.
Ce que cette vérification ne remplace pas
Ce contrôle manuel se concentre sur le comportement du clavier. Il ne remplace pas un audit complet d’accessibilité, qui couvre aussi le contraste des couleurs, la structure des titres, ou la compatibilité avec un lecteur d’écran. Sur un menu complexe destiné à un site soumis à une obligation d’accessibilité renforcée, ce test clavier constitue un premier filtre rapide, à réitérer après chaque modification du menu, avant un audit plus formel si le contexte l’exige.
Un menu qui semble parfaitement accessible visuellement peut piéger un utilisateur naviguant au clavier sans qu’aucun signal visuel n’alerte l’équipe qui l’a construit. La seule façon de le savoir reste de débrancher la souris et d’essayer soi-même.
Corriger sans reconstruire le menu
La plupart des blocages de focus se corrigent sans reconstruire le menu entièrement : un ajustement CSS ciblé sur la propriété visibility ou display des panneaux fermés suffit généralement à retirer leur contenu de l’ordre de tabulation. Le point de vigilance porte sur les widgets tiers ajoutés à l’intérieur d’un onglet ou d’un accordéon, qui doivent être testés individuellement plutôt que supposés compatibles par défaut.
En résumé
Trois touches, Tab, Entrée et Échap, suffisent à révéler la grande majorité des pièges de focus clavier sur un menu construit avec les éléments imbriqués d’Elementor. Cette vérification manuelle, rapide et sans outil, doit devenir un réflexe systématique après toute construction ou modification d’un menu à onglets ou en accordéon, avant qu’un utilisateur ne se retrouve bloqué en navigation clavier.
