Elemento HTML5 semanticamente accurato per una finestra di dialogo modale

Question

Mi chiedevo cosa avrebbero pensato alcuni dei miei colleghi sviluppatori/progettisti web come il miglior elemento HTML 5 da utilizzare per una finestra di dialogo modale come lightbox, superbox, thickbox o qualsiasi altra cosa potrebbe essere il sapore.

Dato che questi tipi di UI non seguono il flusso tipico di una pagina Web "normale" (che, a quanto pare, secondo i guru delle specifiche HTML 5 è, essenzialmente, un blog), essi non sono realmente in posizione come un <header>, <nav>, <section>, <article> o uno <footer> (tra gli altri nuovi elementi "semantici").

Naturalmente, c'è sempre il <div>, ma, stavo solo pensando che ci potrebbe essere qualcosa di un po 'più semanticamente accurato.

Sfortunatamente, non c'è l'elemento <modal>. Quali sono i tuoi pensieri su se ce ne dovrebbe essere uno nella specifica? E poiché l'elemento non esiste, quale sarebbe la tua prossima scelta migliore?

Answer 1

<aside> sembra appropriato. La specifica corrente con sezioni grassetto:

l'elemento aside rappresenta una sezione di una pagina che consiste di contenuti che è tangenzialmente relativi al contenuto intorno all'elemento a parte, e che potrebbe essere considerato separato da quel contenuto. Tali sezioni sono spesso rappresentate come barre laterali nella tipografia stampata .

L'elemento può essere utilizzato per effetti tipografici come le virgolette estraibili o barre laterali, per la pubblicità, per gruppi di elementi nav, e per altri contenuti che è considerato separato dal contenuto principale della pagina.

In questo caso, un modale è "tangenzialmente correlato" all'azione che lo ha causato. Mentre normalmente ci si può aspettare che una parte sia in una barra laterale, uno degli scopi del contenuto semantico è quello di consentire una versatilità che non è limitata dalle caratteristiche fisiche della pagina. L'ultima frase della specifica sembra implicare solo questo versatile caso d'uso.

Answer 2

L'attuale bozza di HTML ha un elemento dialog. È stato rimosso a un certo punto ma è tornato.

L'elemento finestra rappresenta una parte di un'applicazione che un utente interagisce con per eseguire un'operazione, ad esempio una finestra di dialogo, ispettore, o finestra.

Per accessibilità (fino a quando l'elemento è più ampiamente supportato) Includerei anche lo dialog ARIA role.

Per ottenere l'API JavaScript nei browser che non supportano nativamente l'elemento <dialog>, è possibile utilizzare uno polyfill.