Linee GuidaLe tecnologie assistive, come i lettori di schermo, comunicano agli utenti il nome dell’elemento, il suo ruolo (ad es. pulsante o casella di controllo) e il suo stato attuale (ad es. selezionato, espanso o contrassegnato). Se queste informazioni non sono definite o aggiornate correttamente, gli utenti non possono comprendere in modo affidabile il funzionamento dell’elemento, rendendo difficile o persino impossibile l’utilizzo del sito web.
Per quali utenti è particolarmente importante?
La corretta definizione del nome, del ruolo e dello stato degli elementi è fondamentale soprattutto per:
- utenti ciechi e ipovedenti che utilizzano lettori di schermo,
- utenti che navigano sul web esclusivamente tramite tastiera,
- persone con disturbi dell’attenzione o disabilità cognitive,
- utenti di tecnologie assistive che ricevono le informazioni sugli elementi in modo programmatico.
Quando l’utente raggiunge un elemento interattivo, la tecnologia assistiva deve comunicare chiaramente di quale elemento si tratta, quale sia il suo scopo e in quale stato si trovi attualmente. Solo sulla base di queste informazioni l’utente può continuare a utilizzare il sito web con sicurezza.
Cosa significano il nome, il ruolo e lo stato di un elemento?
Ogni elemento interattivo deve fornire alle tecnologie assistive tre informazioni fondamentali:
- Nome (Name) – indica come si chiama l’elemento o che cosa rappresenta (ad es. »Conferma e continua« oppure »Apri la navigazione«).
- Ruolo (Role) – definisce il tipo di elemento, ad esempio pulsante (button), casella di controllo (checkbox), scheda (tab) o cursore (slider).
- Stato (State) – descrive lo stato attuale dell’elemento, ad esempio se è espanso, selezionato, contrassegnato, disabilitato o vuoto.
Esempio di pulsante con nome, ruolo e stato definiti correttamente:
Problemi frequenti
L’elemento non ha un nome appropriato
Se un elemento interattivo non ha un nome accessibile, l’utente non sa che cosa rappresenta o che cosa accadrà quando lo attiverà.
Esempio di pulsante con un nome non appropriato:
Esempio di pulsante con un nome appropriato:
L’elemento non ha un ruolo definito correttamente
Se un elemento non ha un ruolo appropriato o utilizza un ruolo errato, le tecnologie assistive lo presentano in modo scorretto oppure non sanno come interpretarlo.
Ad esempio, un elemento che funziona come pulsante non deve essere presentato come elemento generico (generic) o come scheda (tab) se in realtà non svolge tale funzione.
Lo stato dell’elemento non viene aggiornato correttamente
Un problema frequente si verifica quando lo stato visivo dell’elemento cambia, mentre quello programmatico rimane invariato.
Questo accade spesso con:
- fisarmoniche (accordion),
- elenchi a discesa,
- schede,
- interruttori,
- caselle di controllo.
Se una fisarmonica è aperta, ciò deve risultare anche dal suo stato programmatico (ad es. aria-expanded="true"). Se è chiusa, lo stato deve essere aggiornato di conseguenza.
Esempio di ruolo e stato dell’elemento definiti in modo errato:
Esempio di ruolo e stato dell’elemento definiti correttamente:
Lo stato visivo e quello programmatico non sono coerenti
A volte un elemento appare sullo schermo come selezionato, contrassegnato o aperto, ma le tecnologie assistive non rilevano tale cambiamento.
Questo genera confusione, poiché utenti diversi ricevono informazioni differenti sullo stesso elemento.
Esempio di stato aggiornato correttamente:
A cosa dobbiamo prestare particolare attenzione?
Per verificare gli elementi interattivi possiamo porci le seguenti domande:
- Ogni pulsante, collegamento o altro elemento interattivo ha un nome chiaro?
- All’elemento è stato assegnato il ruolo corretto?
- Lo stato dell’elemento viene aggiornato correttamente quando cambia?
- Lo stato visivo e quello programmatico sono sempre coerenti?
- Gli utenti dei lettori di schermo ricevono le stesse informazioni degli utenti vedenti?
Collegamento con le linee guida per l’accessibilità (WCAG)
L’ambito relativo al nome, al ruolo e allo stato degli elementi riguarda principalmente il seguente criterio di successo WCAG:
- 4.1.2 Nome, ruolo, valore
Definendo correttamente nomi, ruoli e stati degli elementi interattivi, garantiamo che tutti gli utenti – indipendentemente dal modo in cui utilizzano il web – ricevano le stesse informazioni sulla funzionalità del sito web. In questo modo miglioriamo l’accessibilità, riduciamo la possibilità di errori e consentiamo un utilizzo efficace dei servizi digitali anche agli utenti delle tecnologie assistive.