Accessibilità del sito come iniziare con ARIA

Utilizzando solo HTML standard, le moderne app Web possono bloccare gli utenti con esigenze di accessibilità. 

L'HTML è il linguaggio di markup predominante online, utilizzato da quasi l'83% dei siti web esistenti. Mentre ci sono stati alcuni cambiamenti nei 25 anni dalla sua creazione, anche le più recenti iterazioni, come HTML5 e AMP, lasciano molto a desiderare, specialmente quando si parla di accessibilità. È qui che entra in gioco ARIA. In questo tutorial, parlerò di cosa è ARIA, perché è utile per il tuo sito e in un paio di modi in cui può essere aggiunto al tuo sito.

Cos'è ARIA?

ARIA, noto anche come WAI-ARIA, è l'acronimo di Access Rich Internet Applications di Web Accessibility Initiative. Il documento delle specifiche completo può essere trovato qui. Nota che il documento con le specifiche complete è abbastanza denso, quindi potrebbe essere una buona idea iniziare leggendo questo post e verificando alcune delle altre risorse che link qui sotto. 

Lo scopo principale di ARIA è quello di consentire una struttura semantica avanzata all'interno dell'HTML come contropartita della natura pesante della sintassi HTML. In altre parole, l'HTML dice al browser dove vanno le cose, e ARIA racconta come interagiscono.

Chi è responsabile per ARIA?

ARIA è un progetto ospitato dal W3C (World Wide Web Consortium). Il progetto aderisce agli stessi standard per l'aggiornamento e la modifica come le altre iniziative. Forniscono inoltre un repository GitHub di diversi test che è possibile eseguire per assicurarsi che la pagina funzioni correttamente.

Cosa c'è di sbagliato con il mio sito attuale Markup?

La maggior parte dei siti che hanno un design strutturato e ben congegnato fanno abbastanza bene quando si tratta di tecnologie adattive (ad esempio lettori di schermo). Tuttavia, avere un utente in grado di capire come utilizzare il tuo sito e averlo facile da usare sono cose diverse. Gli utenti ipovedenti costituiscono quasi il 2% della popolazione e, per loro, la differenza può significare risparmiare un notevole dispendio di tempo e lavoro investigativo quando si cerca di eseguire attività online di base. Può essere la differenza tra offrire ai visitatori un'esperienza spettacolare e fornire un labirinto per loro di navigare.

Al di là dei tradizionali mezzi di accessibilità, ARIA sta trovando la sua strada in tecnologie che forniscono nuove interpretazioni standard. Un numero crescente di sistemi vocali, la navigazione aggregata (come i computer auto-incorporati, per esempio) e altre innovazioni stanno mettendo l'ARIA al servizio, sfruttando le sue maggiori capacità semantiche.

Ok, ma che cosa fa??

Nel complesso, ARIA collega gli elementi in un modo semanticamente significativo. Fornisce all'utente ulteriori significati riguardo all'interazione. Ecco alcuni esempi reali di come potrebbe essere utilizzato:

1. Associazione di elementi non nidificati: con HTML semplice, il browser dell'utente può visualizzare solo le relazioni basate su relazioni padre / figlio. In alcune situazioni, tuttavia, potremmo desiderare una serie di pulsanti paralleli al contenuto nella gerarchia HTML. Con ARIA, possiamo definire quale tipo di controller è ciascun pulsante e quale elemento controlla altrove nel documento.
2. Dichiarare elementi interattivi: mentre l'HTML fornisce una manciata di elementi per l'interattività, ARIA ne definisce decine di più, consentendo descrizioni più dettagliate di ciò che ogni elemento della tua pagina può fare. Inoltre, questi possono essere assegnati a tag HTML che non sarebbero comunemente usati per uno scopo simile ma potrebbero avere senso nel caso specifico. Ad esempio, potresti usare il
3. tag per una serie di checkbox che preferisci non essere composta da elementi del modulo.
4. Notifiche di aggiornamento di area live: Un'altra funzionalità fornita da ARIA è la definizione di un'area di contenuto "live". Quando un'area di contenuto è definita in questo modo, ARIA avviserà l'utente ogni volta che i contenuti all'interno di quell'elemento cambiano. Questo può essere utile quando ti assicuri che gli utenti ipovedenti sappiano che qualcosa è cambiato nella tua pagina.

Aggiunta di ARIA alle tue pagine Web

Abbiamo parlato di cosa può fare ARIA, quindi ora diamo un'occhiata ad alcuni degli esempi più comuni. Inizieremo ogni sezione con una breve dichiarazione dell'obiettivo che stiamo cercando di raggiungere, seguito da un esempio di codice su come realizzarlo.

Creare etichette alternative con ARIA

Quando si parla di etichettatura alternativa, la maggior parte degli sviluppatori ha familiarità con alt attributo comunemente usato su tag. Questo tag ha uno scopo importante: descrivere l'immagine a cui è collegato per maggiore accessibilità (o come una tattica SEO comune, a seconda della prospettiva). 

ARIA fornisce un attributo simile chiamato Aria-label che può essere collegato a qualsiasi elemento HTML, migliorando l'accessibilità non solo per le immagini, ma anche per le sezioni del sito, i controlli del modulo e altro. Ecco un esempio di come appare:

    
Una descrizione testuale dell'immagine, visibile sullo schermo

Definizione degli elementi dell'interfaccia utente specifici per ARIA

L'HTML fornisce già una serie di elementi per la creazione di pagine Web, ma il loro obiettivo principale è tipicamente definire un'area genericamente e presentare all'utente la struttura del sito. ARIA fornisce alcuni dozzine di elementi aggiuntivi che si concentrano maggiormente su come viene utilizzato un elemento, come un timer, un suggerimento o una barra di avanzamento.

Un esempio di utilizzo qui è un suggerimento che potresti trovare su un modulo. Esistono diversi modi per crearne uno, che vanno da un collegamento che attiva alcuni JavaScript a un elemento che crea una modale quando si passa con il mouse sopra. Il pezzo mancante qui è che, nonostante il modo in cui potrebbe funzionare per gli utenti vedenti, gli utenti ipovedenti potrebbero non sapere nemmeno che il tooltip esiste.

Puoi definire un suggerimento usando ARIA in questo modo:

Definizioni ARIA disponibili

Per espandere questi elementi dell'interfaccia utente, ecco una breve lista di alcuni dei "ruoli" più interessanti che possono essere definiti. L'elenco completo è disponibile nel documento delle specifiche di riferimento.

• ricerca
• bandiera
• presentazione
• barra degli strumenti
• stato
• elemento del menu
• ceppo
• dialogo
• collegamento

Stabilire relazioni al di fuori della struttura padre / figlio

Ora espandiamoci su un punto di cui abbiamo parlato prima: la struttura forzata dell'HTML. Mentre la relazione genitore / figlio è buona per decidere come ordinare le cose, non è sufficiente quando sono necessarie connessioni più significative. Un esempio di questo è elementi di pari livello. Alcune librerie hanno aggiunto la possibilità per i fratelli o altre forme di relazioni tra elementi di essere attraversate, ma questo di solito avviene in JavaScript o in un'altra lingua al di fuori del markup.

ARIA ci dà la possibilità di definire queste relazioni direttamente nel markup, rendendo più facile raggruppare le voci di menu, creare una navigazione non standard e collegare i controlli alle aree degli elementi che sarebbero difficili da fare normalmente.

Diamo un'occhiata a come potremmo usarlo per connettere alcuni controlli ad un'area di contenuto:

 
 Il contenuto del tuo tutorial 

Questo frammento dice che il nextbutton.jpg l'immagine è un pulsante, che è un controllo per il tutorial div sotto.

Creazione di elementi "in diretta" in ARIA

L'ultima caratteristica di ARIA che tratteremo qui è la Aria-live attributo. Mentre la maggior parte delle altre funzionalità di ARIA qui si occupano di connessioni semantiche, questa si occupa direttamente dell'idea di fornire notifiche agli utenti di modifiche del contenuto o degli elementi.

Per molti con problemi di vista, potrebbe non essere immediatamente chiaro che la loro interazione con il tuo sito ha causato un cambiamento altrove nella pagina. Questo può essere particolarmente vero per i cambiamenti sottili, come piccoli frammenti di testo che possono cambiare ma rimangono relativamente della stessa lunghezza. Utilizzando questo attributo, ogni volta che il contenuto viene modificato all'interno dell'elemento definito, l'utente verrà avvisato.

Possiamo aggiungere questo attributo a un elemento come questo:

 Contenuto che aggiorna, es. indicazioni guidate 

Rendere il Web un posto migliore per tutti gli utenti

Con poco più del 2% della popolazione degli Stati Uniti che trasporta una qualche forma di etichetta a bassa visione, migliorare l'accessibilità del tuo sito può aumentare notevolmente la portata del tuo sito. Per quelli con siti che raggiungono più paesi, quel numero diventa ancora più grande. Oltre all'accessibilità, ARIA offre anche un modo per le interfacce non-browser di utilizzare il tuo sito, con un numero di dispositivi vocali che forniscono già supporto.

L'implementazione di ARIA aiuta gli utenti e può aiutare il tuo traffico, quindi prendilo!

Ho perso qualche dettaglio o hai altre domande? Lascia un commento qui sotto!

Se vuoi immergerti nella documentazione completa di ARIA o provare lo strumento di test ufficiale, controlla i seguenti link:

• Pratiche di authoring di ARIA
• Documento di specifica ARIA completo
• Rapporto di esempio dello strumento di test