Quando si etichetta un elemento non di input senza interattività, ad esempio un'anteprima <img>, è meglio (o corretto) utilizzare <span> anziché <label>?È buona norma utilizzare <label> per elementi non di input/non interattivi?
es .:
<span>Image preview:</span>
<img id="preview">
o questo:
<label for="preview">Image preview:</label>
<img id="preview">
Il tag <label> definisce un'etichetta per un elemento <input>.
Quindi utilizzare <span>.
L'attributo per associa l'etichetta con un elemento di controllo, come definito nella descrizione dell'etichetta nella specifica HTML 4.01. Ciò implica, tra le altre cose, che quando l'elemento etichetta riceve il focus (ad esempio facendo clic su di esso), passa lo stato attivo al controllo associato. L'associazione tra un'etichetta e un controllo può anche essere utilizzata dagli interpreti vocali, che possono fornire all'utente un modo per chiedere quale sia l'etichetta associata, quando si ha a che fare con un controllo. (L'associazione potrebbe non essere così evidente come nel rendering visivo.
Le specifiche HTML non rendono obbligatorio associare le etichette ai controlli, ma le Linee guida per l'accessibilità del contenuto del Web (WCAG) 2.0 sono descritte nel documento tecnico H44: Usare gli elementi etichetta per associare etichette di testo con controlli di modulo, il che spiega anche che l'associazione implicita (nidificando, ad esempio, l'input all'interno dell'etichetta) non è ampiamente supportata come l'associazione esplicita tramite attributi for e id,
Figura/figcaption potrebbe essere migliore di span, ma tu scrivi che usare un'etichetta è completamente sbagliato (al punto di non essere valido poiché le specifiche HTML richiedono che sia associato a un controllo di modulo (anche se textareas e select vanno bene, non è necessario essere un input)). – Quentin
Non avevo mai sentito prima che l'associazione implicita di etichette non fosse supportata come esplicita, quindi ho deciso di dare seguito a questo. Penso che tu ti stia riferendo a [Note di supporto per l'agente utente per H44] (https://www.w3.org/WAI/WCAG20/Techniques/ua-notes/html#H44). Le note descrivono che questo è stato testato su Windows XP con IE 6.0. È abbastanza obsoleto. Sarei interessato a vedere se ci sono informazioni più aggiornate su questo. –
È stato appena controllato il [file di test AT Paciello per le etichette] (https://thepaciellogroup.github.io/AT-browser-tests/test-files/label.html) utilizzando NVDA in IE 11 su Windows 10: input nidificati nelle etichette sono supportati –