Ho visto l'attributo aria dappertutto mentre lavoravo con il materiale angolare. Qualcuno può spiegarmi cosa significa il prefisso aria? ma soprattutto quello che sto cercando di capire è la differenza tra aria-hiddene l' hiddenattributo.

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

L' hiddenattributo è nuovo in HTML5 e dice ai browser di non visualizzare l'elemento. La aria-hiddenproprietà 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ù semplice l'utilizzo del Web da parte delle persone disabili.

Un attributo nascosto è un attributo booleano (Vero / Falso). Quando questo attributo viene utilizzato su un elemento, rimuove tutta la rilevanza per quell'elemento. Quando un utente visualizza la pagina HTML, gli elementi con l'attributo nascosto non dovrebbero essere visibili.

Esempio:

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

Gli attributi nascosti da Aria 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 Access Internet Rich Accessible

Fonti: Gruppo Paciello

Differenza semantica

Secondo HTML 5.2 :

Se specificato su un elemento, [l' hiddenattributo] indica che l'elemento non è ancora, o non è più, direttamente pertinente allo stato corrente della pagina o che viene utilizzato per dichiarare il contenuto da riutilizzare da altre parti della pagina come al contrario di essere direttamente accessibile dall'utente.

Gli esempi includono un elenco di schede in cui alcuni pannelli non sono esposti o una schermata di accesso che scompare dopo che un utente ha effettuato l'accesso. Mi piace chiamare queste cose "rilevanti dal punto di vista temporale", ovvero sono rilevanti in base alla tempistica.

D'altra parte, ARIA 1.1 dice:

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

In altre parole, gli elementi con aria-hidden="true"vengono rimossi dall'albero dell'accessibilità , che la maggior parte della tecnologia assistiva onora, e gli elementi con aria-hidden="false"verranno sicuramente esposti all'albero. Gli elementi senza l' aria-hiddenattributo si trovano nello stato "non definito (predefinito)", il che significa che i programmi utente dovrebbero esporlo all'albero in base al suo rendering. Ad esempio un agente utente può decidere di rimuoverlo se il colore del testo corrisponde al colore di sfondo.

Ora confrontiamo la semantica. È opportuno utilizzare hidden, ma non aria-hidden , per un elemento che non è ancora "rilevante dal punto di vista temporale", ma che potrebbe diventare rilevante in futuro (nel qual caso si utilizzerebbero script dinamici per rimuovere l' hiddenattributo). Al contrario, è opportuno utilizzare aria-hidden, ma non hidden, su un elemento che è sempre rilevante, ma con il quale non si desidera ingombrare l'API di accessibilità; tali elementi potrebbero includere "un tocco visivo", come icone e / o immagini che non sono essenziali per l'utente di consumare.

Differenza effettiva

La semantica ha effetti prevedibili nei browser / agenti utente. Il motivo per cui faccio una distinzione è che il comportamento dell'agente utente è raccomandato , ma non richiesto dalle specifiche.

L' hiddenattributo dovrebbe nascondere un elemento da tutte le presentazioni, comprese le stampanti e gli screen reader (supponendo che questi dispositivi rispettino le specifiche HTML). Se vuoi rimuovere un elemento dall'albero dell'accessibilità così come i media visivi, hiddenfarebbe il trucco. Tuttavia, non utilizzare hidden solo perché si desidera questo effetto. Chiediti se hiddenè semanticamente corretto per primo (vedi sopra). Se hiddennon è semanticamente corretto, ma vuoi comunque nascondere visivamente l'elemento, puoi usare altre tecniche come CSS.

Gli elementi con aria-hidden="true"non sono esposti all'albero dell'accessibilità, quindi ad esempio gli screen reader non li annunciano. Questa tecnica dovrebbe essere usata con attenzione, poiché fornirà esperienze diverse a utenti diversi: gli user agent accessibili non li annunceranno / renderizzeranno, ma saranno comunque resi su agenti visivi. Questa può essere una buona cosa se eseguita correttamente, ma ha il potenziale per essere maltrattata.

Differenza sintattica

Infine, c'è una differenza nella 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. Nel caso vero, la migliore pratica è di non utilizzare alcun valore ( <div hidden>...</div>) o il valore di stringa vuota ( <div hidden="">...</div>). Vorrei non consiglierei hidden="true"perché la lettura qualcuno / aggiornare il codice potrebbe dedurre che hidden="false"avrebbe l'effetto opposto, che è semplicemente errata.

aria-hidden, al contrario, è un attributo enumerato , che consente uno di un elenco finito di valori. Se l' aria-hiddenattributo è presente, il suo valore deve essere "true"o "false". Se si desidera lo stato "non definito (impostazione predefinita)", rimuovere del tutto l'attributo.

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

impostando aria-hidden su false e attivandolo su element.show () ha funzionato per me.

per esempio

<span aria-hidden="true">aria text</span>

$(span).attr('aria-hidden', 'false');
$(span).show();

e quando si nascondono indietro

$(span).attr('aria-hidden', 'true');
$(span).hide();