JavaScript

JavaScript svolge un ruolo importante in quasi tutto ciò che creiamo, dai componenti dinamici più piccoli ai prodotti completi in esecuzione in un framework JavaScript come React o Angular.

L'uso (o l'uso eccessivo) di JavaScript ha portato a molte tendenze allarmanti, come tempi di caricamento lunghi dovuti a grandi quantità di codice, uso di elementi HTML non semantici e inserimento di HTML e CSS tramite JavaScript. Potresti non essere sicuro di come l'accessibilità si adatti a ognuno di questi aspetti.

JavaScript può avere un enorme impatto sull'accessibilità del tuo sito. In questo modulo, condivideremo alcuni pattern generali di accessibilità migliorati da JavaScript, nonché soluzioni per i problemi di accessibilità che derivano dall'uso dei framework JavaScript.

Eventi di attivazione

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, le persone con disabilità motorie, 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, poiché questa operazione influisce su tutti questi utenti.

Esaminiamo un evento di clic. Se un evento onClick() viene utilizzato su un elemento HTML semantico, ad esempio <button> o <a>, include naturalmente la funzionalità mouse e 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 trigger viene utilizzato un elemento non semantico, è necessario aggiungere un evento keydown/keyup per rilevare la pressione del tasto Invio o la barra spaziatrice. Spesso si dimentica l'aggiunta di eventi di trigger a elementi non semantici. Sfortunatamente, se dimentichi il risultato, il risultato è un componente accessibile solo tramite il mouse. Gli utenti che usano solo la tastiera non possono accedere alle azioni associate.

Titoli di pagina

Come abbiamo appreso 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 sono passati a 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 (APS) che vengono caricate da un singolo file index.html, in quanto le transizioni o i percorsi (modifiche alla 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 APS, il valore document.title può essere aggiunto manualmente o con un pacchetto helper (a seconda del framework JavaScript). La comunicazione dei titoli di pagina aggiornati a un utente di screen reader potrebbe richiedere ulteriore lavoro, ma la buona notizia è che hai a disposizione 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 inoltri il messaggio: "Ora hai eseguito l'accesso".

Puoi utilizzare l'elemento innerHTML per impostare i contenuti:

document.querySelector("#banner").innerHTML = '<p>You are now logged 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à. Sfortunatamente, l'inserimento di JavaScript di HTML e CSS da sempre è stato utilizzato in modo improprio per creare contenuti inaccessibili. Di seguito sono elencati alcuni degli usi impropri più comuni:

Per CSS, attiva/disattiva le classi CSS invece di aggiungere stili incorporati, in quanto questo consente riutilizzabilità e semplicità. Usa i contenuti nascosti nella pagina e attiva/disattiva le classi per nascondere e mostrare i contenuti per l'HTML dinamico. Se hai bisogno di utilizzare JavaScript per aggiungere contenuti in modo dinamico alla tua pagina, assicurati che sia semplice, conciso e, ovviamente, accessibile.

Gestione della concentrazione

Nel modulo di messa a fuoco della tastiera, abbiamo trattato gli stili degli indicatori e dell'ordine di impostazione. La gestione della concentrazione significa sapere quando e dove intrappolare l'attenzione.

La gestione dello stato attivo è fondamentale per gli utenti che usano solo la tastiera.

A livello di componente

Puoi creare blocchi da tastiera quando l'elemento attivo di un componente non è gestito correttamente. Un blocco da tastiera si verifica quando un utente che utilizza solo la tastiera rimane bloccato in un componente oppure quando lo stato attivo non viene mantenuto quando dovrebbe.

Uno dei pattern più comuni in cui gli utenti riscontrano problemi di gestione del focus è in un componente modale. Quando un utente che utilizza solo la tastiera incontra una finestra modale, deve essere in grado di passare da un elemento modale all'altro, ma non deve mai essere consentito al di fuori della finestra modale senza esplicitamente ignorarla. JavaScript è essenziale per catturare correttamente questo obiettivo.

Livello di pagina

Lo stato attivo deve essere mantenuto anche quando un utente passa da una pagina all'altra. Questo è particolarmente vero nelle APS, dove non viene eseguito nessun 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, l'elemento attivo viene mantenuto nella stessa posizione o potenzialmente altrove.

Durante la transizione da una pagina all'altra (o per il routing), il team di sviluppo deve decidere dove concentrarsi al caricamento della pagina.

Esistono diverse tecniche per raggiungere questo obiettivo:

• Imposta lo stato attivo sul contenitore principale con un annuncio aria-live.
• Sposta di nuovo l'elemento attivo su un link per passare ai contenuti principali.
• Sposta lo stato attivo sull'intestazione di livello superiore della nuova pagina.

La scelta del focus dipende dal framework che utilizzi e dai contenuti che vuoi mostrare agli utenti. Potrebbe dipendere dal contesto o dall'azione.

Gestione statale

Un'altra area in cui JavaScript è fondamentale per l'accessibilità è la gestione dello stato o quando lo stato visivo attuale di un componente o di una pagina viene inoltrato a un utente di tecnologie per la disabilità ipovedenti, ciechi o sordociechi.

Spesso, lo stato di un componente o di una pagina è gestito tramite 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.

A livello di componente

A seconda dei contenuti della pagina e delle informazioni necessarie agli utenti, esistono molti stati ARIA da considerare quando si inoltra all'utente le informazioni su un componente.

Ad esempio, puoi utilizzare un attributo aria-expanded per indicare 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 applichi gli attributi ARIA. Pensa al flusso utente per capire quali informazioni fondamentali dovrebbero essere comunicate all'utente.

Livello di pagina

Gli sviluppatori spesso usano un'area visivamente nascosta chiamata La regione live ARIA per annunciare le modifiche sullo schermo e avvisare gli utenti delle tecnologie per la disabilità (AT). Quest'area può essere abbinata a JavaScript per notificare agli utenti le modifiche dinamiche apportate alla pagina senza che sia necessario ricaricare l'intera pagina.

Storicamente, JavaScript ha avuto difficoltà ad annunciare contenuti nelle regioni aria-live e ad avvisare a causa della sua natura dinamica. L'aggiunta asincrona di contenuti nel DOM rende difficile per AT rilevare l'area geografica e annunciarla. Affinché i contenuti vengano letti correttamente, l'area geografica attiva o di avviso deve trovarsi nel DOM al momento del caricamento, quindi il testo può essere scambiato in modo dinamico.

Se utilizzi un framework JavaScript, la buona notizia è che quasi tutti dispongono di un pacchetto "annunciatore dal vivo" che fa tutto il lavoro per te ed è completamente accessibile. Non devi preoccuparti di creare una regione attiva e di gestire i problemi descritti nella sezione precedente.

Di seguito sono riportati alcuni pacchetti attivi per i framework JavaScript comuni:

• Reazione: react-aria-live e react-a11y-announcer
• Angolare: LiveAnnouncer
• Vista: vue-a11y-utils

JavaScript moderno è un linguaggio potente che consente agli sviluppatori web di creare applicazioni web affidabili. Questo a volte porta a una progettazione eccessiva e, di conseguenza, a schemi inaccessibili. Seguendo i suggerimenti e i pattern JavaScript descritti in questo modulo, puoi rendere le tue app più accessibili a tutti gli utenti.

Verifica la tua comprensione

Verifica le tue conoscenze di JavaScript