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
<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>| 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
| 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.