Nel mondo digitale di oggi, l'accessibilità web è diventata una componente cruciale per garantire che tutti gli utenti, indipendentemente dalle loro abilità, possano accedere e interagire con i contenuti online.
Gli attributi ARIA (Accessible Rich Internet Applications) giocano un ruolo fondamentale nel migliorare l'accessibilità dei siti web, rendendoli più navigabili per le persone che utilizzano tecnologie assistive come gli screen reader.
In questo articolo esploriamo cosa sono gli attributi ARIA, come utilizzarli efficacemente e quando è appropriato implementarli, fornendo una guida completa per creare esperienze web inclusive.
Cosa sono e a cosa servono gli ARIA label
L'accessibilità dei contenuti web richiede informazioni semantiche su widget, strutture e comportamenti, per consentire alle tecnologie assistive di trasmettere informazioni appropriate alle persone con disabilità. Le indicazioni del W3C su WAI - ARIA identificano gli elementi di una interfaccia utente accessibile e che possono essere utilizzati per migliorare l'accessibilità e l'interoperabilità dei contenuti e delle applicazioni web: ruoli, stati e proprietà.
Gli attributi ARIA sono un insieme di specifiche aggiunte al codice HTML per migliorare l'accessibilità dei siti web, che comunicano il ruolo, lo stato e le proprietà di un elemento alle tecnologie assistive come gli screen reader utilizzati dagli utenti non vedenti.
Sviluppati dalla Web Accessibility Initiative (WAI) del World Wide Web Consortium (W3C) nel 2008 e raccomandati dal 2014, gli attributi ARIA non modificano la funzionalità o l'aspetto visivo di un sito, ma vengono percepiti solo da chi utilizza dispositivi per l’accessibilità.
Per capire meglio come funzionano, analizziamo nel dettaglio le loro caratteristiche fondanti.
Caratteristiche principali degli attributi ARIA
Le applicazioni web complesse diventano inaccessibili quando le tecnologie assistive non sono in grado di determinare la semantica di alcune parti di un documento o quando l'utente non è in grado di navigare efficacemente verso tutte le parti del documento in modo utilizzabile.
WAI-ARIA divide la semantica in:
- ruoli: definiscono cosa e quale funzione ha un elemento
- stati: conferiscono un significato aggiuntivo all’elemento
- proprietà: definiscono le condizioni correnti degli elementi
Ruoli
I ruoli definiti in questa specifica includono una raccolta di punti di riferimento del documento e la tassonomia dei ruoli WAI-ARIA. Le caratteristiche della tassonomia dei ruoli forniscono una serie di informazioni per ogni ruolo, tra cui:
- una descrizione informativa del ruolo;
- informazioni gerarchiche sui ruoli correlati (ad esempio, una directory è un tipo di elenco);
- il contesto del ruolo (ad esempio, un elemento di un elenco è contenuto all'interno di un elenco);
- riferimenti a concetti correlati in altre specifiche;
- gli stati e le proprietà supportati per ogni ruolo
L'aggiunta di un ruolo fornisce alle tecnologie assistive informazioni su come gestire ogni elemento.
In breve, i ruoli chiariscono cos’è, cosa fa o qual è il compito di un elemento all’interno di una pagina web.
Per esempio, grazie al codice <div role="button">Clicca qui!</div> l’utente non vedente saprà che in quella posizione, a cui è arrivato verosimilmente navigando con la tastiera, c’è un bottone. Ancora meglio sarebbe stato usare il tag “button”, che include già il suo ruolo.
Altri esempi di ruoli WAI-ARIA sono: article, banner, form, heading, menu, navigation, search.
Stati e Proprietà
Come spiegato nella guida WAI Aria 1.1 del W3C, i termini "stati" e "proprietà" si riferiscono a caratteristiche simili: entrambe forniscono informazioni specifiche su un oggetto ed entrambe fanno parte della definizione della natura dei ruoli; tuttavia, vengono mantenuti concettualmente distinti per chiarire le sottili differenze nel loro significato.
Vediamo quindi le definizioni di stato e proprietà:
- Uno stato è una proprietà dinamica che esprime le caratteristiche di un oggetto che possono cambiare in risposta alle azioni dell'utente o ai processi automatizzati. Gli stati non influiscono sulla natura essenziale dell'oggetto, ma rappresentano dati associati all'oggetto o alle possibilità di interazione dell'utente.
- Le proprietà sono attributi che sono essenziali per la natura di un dato oggetto o che rappresentano un valore di dati associato all'oggetto. Una modifica di una proprietà può avere un impatto significativo sul significato o sulla presentazione di un oggetto.
Cosa cambia tra uno stato e una proprietà?
Una differenza importante è che i valori delle proprietà (come aria-labelledby) hanno spesso meno probabilità di cambiare durante il ciclo di vita dell'applicazione rispetto ai valori degli stati (come aria-checked), che possono cambiare frequentemente a causa dell'interazione dell'utente.
Poiché la distinzione tra stati e proprietà è di scarsa importanza per la maggior parte degli autori di contenuti web, questa specifica si riferisce sia agli "stati" che alle "proprietà" semplicemente come "attributi" quando possibile.
WAI-ARIA fornisce una raccolta di stati e proprietà di accessibilità che vengono utilizzati per supportare le API di accessibilità della piattaforma su varie piattaforme del sistema operativo.
Quanto alla tassonomia, secondo il punto 6.5 della guida WAI-ARIA 1.1 stati e proprietà vengono categorizzati in 4 tipologie:
- Widget Attributes (Attributi del widget): attributi specifici per gli elementi comuni dell'interfaccia utente presenti nelle interfacce grafiche o nelle applicazioni rich internet che ricevono input dall'utente ed elaborano azioni dell'utente;
- Live Region Attributes (Attributi Regione Live): questi attributi indicano che le modifiche al contenuto possono avvenire senza che l'elemento sia focalizzato e forniscono alle tecnologie assistive informazioni su come elaborare gli aggiornamenti del contenuto.
- Drag-and-Drop Attributes (Attributi di trascinamento): danno informazioni sugli elementi drag-and-drop come gli elementi trascinabili e le loro destinazioni.
- Relationship Attributes (Attributi di relazione): indicano relazioni o associazioni tra elementi che non possono essere indicate in altro modo nel documento.
Quando e come usare gli ARIA: 5 regole
La domanda può sorgere spontanea: è sempre opportuno usare gli ARIA? La risposta breve è no. Nella guida del W3C su ARIA (in inglese) sono elencate le cinque regole per l’utilizzo di ARIA.
Vediamole di seguito:
Regola 1: preferire l’HTML nativo
Un elemento ARIA va aggiunto solo nel caso in cui serva veramente.
Se è possibile utilizzare un elemento o un attributo HTML nativo con la semantica e il comportamento richiesti già incorporati, allora è meglio farlo invece di riproporre un elemento e aggiungere un ruolo, uno stato o una proprietà ARIA per renderlo accessibile.
In quali circostanze questo non può essere possibile?
- Se la funzione è disponibile in HTML [HTML51] ma non è implementata o se è implementata, ma non è supportata dall'accessibilità
- Se i vincoli di progettazione visiva escludono l'uso di un particolare elemento nativo, perché l'elemento non può essere stilizzato come richiesto
- Se la caratteristica non è attualmente disponibile in HTML.
Regola 2: non cambiare la semantica HTML nativa
Nella maggior parte dei casi, gli elementi HTML funzionano in maniera conforme da subito e non richiedono l'aggiunta di ulteriori ARIA.
Esempio:
❌ Non fare così: <h2 role=tab>intestazione scheda</h2>
✔️ Fai così: <div role=tab><h2>intestazione scheda</h2></div>
Regola 3: supporta sempre la navigazione da tastiera
Tutti i controlli ARIA interattivi (non disattivati) devono essere accessibili dalla tastiera. Si può aggiungere tabindex= "0" a qualsiasi elemento per cui è necessario impostare lo stato attivo.
Se si crea un widget su cui l'utente può fare clic o compiere altre azioni come toccare, trascinare, rilasciare, far scorrere o scorrere, l'utente deve anche essere in grado di navigare verso il widget ed eseguire un'azione equivalente usando la tastiera. Tutti i widget interattivi devono essere programmati per rispondere a sequenze o combinazioni di tasti standard, ove possibile.
Ad esempio, se si utilizza role=button, l'elemento deve essere in grado di ricevere il focus e l'utente di attivare l'azione associata all'elemento utilizzando il relativo tasto (enter su WIN OS o return su MAC OS).
Regola 4: non nascondere gli elementi attivabili
Non aggiungere role= "presentation" o aria-hidden= "true" su elementi focalizzabili che devono essere impostati come attivi, inclusi gli elementi con tabindex= "0". L'uso di uno di questi due elementi su un elemento focalizzabile farà sì che alcuni utenti si concentrino su "nulla".
Regola 5: dare nomi accessibili agli elementi interattivi
Tutti gli elementi interattivi devono avere un nome accessibile; lo scopo di un elemento interattivo deve essere comunicato a un utente prima che sappia come interagire con l'elemento. Assicurati che tutti gli elementi abbiano un nome accessibile per le persone che utilizzano i dispositivi di accessibilità! nomi accessibili possono essere i contenuti racchiusi da un elemento (nel caso di <a>), da testo alternativo o da un'etichetta.
Come raggiungere la conformità e rendere un sito web accessibile?
Raggiungere la conformità alle normative in materia di accessibilità web non è solo una responsabilità sociale, ma anche un obbligo legale.
Da giugno 2025 entrerà ufficialmente in vigore lo European Accessibility Act, la direttiva europea in materia di accessibilità che interessa il settore privato come quello pubblico, e che introduce nuovi obblighi e possibili sanzioni per chi non adempie.
L'implementazione corretta degli attributi ARIA è uno degli step essenziali per assicurare che i siti web siano accessibili a tutti gli utenti, inclusi quelli con disabilità. Tuttavia, la complessità dell'accessibilità web richiede un supporto professionale, che conosca le normative e sappia tradurle in azioni concrete.
Affidarsi a professionisti dell’accessibilità qualificati come UserWay non solo aiuta a garantire la conformità alle normative, ma contribuisce anche a creare un web più inclusivo e accogliente per tutti.
Prova subito i vantaggi dell’accessibilità sul tuo sito con l’Accessibility Widget di UserWay, che permette agli utenti di adattare in pochi clic l’esperienza di navigazione in base alle loro esigenze!
