Che cos'è?
WAI-ARIA è l'acronimo di "Web Accessibility Initiative - Accessible Rich Internet Applications" . È un insieme di attributi che aiutano a migliorare la semantica di un sito Web o di un'applicazione Web per aiutare le tecnologie assistive, come gli screen reader per non vedenti, a dare un senso a certe cose che non sono native dell'HTML. Le informazioni esposte possono variare da qualcosa di semplice come dire a uno screen reader che l'attivazione di un collegamento o pulsante ha appena mostrato o nascosto più elementi, a widget complessi come interi sistemi di menu o viste gerarchiche ad albero.
Ciò si ottiene applicando ruoli e attributi di stato al markup HTML 4.01 o successivo che non influisce sul layout o sulla funzionalità del browser, ma fornisce informazioni aggiuntive per le tecnologie assistive.
Una pietra angolare di WAI-ARIA è l'attributo ruolo. Indica al browser di dire alla tecnologia di supporto che l'elemento HTML utilizzato non è in realtà ciò che suggerisce il nome dell'elemento, ma qualcos'altro. Mentre in origine è solo un elemento div, questo elemento div può essere il contenitore di un elenco di elementi con completamento automatico, nel qual caso un ruolo di "casella di riepilogo" sarebbe appropriato da utilizzare. Allo stesso modo, un altro div che è figlio di quel div contenitore e che contiene un singolo elemento opzione, dovrebbe quindi ottenere un ruolo di "opzione". Due div, ma attraverso i ruoli, significato totalmente diverso. I ruoli sono modellati sulle controparti delle applicazioni desktop comunemente utilizzate.
Un'eccezione a ciò sono i ruoli di riferimento del documento, che non cambiano il significato effettivo dell'elemento in questione, ma forniscono informazioni su questo particolare posto in un documento.
La seconda pietra angolare sono stati e proprietà WAI-ARIA. Definiscono lo stato di alcuni elementi nativi o WAI-ARIA, ad esempio se qualcosa viene compresso o espanso, è richiesto un elemento modulo, qualcosa ha un menu a comparsa collegato ad esso o simili. Questi sono spesso dinamici e cambiano i loro valori durante il ciclo di vita di un'applicazione Web e di solito vengono manipolati tramite JavaScript.
Cosa no?
WAI-ARIA non intende influenzare il comportamento del browser. A differenza di un elemento pulsante reale, ad esempio, un div su cui si inserisce il ruolo di "pulsante" non fornisce la messa a fuoco della tastiera, un gestore di clic automatico quando si preme Spazio o Invio su di esso e altre proprietà che sono indigine di un pulsante. Il browser stesso non sa che un div con il ruolo di "pulsante" è un pulsante, solo la sua parte API di accessibilità lo fa.
Di conseguenza, questo significa che devi assolutamente implementare la navigazione da tastiera, la focalizzazione e altri schemi comportamentali conosciuti dalle applicazioni desktop da solo. Potete trovare alcune tecniche avanzate ARIA Qui .
Quando non dovrei usarlo?
Sì, è corretto, questa sezione viene prima di tutto! Perché la prima regola di usare WAI-ARIA è: non usarla a meno che non sia assolutamente necessario! Meno WAI-ARIA hai e più puoi contare sull'utilizzo di widget HTML nativi, meglio è! Ci sono alcune altre regole da seguire, puoi verificarle qui .