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
Evitare la command injection in un workflow di GitHub
Inizializzare i container in Azure Container Apps
Disabilitare automaticamente un workflow di GitHub
Utilizzare Tailwind CSS all'interno di React: installazione
Eseguire attività pianificate con Azure Container Jobs
Utilizzare database e servizi con gli add-on di Container App
Implementare l'infinite scroll con QuickGrid in Blazor Server
Gestire errori funzionali tramite exception in ASP.NET Core Web API
Gestire undefined e partial nelle reactive forms di Angular
Mascherare l'output di un valore all'interno dei log di un workflow di GitHub
Assegnare un valore di default a un parametro di una lambda in C#
Generare file PDF da Blazor WebAssembly con iText
I più letti di oggi
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Creare un validator custom per le reactive form in Angular
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Creare un'applicazione che utilizza SCSS invece dei CSS tramite Angular-CLI
- Aggiungere un metodo Format alla classe string in TypeScript
- Controllo ortografico in una pagina web con HTML5
- Estendibilità del software: IoC, MEF e dintorni
- Definire lo stile #css in base alle dimensioni del container https://aspit.co/cfx di @morwalpiz
- Utilizzare le direttive ngSwitch e ngSwitchCase di Angular
- Gestire lo stato con un hook all'interno di un function component di ReactJS