Elément HTML5 sémantiquement précis pour une boîte de dialogue modale

Question

Je me demandais ce que certains de mes collègues concepteurs/concepteurs web pensaient être le meilleur élément HTML 5 à utiliser pour un dialogue modal comme une lightbox, superbox, thickbox, ou quel que soit votre favori la saveur peut arriver à être.

Étant donné que ces types d'IU ne suivent pas le flux typique d'une page Web «normale» (qui, apparemment, selon HTML 5 spec gourous est, essentiellement, un blog), ils ne tombent pas vraiment en place comme un <header>, <nav>, <section>, <article>, ou un <footer> (parmi d'autres nouveaux éléments «sémantiques») pourrait.

Bien sûr, il y a toujours le <div>, mais je pensais juste qu'il pourrait y avoir quelque chose d'un peu plus précis sur le plan sémantique.

Malheureusement, il n'y a pas d'élément <modal>. Que pensez-vous de savoir s'il devrait y en avoir un dans la spécification? Et puisque l'élément n'existe pas, quel serait votre meilleur choix?

Answer 1

<aside> semble approprié. La spécification actuelle avec les sections pertinentes en gras:

Le côté élément représente une section d'une page qui se compose de contenu qui est tangentiellement liée au contenu autour de l'élément de côté, et qui pourrait être considéré comme distinct à partir de ce contenu. De telles sections sont souvent représentées sous forme de barres latérales en typographie imprimée.

L'élément peut être utilisé pour effets typographiques comme des citations de traction ou sidebars, pour la publicité, pour groupes d'éléments de nav, et pour tout autre contenu qui est considéré comme distinct du contenu principal de la page.

Dans ce cas, un modal est "lié tangentiellement" à l'action qui l'a causé. Bien que l'on puisse normalement s'attendre à ce qu'une mise de côté apparaisse dans une barre latérale, l'un des objectifs du contenu sémantique est de permettre une polyvalence qui n'est pas restreinte par les caractéristiques physiques de la page. La dernière phrase de la spec semble impliquer juste ce cas d'utilisation polyvalent.

Answer 2

La version actuelle du code HTML a un élément dialog. Il a été retiré à un moment donné, mais il est de retour.

L'élément de dialogue représente une partie d'une application que l'utilisateur interagit avec pour exécuter une tâche, par exemple une boîte de dialogue, un inspecteur, ou fenêtre.

Pour l'accessibilité (jusqu'à ce que l'élément soit plus largement supporté) j'inclurais aussi le dialog ARIA role. Pour obtenir l'API JavaScript dans les navigateurs qui ne supportent pas nativement l'élément <dialog>, vous pouvez utiliser un polyfill.