Composant natif qui permet de gérer l'affichage et le masquage d’une zone. Voir également notre page de tests pour le motif ARIA disclosure.

Les tests sont en priorité réalisés à l’aide des flèches de direction (haut, bas). S'il y a des différences de restitution en accès par la touche tab, elles sont notées.

Implémentation native

dépliez-moi

Une liste de liens :

<details>
 <summary>dépliez-moi</summary>
 <p>Une liste de liens :</p>
 <ul>
  <li><a href="#">Accueil</a></li>
  <li><a href="#">Rubrique 1</a></li>
  <li><a href="#">Rubrique 2</a></li>
 </ul>
</details>
Support de details en fonction du lecteur d’écran
NVDA 2018.2.1 JAWS 18 JAWS 2018 VoiceOver
Firefox 61 comportement conforme : « bouton réduit, dépliez-moi » (ouvert : « développé ») non applicable comportement et restitution conformes : « dépliez-moi, bouton réduit » (ouvert : « dépliez-moi, bouton étendu ») non applicable
Internet Explorer 11 non applicable élément non supporté non applicable élément non supporté non applicable élément non supporté non applicable
Edge 42 non applicable élément non supporté non applicable élément non supporté non applicable élément non supporté non applicable
Chrome 67 comportement et restitution conformes : « bouton réduit, dépliez-moi » (ouvert : « développé ») comportement et restitution conformes : « dépliez-moi, bouton réduit » (ouvert : « dépliez-moi, bouton étendu ») comportement et restitution conformes : « dépliez-moi, bouton réduit » (ouvert : « dépliez-moi, bouton étendu ») non applicable
Safari 11.1 (macOS High Sierra 10.13.4) non applicable non applicable non applicable comportement et restitution conformes : « dépliez-moi, condensé, résumé » (ouvert : « étendu »)

Mobile

Support de details en fonction du lecteur d’écran sur mobile
VoiceAssistant Talkback 6.1 VoiceOver
Firefox 61 restitution non conforme : « dépliez-moi » restitution non conforme : « dépliez-moi » non applicable
Internet 7 / 6.4 restitution conforme, mais comportement non conforme : « dépliez-moi, triangle d’expansion, réduit » (le composant ne fonctionne pas avec le lecteur d’écran) comportement et restitution conformes : « Regroupé, dépliez-moi triangle d’expansion, action développer, appuyez deux fois pour activer » (ouvert : « Développé, dépliez-moi, triangle d’expansion, action réduire, appuyez deux fois pour activer ») non applicable
Chrome 68 restitution conforme : « dépliez-moi, triangle d’expansion, réduit, double appui pour activer » (ouvert : « développé ») comportement et restitution conformes : « Regroupé, dépliez-moi triangle d’expansion, action développer, appuyez deux fois pour activer » (ouvert : « Développé ») non applicable
Safari (iOS 10.3.3) non applicable non applicable comportement et restitution conformes : « dépliez-moi, condensé » (ouvert : « Sélectionné »)

Notes annexes

Attribut open

Lorsque l'élément est ouvert, <details> prend automatiquement l'attribut open. L'attribut est supprimé du DOM lorsqu'il est refermé.

Ceci permet de détecter l'état de l'élément en JavaScript, mais également en CSS :


summary::after {/** quand le composant est fermé **/
  content: "+";
}

details[open] summary::after {/**quand le composant est ouvert**/
  content: "-";
}

Evénement toggle

L'élément <details> prend en charge l'évènement toggle en JavaScript, dont la valeur dépend de son état ouvert/fermé. Voir la documentation Mozilla à ce propos.

Ressources