Wikipedia

Wai-aria

(Reindirizzamento da 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 modifica

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 modifica

Accessible Rich Internet Applications (WAI-ARIA) Version 1.0[1]

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[2]

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[3]

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 modifica

  Lo stesso argomento in dettaglio: HTML5 e Accessibilità (web).

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[4]:

<a href="#hidden" class="hidden">Vai alla barra di navigazione</a>

HTML5 oltre ai tag semantici aggiornò anche le regole WAI ARIA[5][6][7][8]:

Categorie WAI ARIA 1.1
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à:

Sottocategorie WAI ARIA 1.1
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
Regole di utilizzo WAI ARIA
Regola Esempi di utilizzo
Usare sempre l'HTML nativo Errato:

<span role=“button” onClick=“submitForm();”>INVIA</span>

Corretto:

<button type=“submit” onClick=“submitForm();”>INVIA</button>

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:

Search: <input type=“text” id=“search” />

Corretto:

<input type=“text” id=“search” aria-label=“Search” />

È necessario assegnare a tutti gli elementi interattivi un nome accessibile.
Casi in cui si usano le regole WAI ARIA
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”>

Hai completato con successo il modulo di contatto e riceverai presto un'email di conferma.</div>

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” />

Note modifica

  1. ^ Accessible Rich Internet Applications (WAI-ARIA) Version 1.0, W3C Last Call Working Draft 24 February 2009
  2. ^ WAI-ARIA Primer
  3. ^ WAI-ARIA Best Practices – W3C Working Draft 4 February 2008
  4. ^ Basi della tecnologia WAI-ARIA - Impara il web | MDN, su developer.mozilla.org. URL consultato il 22 febbraio 2021 (archiviato dall'url originale il 30 ottobre 2020).
  5. ^ (EN) Accessible Rich Internet Applications (WAI-ARIA) 1.1, su w3.org. URL consultato il 22 febbraio 2021.
  6. ^ raghavendra satish peri, WAI-ARIA 1.1 Cheat Sheet by Digitala11y.com, 14 maggio 2019. URL consultato il 22 febbraio 2021.
  7. ^ (EN) What the Heck is ARIA? A Beginner's Guide to ARIA for Accessibility | Lullabot, su lullabot.com. URL consultato il 22 febbraio 2021.
  8. ^ Using ARIA, su w3.org. URL consultato il 22 febbraio 2021.

Voci correlate modifica

Collegamenti esterni modifica

  • Introduzione a WAI-ARIA, su html5today.it. URL consultato il 14 febbraio 2011 (archiviato dall'url originale il 17 febbraio 2011).
  Portale Internet: accedi alle voci di Wikipedia che trattano di internet
Estratto da "https://it.wikipedia.org/w/index.php?title=Wai-aria&oldid=137581443"