Elemento HTML5 semánticamente exacto para un cuadro de diálogo modal

Question

Me preguntaba qué sentirían algunos de mis compañeros desarrolladores/diseñadores web como el mejor elemento HTML 5 para un cuadro de diálogo modal como lightbox, superbox, thickbox o cualquiera que sea su favorito sabor puede ser.

Dado que estos tipos de IU no siguen el flujo típico de una página web "normal" (que, aparentemente, de acuerdo con los expertos en HTML 5 es, esencialmente, un blog), realmente no encajan en su lugar como un <header>, <nav>, <section>, <article>, o un <footer> (entre otros nuevos elementos 'semánticos') podría.

Por supuesto, siempre está el <div>, pero estaba pensando que podría haber algo más semánticamente preciso.

Desafortunadamente, no hay elemento <modal>. ¿Cuáles son sus pensamientos sobre si debería haber uno en la especificación? Y dado que el elemento no existe, ¿cuál sería tu próxima mejor opción?

Answer 1

<aside> parece apropiado. La especificación actual con secciones relevantes en negrita:

El elemento de lado representa una sección de una página que consta de contenido que es tangencialmente relacionado con el contenido alrededor del elemento a un lado, y que podría ser considerado por separado de ese contenido. Tales secciones son a menudo representadas como barras laterales en la tipografía impresa .

El elemento puede ser utilizado para efectos tipográficos como cotizaciones de tracción o barras laterales, para la publicidad, por grupos de elementos de navegación, y por otra contenido que se considera por separado del contenido principal de la página.

En este caso, un modal es "tangencialmente relacionado" con la acción que lo causó. Aunque normalmente puede esperar que un lado esté en una barra lateral, uno de los propósitos del contenido semántico es permitir una versatilidad que no esté restringida por las características físicas de la página. La última frase de la especificación parece implicar solo este caso de uso versátil.

Answer 2

El borrador actual de HTML tiene un elemento dialog. Fue eliminado en un punto, pero está de vuelta.

El elemento de diálogo representa una parte de una aplicación que un usuario interactúa con para realizar una tarea, por ejemplo, un cuadro de diálogo, inspector, o ventana.

Para la accesibilidad (hasta que el elemento sea más ampliamente compatible) también incluiría el dialog ARIA role.

Para obtener la API de JavaScript en los navegadores que no admiten de forma nativa el elemento <dialog>, puede usar un polyfill.