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
Configurare automaticamente un webhook in Azure DevOps
Change tracking e composition in Entity Framework
Ordine e importanza per @layer in CSS
Gestione file Javascript in Blazor con .NET 9
Evitare memory leaks nelle closure JavaScript
Migliorare l'organizzazione delle risorse con Azure Policy
Simulare Azure Cosmos DB in locale con Docker
Gestire progetti .NET + React in .NET Aspire
Supportare la crittografia di ASP.NET Core con Azure Container App
Gestire progetti NPM in .NET Aspire
Utilizzare l nesting nativo dei CSS
Autenticazione di git tramite Microsoft Entra ID in Azure DevOps
I più letti di oggi
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Documentare i servizi REST con Swagger e OpenAPI con .NET 9
- Impersonation di utente per l'esecuzione di codice in una pagina ASP.NET
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!