WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) è un insieme di documenti pubblicati dal W3C (World Wide Web Consortium) che specificano come aumentare l'accessibilità dei contenuti dinamici e dei componenti per l'interfaccia utente sviluppati con AJAX, HTML, JavaScript e altre tecnologie collegate.
Descrizione
L'HTML non fornisce la possibilità di creare contenuti dinamici o controlli avanzati per l'interfaccia utente, ma consente l'inclusione di applet (Flash, Java) e script lato client (tipicamente JavaScript). Gli sviluppatori Web utilizzano sempre di più script lato client per creare controlli per l'interfaccia utente che non possono essere creati con il solo HTML. Utilizzano anche script lato client per aggiornare sezioni di una pagina senza richiederne una nuova al web server. Tali tecniche nei siti web vengono chiamate Rich Internet Applications. Questi controlli lato utente e l'aggiornamento dinamico dei contenuti sono spesso non accessibili per utenti con disabilità, specialmente per coloro che utilizzano screen reader e utenti che non possono utilizzare il mouse o altri dispositivi di puntamento.
WAI-ARIA descrive come aggiungere una semantica o altri metadati al contenuto HTML allo scopo di rendere i controlli lato utente e i contenuti dinamici più accessibili. Per esempio con WAI-ARIA è possibile identificare una lista di collegamenti come un menu di navigazione decidendo se visualizzarlo espanso o contratto. Originariamente nata per l'HTML, WAI-ARIA non è limitato solo a questo: principalmente può essere utilizzato in altri linguaggi di marcatura come Scalable Vector Graphics (SVG). SVG 1.2 ha aggiunto un piccolo supporto per WAI-ARIA il 15 settembre 2008.
Documenti disponibili
Accessible Rich Internet Applications (WAI-ARIA) Version 1.0
Documento principalmente orientato agli sviluppatori di tecnologie web assistive ed altri user agent, sviluppatori di altre specifiche tecniche e sviluppatori di strumenti per valutare l'accessibilità.
WAI-ARIA Primer
Introduzione tecnica alla WAI-ARIA. Descrive i problemi a cui ci indirizza WAI-ARIA, i concetti di base, l'approccio tecnico e le motivazioni di business per cui si deve adottare WAI-ARIA.
WAI-ARIA Esperienze più significative
Descrive le migliori pratiche per diffondere rich internet applications con WAI-ARIA: affronta temi come i primi passi per costruire widgets, navigazione da tastiera, relazioni, proprietà di form, supporto per copia e incolla, avvisi e finestre di dialogo, librerie componenti riutilizzabili, e strumenti di test.
HTML5
Prima della nascita dei tag semantici HTML5 come <nav>, <aside>, <footer>, i lettori di schermo non potevano distinguere chiaramente le varie sezioni da cui la pagina web era composta. La soluzione inizialmente consisteva nell'aggiungere uno o più link nascosti nella parte alta della pagina. Tali link reindirizzavano alle varie sezioni della pagina, come per esempio la barra di navigazione:<a href="#hidden" class="hidden">Vai alla barra di navigazione</a>HTML5 oltre ai tag semantici aggiornò anche le regole WAI ARIA: +Categorie WAI ARIA 1.1TipoCompitoEsempiRuoliDefiniscono cosa un elemento è e qual è la sua funzionerole="navigation" corrisponde a <nav>ProprietàDare agli elementi un significato extraaria-required="true" (campo di input obbligatorio)StatiDefiniscono le condizioni correnti degli elementiaria-disabled="true" (campo di input disabilitato) Ci sono anche quattro categorie di stati e proprietà: +Sottocategorie WAI ARIA 1.1AttributiCompitoEsempiDrag-and-dropTrasmette informazioni ad AT sugli elementi drag-and-drop, inclusi gli elementi trascinabili e le relative destinazioni di rilascio.aria-dropeffectLive RegionIndica i cambiamenti nel contenuto per l'AT di un utente, se un messaggio verrà letto ad alta voce con il flusso di contenuto (cioè aria-live=“polite”) o invece interromperà il flusso di contenuto e sarà letto ad alta voce immediatamente ( aria-live=“assertive”). Questi elementi non devono essere focalizzati e possono includere informazioni su come l'utente può procedere.aria-atomicDi relazioneAggiungono relazioni tra elementi che non possono essere determinati altrimenti.aria-describedbywidgetUtilizzata per elementi Common UI che ricevono input dagli utenti durante l'elaborazione di tali azioni e informazioni.aria-autocomplete +Regole di utilizzo WAI ARIARegolaEsempi di utilizzoUsare sempre l'HTML nativoErrato: <span role=“button” onClick=“submitForm();”>INVIA</span>
Corretto:
INVIANon modificare la semantica HTML nativaTutti i controlli ARIA interattivi devono essere accessibili dalla tastiera.<div tabindex=“0”>Ciao Mondo</div>Per tutti gli elementi che sono focalizzabili, non aggiungere mai role=“presentation”o aria-hidden=“true”. Errato: Search:
Corretto:È necessario assegnare a tutti gli elementi interattivi un nome accessibile. +Casi in cui si usano le regole WAI ARIACasoDescrizioneEsempiEtichette descrittiveQuando è necessario aggiungere etichette più descrittive a elementi HTML come pulsanti o collegamenti (ad esempio Leggi di più, Ulteriori informazioni, ecc.)Leggi di piùAvvisiAffinché gli eventi vengano annunciati ai lettori di schermo, è necessario aggiungere Live Region ARIA e messaggi di avviso a tali elementi affinché possano essere rilevati e letti ad alta voce.<div class=“alert-message” role=“alert”> Hai completato con successo il modulo di contatto e riceverai presto un'email di conferma.</div>RelazioniPer creare una relazione tra gli elementi (genitore/figlio), si devono aggiungere attributi ARIA a ciascuno degli elementi.<nav id=“main-nav”> <button id=“menu-button-1” aria-haspopup=“true” aria-controls=“menu-list-1”>Menu 1</button> <ul id=“menu-list-1” role=“menu” aria-labelledby=“menu-button-1”> <li role=“none”><a role=“menuitem” href=“...”>Link 1</a></li> <li role=“none”><a role=“menuitem” href=“...”>Link 2</a></li> <li role=“none”><a role=“menuitem” href=“...”>Link 3</a></li> </ul> </nav>FormePer rendere i moduli accessibili agli utenti di lettori di schermo.Primo nome
Note
Voci correlate Accessibilità (design) AJAX
Collegamenti esterni
Categoria:Gestione di Internet Categoria:Web 2.0