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".