Nello script #328 abbiamo parlato di accessibilità e posto l'accento sul migliorare l'utilizzo delle pagine web tramite lettori di schermo.
Nell'esempio riportato valutavamo un cambiamento dinamico sull'attributo di un bottone. Nel caso l'operazione sul form vada bene o male, potremmo mostrare un messaggio, arrivando quindi a contare due modifiche rispetto allo stato iniziale, le quali per un utente classico non presentano alcun problema, ma potrebbero essere difficili da rilevare per utenti con disabilità visive o da lettori di schermo.
Per intercettare questi cambiamenti dobbiamo utilizzare le cosiddette Live Regions, sulle quali gli assistenti vocali stanno in ascolto riuscendo a notificare i cambiamenti che avvengono al loro interno.
<button type="submit" aria-disabled="true"> Aggiungi al carrello <span aria-live="assertive" class="sr-only"> <!-- Carico messaggio al submit/loading del bottone --> </span> </button> <p aria-live="assertive"> <!-- Carico un messaggio alla conclusione delle operazioni --></p>
Tramite aria-live possiamo informare tutti gli assistenti riguardo la possibilità che il contenuto in quel box potrebbe variare e l'utente dovrà esserne informato a riguardo.
Nel caso del bottone utilizziamo anche la classe sr-only, che nasconderà l'elemento span a video ma non agli assistenti.
Nell'esempio abbiamo valorizzato aria-live con assertive, questo farà si che al cambiamento del testo ogni operazione di lettura in corso verrà interrotta per leggere il contenuto. Se volessimo invece notificare il nuovo stato dell'elemento solo al termine di tutte le altre operazioni dovremmo utilizzare il valore polite.
Creiamo una casistica per comprendere meglio quale valore utilizzare: abbiamo un form username/password nel quale inseriamo valori errati. Per informare l'utente inseriremo in una sezione assertive un messaggio di errore generico, come "Attenzione credenziali errate", e in sezioni polite messaggi come "nome utente errato" o "password errata"
Altri consigli riguardano le modalità in cui inseriamo l'attributo in pagina: gli assistenti vocali analizzano il codice HTML durante il caricamento: è suggerito inserire tutti gli attributi aria-live direttamente nel markdown e non tramite javascript. Preferire il valore polite aiuta a mantenere un flusso di lettura lineare, senza interruzioni. È importante anche una corretta contestualizzazione: aggiungere aria-live="polite" al body della pagina potrebbe essere più dannoso che utile e al momento in cui il componente verrà nascosto visivamente dobbiamo ricordarci di disabilitare l'aggiornamento automatico impostando aria-live="off".
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzare Tailwind CSS all'interno di React: installazione
Controllare gli accessi IP alle app con Azure Container Apps
Utilizzare flat e flatMap per appiattire array innestati in array
Semplificare il deployment di siti statici con Azure Static Web App
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON
Catturare la telemetria degli eventi di output cache in ASP.NET Core
Effettuare update massivi con Entity Framework Core 7
Creare gruppi di client per Event Grid MQTT
Utilizzare le Cache API di JavaScript per salvare elementi nella cache del browser
Utilizzare l'operatore GroupBy come ultima istruzione di una query LINQ in Entity Framework
Aggiungere interattività lato server in Blazor 8
Effettuare il deploy di immagini solo da container registry approvati in Kubernetes