JavaScript svolge un ruolo fondamentale in quasi tutto ciò che creiamo, dai componenti dinamici più piccoli ai prodotti completi che vengono eseguiti su un framework JavaScript, come React o Angular.
Questo utilizzo (o abuso) di JavaScript ha portato alla luce molte tendenze allarmanti, come tempi di caricamento lunghi dovuti a grandi quantità di codice, utilizzo di elementi HTML non semantici e inserimento di HTML e CSS tramite JavaScript. e potresti non sapere come l'accessibilità si inserisca in ciascuno di questi elementi.
JavaScript può avere un impatto enorme 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à derivanti dall'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, le persone senza mouse o trackpad e altre, si affidano al supporto della tastiera per interagire con il web. È fondamentale aggiungere il supporto della tastiera alle azioni JavaScript, in quanto interessa tutti questi utenti.
Esaminiamo un evento di clic.
Se un evento onClick() viene utilizzato su un elemento HTML semantico come <button>
o <a>, include naturalmente sia la funzionalità del mouse che quella 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 viene utilizzato un elemento non semantico per un evento attivatore, è necessario aggiungere un evento keydown/keyup per rilevare la pressione del tasto Invio o Spazio. L'aggiunta di eventi trigger a elementi non semantici viene spesso dimenticata. Purtroppo, quando viene dimenticato, il risultato è un componente accessibile solo con un mouse. Gli utenti che utilizzano solo la tastiera non hanno accesso alle azioni associate.
Titoli di pagina
Come abbiamo visto nel modulo Documento, il titolo della pagina è essenziale per gli utenti di screen reader. Indica agli utenti la pagina in cui si trovano e se hanno raggiunto una nuova pagina.
Se utilizzi un framework JavaScript, devi considerare come gestire i titoli delle pagine. Ciò è particolarmente importante per le
app a pagina singola (SPA)
che vengono caricate da un singolo file index.html, poiché le transizioni o le route (cambi di pagina)
non comportano un 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 helper (a seconda del framework JavaScript). Annunciare i titoli delle pagine aggiornati a un utente di screen reader potrebbe richiedere un lavoro aggiuntivo, ma la buona notizia è che hai a disposizione diverse 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 si distingua dallo sfondo bianco e che 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'inserimento di HTML e CSS tramite JavaScript è stato storicamente utilizzato in modo improprio per creare contenuti inaccessibili. Di seguito sono elencati alcuni utilizzi impropri comuni:
| Possibile uso improprio | Utilizzo corretto |
|---|---|
| Eseguire il rendering di grandi blocchi di HTML non semantico | Eseguire il rendering di parti più piccole di HTML semantico |
| Non concedere tempo sufficiente per il riconoscimento dei contenuti dinamici da parte delle tecnologie per la disabilità | Utilizzo di un ritardo di setTimeout() per consentire agli utenti di ascoltare l'intero messaggio |
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 impedire la corretta lettura dei fogli di stile dell'utente | Mantieni gli stili nei file CSS per garantire 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ù rapidamente e sono più efficienti |
Per CSS, attiva/disattiva le classi CSS anziché aggiungere stili in linea, in quanto ciò consente riutilizzabilità 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 dinamicamente contenuti alla tua pagina, assicurati che siano semplici e concisi e, naturalmente, accessibili.
Gestione del focus
Nel modulo Focus della tastiera, abbiamo parlato dell'ordine e degli stili dell'indicatore di messa a fuoco. La gestione dello stato attivo consiste nel sapere quando e dove bloccare lo stato attivo e quando non deve essere bloccato.
La gestione dello stato attivo è fondamentale per gli utenti che utilizzano solo la tastiera.
Livello del componente
Puoi creare trappole per la tastiera quando lo stato attivo di un componente non è gestito correttamente. Una trappola per la tastiera si verifica quando un utente che utilizza solo la tastiera rimane bloccato in un componente oppure il focus non viene mantenuto quando dovrebbe.
Uno dei pattern più comuni in cui gli utenti riscontrano problemi di gestione dello stato attivo si verifica in un componente modale. Quando un utente che utilizza solo la tastiera incontra una finestra modale, deve poter spostarsi con il tasto Tab tra gli elementi interattivi della finestra modale, ma non deve mai essere autorizzato a uscire dalla finestra modale senza chiuderla esplicitamente. JavaScript è essenziale per bloccare correttamente lo stato attivo.
A livello di pagina
Il focus deve essere mantenuto anche quando un utente passa da una pagina all'altra. Ciò è particolarmente vero nelle SPA, dove non è previsto 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 spostato altrove.
Durante la transizione tra le pagine (o il routing), il team di sviluppo deve decidere dove si sposta lo stato attivo quando la pagina viene caricata.
Esistono diverse tecniche per raggiungere questo obiettivo:
- Sposta la selezione sul contenitore principale con un
aria-liveannuncio. - Riporta lo stato attivo su un link per passare ai contenuti principali.
- Sposta lo stato attivo sull'intestazione di primo livello della nuova pagina.
Il punto su cui decidi di 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 altro ambito in cui JavaScript è fondamentale per l'accessibilità è la gestione dello stato, ovvero quando lo stato visivo attuale di un componente o di una pagina viene trasmesso a un utente di tecnologie per la disabilità ipovedente, cieco o con cecità e sordità.
Spesso, lo stato di un componente o di una pagina viene gestito tramite gli attributi ARIA, come introdotto nel modulo ARIA e HTML. Esaminiamo alcuni dei tipi più comuni di attributi ARIA utilizzati per gestire lo stato di un elemento.
Livello del componente
A seconda dei contenuti della pagina e delle informazioni di cui hanno bisogno gli utenti, esistono molti stati ARIA da considerare quando si trasmettono informazioni su un componente all'utente.
Ad esempio, puoi utilizzare un
attributo aria-expanded
per comunicare all'utente se un menu a discesa o un elenco è espanso o
compresso.
In alternativa, puoi utilizzare aria-pressed
per indicare che è stato premuto un pulsante.
È importante essere selettivi quando si applicano gli attributi ARIA. Rifletti sul flusso utente per capire quali informazioni critiche devono essere comunicate all'utente.
A livello di pagina
Gli sviluppatori spesso utilizzano un'area nascosta visivamente chiamata regione dinamica ARIA per annunciare modifiche sullo schermo e messaggi di avviso agli utenti di tecnologie per la disabilità. Questa area può essere abbinata a JavaScript per comunicare agli utenti le modifiche dinamiche alla pagina senza richiedere il ricaricamento dell'intera pagina.
Storicamente, JavaScript ha avuto difficoltà ad annunciare i contenuti in
aria-live
e nelle regioni di avviso a causa della sua natura dinamica. L'aggiunta asincrona di contenuti al DOM rende difficile per le tecnologie assistive selezionare la regione e annunciarla.
Affinché i contenuti vengano letti correttamente, la regione live o di avviso deve trovarsi 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 "live announcer" che fa tutto il lavoro per te ed è completamente accessibile. Non devi preoccuparti di creare un'area dinamica e di risolvere i problemi descritti nella sezione precedente.
Ecco alcuni pacchetti live per i framework JavaScript più comuni:
- React: react-aria-live e react-a11y-announcer
- Angular:
LiveAnnouncer - Vue: vue-a11y-utils
JavaScript moderno è un linguaggio potente che consente agli sviluppatori web di creare applicazioni web robuste. A volte questo porta a una progettazione eccessiva e, di conseguenza, a pattern inaccessibili. Seguendo i pattern e i suggerimenti JavaScript di questo modulo, puoi rendere le tue app più accessibili a tutti gli utenti.