ARIA (Accessible Rich Internet Applications) definisce un modo per rendere i contenuti e le applicazioni web più accessibili alle persone con disabilità.

L'attributo hidden è nuovo in HTML5 e dice ai browser di non visualizzare l'elemento. La proprietà aria-hidden dice ai lettori di schermo se devono ignorare l'elemento. Dai un'occhiata ai documenti w3 per maggiori dettagli:

https://www.w3.org/WAI/PF/aria/states_and_properties#aria-hidden

L'uso di questi standard può rendere più facile l'uso del web per le persone disabili.

Un attributo nascosto è un attributo booleano (True/False). Quando questo attributo è usato su un elemento, rimuove tutta la rilevanza di quell'elemento. Quando un utente visualizza la pagina html, gli elementi con l'attributo hidden non dovrebbero essere visibili.

Esempio:

    <p hidden>You can't see this</p>

Gli attributi Aria-hidden indicano che l'elemento e TUTTI i suoi discendenti sono ancora visibili nel browser, ma saranno invisibili agli strumenti di accessibilità, come gli screen reader.

Esempio:

    <p aria-hidden="true">You can't see this</p>

Dai un'occhiata a questo. Dovrebbe rispondere a tutte le tue domande.

Nota: ARIA sta per Accessible Rich Internet Applications

Fonti: Gruppo Paciello

Differenza semantica.

Secondo HTML 5.2:

Quando è specificato su un elemento, [l'attributo hidden] indica che l'elemento non è ancora, o non è più, direttamente rilevante per lo stato corrente della pagina, o che è usato per dichiarare il contenuto da riutilizzare da altre parti della pagina invece di essere direttamente accessibile all'utente.

Gli esempi includono una lista di schede in cui alcuni pannelli non sono esposti, o una schermata di log-in che sparisce dopo che l'utente ha effettuato il login. Mi piace chiamare queste cose "temporalmente rilevanti", cioè sono rilevanti in base al tempo.

D'altra parte, ARIA 1.1 dice:

[Lo stato aria-hidden indica se un elemento è esposto all'API di accessibilità.

In altre parole, gli elementi con aria-hidden="true" sono rimossi dall'albero dell'accessibilità, che la maggior parte delle tecnologie assistive rispetta, e gli elementi con aria-hidden="false" saranno sicuramente esposti all'albero. Gli elementi senza l'attributo aria-hidden sono nello stato "undefined (default)", il che significa che gli interpreti dovrebbero esporli all'albero in base alla loro resa. Ad esempio, un interprete può decidere di rimuoverlo se il colore del testo corrisponde al colore dello sfondo.

Ora confrontiamo la semantica. È appropriato usare hidden, ma non aria-hidden, per un elemento che non è ancora "temporalmente rilevante", ma che potrebbe diventare rilevante in futuro (nel qual caso si userebbero script dinamici per rimuovere l'attributo hidden). Al contrario, è appropriato usare aria-hidden, ma non hidden, su un elemento che è sempre rilevante, ma con il quale non si vuole ingombrare l'API di accessibilità; tali elementi potrebbero includere "flair visivi", come icone e/o immagini che non sono essenziali per il consumo da parte dell'utente.

Efficace differenza.

La semantica ha effetti prevedibili nei browser/user agent. La ragione per cui faccio una distinzione è che il comportamento dell'interprete è raccomandato, ma non richiesto dalle specifiche.

L'attributo hidden dovrebbe nascondere un elemento da tutte le presentazioni, incluse le stampanti e gli screen reader (assumendo che questi dispositivi rispettino le specifiche HTML). Se vuoi rimuovere un elemento dall'albero dell'accessibilità anche dai media visivi, hidden farebbe al caso tuo. Tuttavia, non usare hidden solo perché vuoi questo effetto. Chiediti prima se hidden è semanticamente corretto (vedi sopra). Se hidden non è semanticamente corretto, ma vuoi comunque nascondere visivamente l'elemento, puoi usare altre tecniche come i CSS.

Gli elementi con aria-hidden="true" non sono esposti all'albero dell'accessibilità, quindi per esempio gli screen reader non li annunceranno. Questa tecnica dovrebbe essere usata con attenzione, poiché fornirà esperienze diverse a utenti diversi: gli interpreti accessibili non li annunceranno/renderanno, ma saranno comunque resi sugli interpreti visuali. Questa può essere una buona cosa se fatta correttamente, ma ha il potenziale per essere abusata.

Differenza sintattica

Infine, c'è una differenza di sintassi tra i due attributi.

hidden è un attributo booleano, il che significa che se l'attributo è presente è vero - indipendentemente dal valore che potrebbe avere - e se l'attributo è assente è falso. Per il caso vero, la pratica migliore è di non usare alcun valore (<div hidden>...</div>), o il valore della stringa vuota (<div hidden="">...</div>). Io non raccomanderei hidden="true" perché qualcuno che legge/aggiorna il tuo codice potrebbe dedurre che hidden="false" avrebbe l'effetto opposto, il che è semplicemente scorretto.

aria-hidden, al contrario, è un attributo enumerato, che permette uno di una lista finita di valori. Se l'attributo aria-hidden è presente, il suo valore deve essere o "true" o "false". Se vuoi lo stato "undefined (default)", rimuovi completamente l'attributo.

Ulteriori letture: https://github.com/chharvey/chharvey.github.io/wiki/Hidden-Content