Ho visto l'attributo aria tutto mentre lavoravo con Angular Material. Qualcuno può spiegarmi cosa significa il prefisso aria? ma, soprattutto, quello che sto cercando di capire è la differenza tra l'attributo aria-hidden e hidden.Qual è la differenza tra gli attributi HTML "nascosto" e "aria-nascosto"?
ARIA (Accessible Rich Internet Applications) definisce un modo per rendere i contenuti web e applicazioni web più accessibili alle persone con disabilità.
L'attributo hidden è nuovo in HTML5 e indica ai browser di non visualizzare l'elemento. La proprietà aria-hidden dice agli screen reader 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
Utilizzando questi standard può rendere più facile per le persone disabili di usare il web.
Quindi, se usi semplicemente l'attributo nascosto, lo screen reader continuerà a leggere? –
corretto. 'hidden' significa nascosto a tutti. 'aria-hidden' significa nascosto per screen reader e strumenti simili. Questo è utile per i componenti che vengono utilizzati esclusivamente per la formattazione e non contengono contenuti reali, ad esempio. –
'aria-hidden' Indica che l'elemento e tutti i suoi discendenti non sono visibili o percepibili a nessun utente o lettore –
Un attributo nascosto è un attributo booleano (Vero/Falso). Quando questo attributo è 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>
attributi Aria-nascoste indicano che l'elemento e tutti i suoi discendenti sono ancora visibili nel browser, ma saranno invisibili agli strumenti di accessibilità, come ad esempio lettori di schermo.
Esempio:
<p aria-hidden="true">You can't see this</p>
Date un'occhiata a this. Dovrebbe rispondere a tutte le tue domande.
Nota: ARIA acronimo di Accessible Rich Internet Applications
Fonti:Paciello Group
Questo non è del tutto corretto (anche la documentazione ufficiale è un po 'confuso qui). Un elemento con 'aria-hidden =" true "' è ancora visibile nel browser, ma sarà invisibile agli strumenti di accessibilità, come gli screen reader. –
'aria-hidden' è usato per nascondere l'elemento da persone che usano il tuo sito web con strumenti di accessibilità. – LukeXF
Ho trovato alcuni chiarimenti qui: http://www.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/ – Abdul