Wai-aria
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:
| Tipo | Compito | Esempi |
|---|---|---|
| Ruoli | Definiscono cosa un elemento è e qual è la sua funzione |
role="navigation" corrisponde a <nav>
|
| Proprietà | Dare agli elementi un significato extra |
aria-required="true" (campo di input obbligatorio)
|
| Stati | Definiscono le condizioni correnti degli elementi |
aria-disabled="true" (campo di input disabilitato)
|
Ci sono anche quattro categorie di stati e proprietà:
| Attributi | Compito | Esempi |
|---|---|---|
| Drag-and-drop | Trasmette informazioni ad AT sugli elementi drag-and-drop,
inclusi gli elementi trascinabili e le relative destinazioni di rilascio. |
aria-dropeffect
|
| Live Region | Indica 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-atomic
|
| Di relazione | Aggiungono relazioni tra elementi che non possono essere determinati altrimenti. |
aria-describedby
|
| widget | Utilizzata per elementi Common UI che ricevono input dagli utenti durante l'elaborazione di tali azioni e informazioni. |
aria-autocomplete
|
| Regola | Esempi di utilizzo |
|---|---|
| Usare sempre l'HTML nativo | Errato:
Corretto:
|
| Non modificare la semantica HTML nativa | |
| Tutti 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:
Corretto:
|
| È necessario assegnare a tutti gli elementi interattivi un nome accessibile. |
| Caso | Descrizione | Esempi |
|---|---|---|
| Etichette descrittive | Quando è necessario aggiungere etichette più descrittive a elementi HTML come pulsanti o collegamenti
(ad esempio Leggi di più, Ulteriori informazioni, ecc.) |
<a aria-label=“Read More about how awesome Lullabot is” href=“/path/to/your/page”>Leggi di più</a>
|
| Avvisi | Affinché 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”>
|
| Relazioni | Per 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>
|
| Forme | Per rendere i moduli accessibili agli utenti di lettori di schermo. |
<label for=“first-name”>Primo nome</label><input type=“text” id=“first-name” aria-required=“true” aria-autocomplete=“on” />
|
Voci correlate
Collegamenti esterni
- Introduzione a WAI-ARIA, su html5today.it. URL consultato il 14 febbraio 2011 (archiviato dall'url originale il 17 febbraio 2011).