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 trigger
Gli eventi JavaScript consentono agli utenti di interagire con i contenuti web ed eseguire un'azione specifica. Molte persone, come gli utenti di screen reader, con disabilità motorie, persone senza mouse o trackpad e altri 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, come 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 imparato nel modulo Documento, 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à JavaScript più potenti è 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 CSS, attiva/disattiva le classi CSS invece dell'aggiunta di stili in linea, in quanto ciò consente una maggiore possibilità di riusabilità e 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 dello stato attivo della tastiera abbiamo parlato dell'ordine dello stato attivo e degli stili degli indicatori. La gestione della concentrazione è sapere quando e dove bloccare l'attenzione.
La gestione dell'attenzione è fondamentale per gli utenti che utilizzano solo la tastiera.
Livello di componente
Puoi creare trappole da tastiera quando l'elemento attivo di un componente non è gestito 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 con solo tastiera rileva un modale, deve essere in grado di passare da un elemento modale all'altro, ma non deve mai essere consentito al di fuori del modale senza ignorarlo 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 dell'applicazione, lo stato attivo viene mantenuto nella stessa posizione o potenzialmente altrove.
Durante la transizione da una pagina all'altra (o elaborazione del percorso), il team di sviluppo deve decidere dove deve essere impostato lo stato attivo durante il caricamento della pagina.
Esistono diverse tecniche per raggiungere questo obiettivo:
- 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.
Gli aspetti su cui concentrarti dipende dal framework in uso e dai contenuti che vuoi mostrare agli utenti. Potrebbe dipendere dal contesto o dall'azione.
Gestione degli stati
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 tecnologie 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). Quest'area può essere abbinata a JavaScript per informare gli utenti in caso di modifiche dinamiche alla pagina senza richiedere il ricaricamento dell'intera pagina.
Storicamente, JavaScript ha avuto difficoltà ad annunciare contenuti nelle regioni di aria-live e a inviare avvisi 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 essere nel DOM al caricamento, quindi il testo può 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.
Verifica le tue conoscenze
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?