# Popover natif : quel effet sur l’accessibilité des menus déroulants

> L'attribut popover gère nativement le focus, la fermeture au clavier et l'empilement d'affichage. De quoi remplacer une bonne partie du JavaScript maison des menus de filtre.

- Auteur : Clément Hadrot
- Publié le : 2025-08-19
- Mis à jour le : 2025-08-19
- Catégorie : Accessibilité
- URL : https://wpmoderne.dev.wordpress-developpement.fr/accessibilite/popover-natif-effet-accessibilite-menus-deroulants/

## L’essentiel

- L'attribut popover ferme la couche au clavier sans script
- Le focus revient automatiquement sur le déclencheur
- Les cas de menus complexes restent à vérifier au cas par cas

« The popover attribute is used to designate an element as a popover element. » La définition du HTML Living Standard tient en une phrase, mais ce qu'elle recouvre change concrètement la manière d'écrire un menu déroulant depuis que le support est devenu fiable sur les navigateurs majeurs.

Avant cet attribut, un menu de filtre accessible nécessitait presque toujours du JavaScript maison pour gérer trois choses : fermer le menu au clic extérieur, fermer le menu à la touche Échap, et replacer le focus sur le bouton déclencheur à la fermeture. L'attribut `popover` prend en charge ces trois comportements nativement.

## Ce que fait réellement l'attribut popover

La mise en œuvre la plus simple associe un bouton déclencheur et un conteneur marqué `popover` :

```
<button popovertarget="filtre-couleurs">
  Filtrer par couleur
</button>

<div id="filtre-couleurs" popover>
  <fieldset>
    <legend>Couleurs disponibles</legend>
    <label><input type="checkbox" name="couleur" value="bleu"> Bleu</label>
    <label><input type="checkbox" name="couleur" value="vert"> Vert</label>
  </fieldset>
</div>
```

Sans une seule ligne de script, ce menu se ferme à la touche Échap, se ferme au clic en dehors de sa zone, s'affiche au-dessus du reste du contenu grâce à la couche *top layer* du navigateur, et rend le focus au bouton qui l'a ouvert. Le navigateur associe aussi automatiquement les deux éléments par un rôle implicite qui aide les technologies d'assistance à comprendre la relation déclencheur-contenu.

## Ce qui reste à la charge du développeur

L'attribut popover gère l'ouverture, la fermeture et le focus au niveau du conteneur, mais il ne gère pas la navigation interne au menu. Si le menu de filtre contient plusieurs groupes de cases à cocher, la navigation par flèches entre les options reste un choix de conception à implémenter séparément, tout comme l'annonce du nombre de filtres actifs.

- Le focus initial à l'ouverture reste sur le premier élément focusable du conteneur par défaut, ce qui convient bien à un menu de filtre mais peut nécessiter un ajustement pour un menu d'actions.
- L'attribut `popover="manual"` permet de désactiver la fermeture automatique au clic extérieur, utile si le contenu comporte lui-même des éléments qui ouvrent d'autres calques.
- Les événements `toggle` et `beforetoggle` permettent de synchroniser un état visuel (icône de flèche, texte du bouton) avec l'ouverture réelle du popover.

> L'essentiel à retenir : L'attribut popover ferme la couche au clavier sans script ; Le focus revient automatiquement sur le déclencheur ; Les cas de menus complexes restent à vérifier au cas par cas

## Où l'attribut popover ne suffit pas

Pour un menu de filtre simple, le gain est net. Pour une fenêtre modale complète avec formulaire, étapes multiples et piège de focus intentionnel, l'élément `<dialog>` reste plus adapté : il porte une sémantique de boîte de dialogue explicite et un mode modal qui bloque réellement l'interaction avec le reste de la page, ce que le popover ne fait pas par défaut. Les deux mécanismes répondent à des besoins différents et ne s'excluent pas : un site peut très bien utiliser `popover` pour ses menus contextuels et `<dialog>` pour ses fenêtres modales.

| Besoin | Solution adaptée |
| --- | --- |
| Menu de filtre, info-bulle, menu contextuel | Attribut popover |
| Formulaire modal bloquant, confirmation critique | Élément dialog en mode modal |

## Le résultat sur un cas concret

Sur un menu de filtre converti récemment, le remplacement du gestionnaire de clic extérieur, de l'écouteur de touche Échap et de la logique de restitution du focus a permis de retirer une quarantaine de lignes de JavaScript maison, remplacées par un seul attribut et deux lignes de synchronisation visuelle sur l'événement `toggle`. La logique métier du filtre, elle, n'a pas bougé d'un octet.

> Conseil maison : ne convertissez pas tous vos calques d'un coup. Commencez par les menus contextuels non bloquants, les plus simples, avant de vous attaquer aux cas plus riches.

## En résumé

L'attribut popover ne remplace pas toute réflexion sur l'accessibilité d'un menu déroulant, mais il retire une bonne partie du code répétitif qui accompagnait chaque nouvelle implémentation. Pour un menu de filtre classique, la bascule est presque toujours positive : moins de code à maintenir, un comportement clavier cohérent avec celui que les utilisateurs connaissent déjà sur d'autres sites, et un focus qui revient toujours au bon endroit.