JavaScript svolge un ruolo fondamentale in quasi tutto ciò che creiamo, dai componenti dinamici più piccoli ai prodotti completi che funzionano su un framework JavaScript, come React o Angular.
Questo utilizzo (o uso eccessivo) di JavaScript ha portato a molte tendenze allarmanti, come tempi di caricamento lunghi a causa di grandi quantità di codice, utilizzo di elementi HTML non semantici e inserimento di HTML e CSS tramite JavaScript. Inoltre, potresti non sapere bene come l'accessibilità si inserisce in ogni componente.
JavaScript può avere un enorme impatto sull'accessibilità del tuo sito. In questo modulo, condivideremo alcuni pattern generali per l'accessibilità migliorati da JavaScript, nonché soluzioni per i problemi di accessibilità che si verificano con l'utilizzo di framework JavaScript.
Eventi di attivazione
Gli eventi JavaScript consentono agli utenti di interagire con i contenuti web ed eseguire un'azione specifica. Molte persone, ad esempio gli utenti di screen reader, le persone con disabilità motorie fini, le persone senza mouse o trackpad e altre ancora, si affidano al supporto della tastiera per interagire con il web. È fondamentale aggiungere il supporto della tastiera alle azioni JavaScript, in quanto riguarda tutti questi utenti.
Esamineremo un evento di clic.
Se un evento onClick() viene utilizzato su un elemento HTML semantico come <button> o <a>, include naturalmente le funzionalità del mouse e della tastiera. Tuttavia, la funzionalità della tastiera non viene applicata automaticamente quando un evento onClick() viene aggiunto a un elemento non semantico, ad esempio un <div> generico.
<div role="button" tabindex="0" onclick="doAction()">Click me!</div>
<button onclick="doAction()">Click me!</button>
Visualizza l'anteprima di questo confronto su CodePen.
Se per un evento di attivazione viene utilizzato un elemento non semantico, è necessario aggiungere un evento keydown/keyup per rilevare la pressione del tasto Invio o Spazio. Spesso si dimentica di aggiungere eventi di attivazione agli elementi non semantici. Purtroppo, se viene dimenticato, il risultato è un componente accessibile solo con un mouse. Gli utenti che utilizzano solo la tastiera non avranno accesso alle azioni associate.
Titoli di pagina
Come abbiamo appreso nel modulo Documenti, il titolo della pagina è essenziale per gli utenti di screen reader. Indica agli utenti su quale pagina si trovano e se sono passati a una nuova pagina.
Se utilizzi un framework JavaScript, devi considerare come gestisci i titoli delle pagine. Questo è particolarmente importante per le
app a pagina singola (APS)
che vengono caricate da un singolo file index.html, poiché le transizioni o i percorsi (variazioni di pagina) non comportano il ricaricamento della pagina. Ogni volta che un utente carica una nuova pagina in un'APS, il titolo non cambia per impostazione predefinita.
Per le SPA, il valore document.title può essere aggiunto manualmente o con un pacchetto di assistenza (a seconda del framework JavaScript). Annunciare i titoli delle pagine aggiornati a un utente di screen reader potrebbe richiedere un po' di lavoro aggiuntivo, ma la buona notizia è che hai a disposizione delle opzioni, come i contenuti dinamici.
Contenuti dinamici
Una delle funzionalità più potenti di JavaScript è la possibilità di aggiungere HTML e CSS a qualsiasi elemento della pagina. Gli sviluppatori possono creare applicazioni dinamiche in base alle azioni o ai comportamenti degli utenti.
Supponiamo che tu debba inviare un messaggio agli utenti quando accedono al tuo sito web o alla tua app. Vuoi che il messaggio risalti sullo sfondo bianco e trasmetta il messaggio: "Hai eseguito l'accesso".
Puoi utilizzare l'elemento
innerHTML
per impostare i contenuti:
document.querySelector("#banner").innerHTML = '<p>You are now signed in</p>';
Puoi applicare il CSS in modo simile, con
setAttribute:
document.querySelector("#banner").setAttribute("style", "border-color:#0000ff;");
Da un grande potere derivano grandi responsabilità. Purtroppo, l'iniezione di JavaScript in HTML e CSS è stata storicamente usata in modo improprio per creare contenuti inaccessibili. Di seguito sono elencati alcuni usi impropri comuni:
| Possibile uso improprio | Utilizzo corretto |
|---|---|
| Eseguire il rendering di grandi blocchi di codice HTML non semantico | Esegui il rendering di parti più piccole di HTML semantico |
| Non lasciare tempo sufficiente per il riconoscimento dei contenuti dinamici da parte della tecnologia per la disabilità | Utilizzo di un ritardo di setTimeout() secondi per consentire agli utenti di ascoltare il messaggio completo |
Applicazione dinamica degli attributi di stile per onFocus() |
Utilizza :focus per gli elementi correlati nel foglio di stile CSS |
| L'applicazione di stili in linea potrebbe causare la mancata lettura corretta delle stylesheet dell'utente | Mantieni gli stili nei file CSS per mantenere la coerenza del tema |
| Creazione di file JavaScript molto grandi che rallentano le prestazioni complessive del sito | Utilizza meno JavaScript. Potresti essere in grado di eseguire funzioni simili in CSS (ad esempio animazioni o navigazione fissa), che vengono analizzate più velocemente e hanno un rendimento migliore |
Per il CSS, attiva/disattiva le classi CSS anziché aggiungere stili incorporati, in quanto questo consente la riutilizzabilità e la semplicità. Utilizza i contenuti nascosti nella pagina e attiva/disattiva le classi per nascondere e mostrare i contenuti per l'HTML dinamico. Se devi utilizzare JavaScript per aggiungere contenuti in modo dinamico alla tua pagina, assicurati che sia semplice, conciso e, naturalmente, accessibile.
Gestione della modalità Niente distrazioni
Nel modulo sull'attenzione da tastiera abbiamo trattato l'ordine di attenzione e gli stili degli indicatori. La gestione dell'attenzione consiste nel sapere quando e dove attirarla e quando non deve essere attirata.
La gestione dell'attenzione è fondamentale per gli utenti che utilizzano solo la tastiera.
A livello di componente
Puoi creare trappole per tastiera quando l'attenzione di un componente non è gestita correttamente. Una trappola da tastiera si verifica quando un utente che utilizza solo la tastiera si blocca in un componente o se il fuoco non viene mantenuto quando dovrebbe.
Uno dei pattern più comuni in cui gli utenti riscontrano problemi di gestione dell'attenzione è un componente modale. Quando un utente che utilizza solo la tastiera incontra una finestra modale, deve essere in grado di passare da un elemento all'altro della finestra modale, ma non deve mai essere consentito uscire dalla finestra modale senza chiuderla esplicitamente. JavaScript è essenziale per bloccare correttamente questo stato attivo.
A livello di pagina
Lo stato attivo deve essere mantenuto anche quando un utente passa da una pagina all'altra. Questo accade soprattutto nelle SPA, dove non viene eseguito l'aggiornamento del browser e tutti i contenuti cambiano in modo dinamico. Ogni volta che un utente fa clic su un link per passare a un'altra pagina all'interno della tua applicazione, lo stato attivo viene mantenuto nello stesso luogo o potenzialmente posizionato in un altro posto.
Quando si passa da una pagina all'altra (o si esegue il routing), il team di sviluppo deve decidere dove viene applicato lo stato attivo al caricamento della pagina.
Esistono diverse tecniche per farlo:
- Metti lo stato attivo sul contenitore principale con un
aria-liveannuncio. - Riponi lo stato attivo su un link per passare ai contenuti principali.
- Sposta lo stato attivo sull'intestazione di primo livello della nuova pagina.
La scelta dell'elemento su cui concentrarti dipende dal framework che utilizzi e dai contenuti che vuoi mostrare agli utenti. Potrebbe dipendere dal contesto o dall'azione.
Gestione dello stato
Un'altra area in cui JavaScript è fondamentale per l'accessibilità è la gestione dello stato, ovvero quando lo stato visivo corrente di un componente o di una pagina viene trasmesso a un utente di tecnologia per la disabilità che è ipovedente, cieco o sordocieco.
Spesso, lo stato di un componente o di una pagina viene gestito tramite gli attributi ARIA, come introdotto nel modulo ARIA e HTML. Vediamo alcuni dei tipi più comuni di attributi ARIA utilizzati per gestire lo stato di un elemento.
A livello di componente
A seconda dei contenuti della pagina e delle informazioni di cui hanno bisogno gli utenti, esistono molti stati ARIA da prendere in considerazione quando si trasmettono informazioni su un componente all'utente.
Ad esempio, puoi utilizzare un attributo
aria-expanded
per indicare all'utente se un menu o un elenco a discesa è espanso o chiuso.
In alternativa, puoi utilizzare aria-pressed per indicare che è stato premuto un pulsante.
È importante essere selettivi quando si applicano gli attributi ARIA. Valuta il flusso utente per capire quali informazioni critiche devono essere comunicate all'utente.
A livello di pagina
Gli sviluppatori utilizzano spesso un'area nascosta visivamente chiamata regione attiva ARIA per annunciare le modifiche sullo schermo e inviare messaggi di avviso agli utenti di tecnologie per la disabilità (AT). Questa area può essere accoppiata a JavaScript per notificare agli utenti le modifiche dinamiche alla pagina senza richiedere il ricaricamento dell'intera pagina.
In passato, JavaScript ha avuto difficoltà ad annunciare contenuti nelle regioni aria-live e di avviso a causa della sua natura dinamica. L'aggiunta di contenuti in modo asincrono nel DOM rende difficile per l'AT rilevare la regione e annunciarla.
Affinché i contenuti vengano letti correttamente, la regione in tempo reale o di avviso deve trovarsi nel DOM al caricamento, in modo che il testo possa essere sostituito dinamicamente.
Se utilizzi un framework JavaScript, la buona notizia è che quasi tutti hanno un pacchetto "annunciatore dal vivo" che fa tutto il lavoro al posto tuo ed è completamente accessibile. Non devi preoccuparti di creare una regione attiva e di gestire i problemi descritti nella sezione precedente.
Ecco alcuni pacchetti attivi per i framework JavaScript più comuni:
- React: react-aria-live e react-a11y-announcer
- Angular:
LiveAnnouncer - Vue: vue-a11y-utils
Il moderno JavaScript è un linguaggio potente che consente agli sviluppatori web di creare applicazioni web solide. A volte questo porta a una progettazione eccessiva e, di conseguenza, a pattern inaccessibili. Seguendo i pattern e i suggerimenti di JavaScript in questo modulo, puoi rendere le tue app più accessibili a tutti gli utenti.
Verificare di aver compreso
Metti alla prova le tue conoscenze di JavaScript
Qual è il modo migliore per modificare lo stile di un elemento con JavaScript?
Tutte le azioni JavaScript possono supportare gli utenti della tastiera?