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 parametri a livello di controller nel routing di ASP.NET Core
Modernizzare le applicazioni WPF e Windows Forms con Blazor
Aggiungere le issue di più repository in una board in GitHub
Installazione di una PWA Blazor
Abilitare HTTP/3 in ASP.NET Core 7.0
Utilizzare azurite come simulatore di Azure Storage
Le novità di .NET 7 e C# 11
Gestire gli errori di caricamento delle immagini
Organizzare i moduli sfruttando CommonJS
Recuperare la data di creazione e ultima modifica di un record con Entity Framework Core e le temporal table di SQL Server
ChatOps con GitHub
Controllare lo stato di un servizio gRPC in ASP.NET Core tramite Health Check
I più letti di oggi
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Migliorare la scalabilità di ASP.NET Core 7 grazie all'output cache
- .NET Conference Italia 2022 - Milano e Online
- Ottenere il riferimento alla finestra che ha aperto un'altra finestra con HTML5 e JavaScript