JavaScript gioca un ruolo fondamentale in quasi tutto ciò che creiamo, dai formati più piccoli dai componenti dinamici ai prodotti completi in esecuzione su un framework JavaScript, come React o Angular.
Questo uso (o un uso eccessivo) di JavaScript ha portato avanti molte tendenze allarmanti, tempi di caricamento lunghi a causa di grandi quantità di codice, uso di codice HTML non semantico e inserire HTML e CSS tramite JavaScript. Potresti essere non sono sicuri di come si inserisce l'accessibilità in ciascuno di questi elementi.
JavaScript può avere un grande impatto sull'accessibilità del tuo sito. In questo condivideremo alcuni modelli generali di accessibilità che sono migliorati tramite JavaScript, nonché le soluzioni ai problemi di accessibilità derivanti usando framework JavaScript.
Eventi trigger
Gli eventi JavaScript consentono agli utenti di interagire con contenuti web ed eseguire una un'azione specifica. Molte persone, come gli utenti di screen reader, persone con disabilità motorie, persone senza mouse o trackpad, e altri, 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.
Esaminiamo un evento di clic.
Se viene utilizzato un evento onClick() su un elemento HTML semantico come <button>
o <a>, include naturalmente funzionalità di mouse e 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 trigger viene utilizzato un elemento non semantico, viene restituito evento keydown/keyup deve essere aggiunto per rilevare la pressione del tasto Invio o della barra spaziatrice. Aggiunta di eventi trigger a gli elementi non semantici vengono spesso dimenticati. Purtroppo, quando viene dimenticato, il risultato è un componente accessibile solo con il mouse. Solo tastiera gli utenti rimangono senza 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 la pagina sono attivi e se hanno raggiunto una nuova pagina.
Se usi un framework JavaScript, devi considerare come gestisci la pagina
titoli. Ciò è particolarmente importante per
app a pagina singola (APS)
che vengono caricate da un singolo file index.html, come transizioni o route (
modifiche) non comporteranno 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 valore può essere aggiunto manualmente o con un pacchetto helper (a seconda del framework JavaScript). Presentazione della titoli di pagina aggiornati a uno screen reader potrebbe richiedere del lavoro aggiuntivo, ma la buona notizia è disponibili, ad esempio, contenuti dinamici.
Contenuti dinamici
Una delle funzionalità JavaScript più potenti è la possibilità di aggiungere codice 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 all'app. Il messaggio deve risaltare rispetto allo sfondo bianco e deve essere inoltrato il messaggio: "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 i CSS in modo simile, con
setAttribute:
document.querySelector("#banner").setAttribute("style", "border-color:#0000ff;");
Da un grande potere derivano grandi responsabilità. Purtroppo, JavaScript l'iniezione di codice HTML e CSS è stata storicamente utilizzata in modo improprio per creare contenuti. Di seguito sono elencati alcuni usi impropri comuni:
| Possibile uso improprio | Uso corretto |
|---|---|
| Visualizza grandi blocchi di codice HTML non semantico | Visualizza porzioni di codice HTML semantico più piccole |
| Mancato tempo 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 il messaggio completo |
Applicazione dinamica degli attributi di stile per onFocus() |
Utilizza :focus per gli elementi correlati nel tuo foglio di stile CSS |
| L'applicazione di stili incorporati può causare la lettura non corretta dei fogli di stile 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 | Usa meno JavaScript. Potresti essere in grado di eseguire funzioni simili in CSS (ad esempio animazioni o navigazione persistente), che vengono analizzate più rapidamente e sono più efficienti |
Per CSS, attiva/disattiva le classi CSS invece dell'aggiunta di stili incorporati, in quanto 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 pagina; assicurati che sia semplice e concisi e, naturalmente, accessibili.
Gestione degli obiettivi
Nel modulo Focus Tastiera, abbiamo trattato l'ordine e gli stili degli indicatori. La gestione della concentrazione è sapere quando e dove bloccare l'elemento attivo e i momenti in cui non devono essere bloccati.
La gestione dell'attenzione è fondamentale per gli utenti che usano solo la tastiera.
Livello di componente
Puoi creare trappole da tastiera quando l'elemento attivo di un componente non è gestito correttamente. Il blocco della tastiera si verifica quando un utente che utilizza solo la tastiera rimane bloccato in un componente. l'attenzione non viene mantenuta quando dovrebbe essere.
Uno dei modelli più comuni in cui gli utenti riscontrano problemi di gestione degli obiettivi è in un componente modale. Quando un utente con solo tastiera rileva un modale, dovrebbero essere in grado di spostarsi tra gli elementi interattivi della finestra modale, non dovrebbero mai essere consentiti al di fuori della finestra modale senza ignorarlo esplicitamente. JavaScript è essenziale per bloccare correttamente questo focus.
A 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 si trovano nessun aggiornamento del browser, e tutti i contenuti cambiano in modo dinamico. Ogni volta che un utente fa clic su un link per andare su un'altra pagina dell'applicazione, lo stato attivo viene mantenuto di un luogo o potenzialmente posizionati in un'altra posizione.
Durante la transizione da una pagina all'altra (o elaborazione del percorso), il team di sviluppo deve decidere l'elemento attivo quando viene caricata la pagina.
Esistono diverse tecniche per raggiungere questo obiettivo:
- Consente di impostare lo stato attivo sul contenitore principale con un annuncio
aria-live. - Sposta di nuovo lo stato attivo su un link per passare ai contenuti principali.
- Sposta lo stato attivo sull'intestazione di primo livello della nuova pagina.
La decisione su cui concentrare l'attenzione dipenderà dal framework che stai utilizzando e i contenuti che vuoi offrire ai tuoi utenti. Può trattarsi di un argomento dipende dall'azione.
Gestione degli stati
Un'altra area in cui JavaScript è fondamentale per l'accessibilità è la gestione degli stati, o quando lo stato visivo corrente di un componente o di una pagina viene inoltrato a utenti di tecnologie per la disabilità ipovedenti, ciechi o sordocieche.
Spesso, lo stato di un componente o di una pagina viene gestito tramite attributi ARIA, come come illustrato nel modulo ARIA e HTML. Esaminiamo alcuni dei tipi più comuni di attributi ARIA utilizzati per gestire lo stato di un elemento.
Livello di componente
A seconda dei contenuti della pagina e delle informazioni di cui gli utenti hanno bisogno, ci sono molti stati ARIA da considerare quando si inoltrano informazioni su un componente all'utente.
Ad esempio, puoi utilizzare
aria-expanded
per indicare all'utente se un menu a discesa o un elenco è espanso oppure
compressi.
In alternativa, puoi utilizzare aria-pressed
per indicare che è stato premuto un pulsante.
È importante essere selettivi quando si applicano gli attributi ARIA. Analizza la la procedura per capire quali informazioni fondamentali devono essere comunicate all'utente.
A livello di pagina
Gli sviluppatori spesso usano un'area visivamente nascosta chiamata Regione in tempo reale ARA di annunciare cambiamenti sullo schermo e messaggi di avviso relativi alle tecnologie per la disabilità (AT). Quest'area può essere abbinata a JavaScript per informare gli utenti della presenza di annunci modifiche alla pagina senza richiedere il ricaricamento dell'intera pagina.
Storicamente, JavaScript ha avuto difficoltà ad annunciare contenuti in
aria-live
e regioni di avviso, data la sua natura dinamica. Aggiunta asincrona dei contenuti in
il DOM rende difficile per AT rilevare la regione e annunciarlo.
Per leggere correttamente i contenuti, la regione Live o Alert deve trovarsi nella
DOM al caricamento, il testo può essere scambiato dinamicamente.
Se utilizzi un framework JavaScript, la buona notizia è che quasi tutti dispongono di un "annunciatore live" che fa tutto il lavoro per te e che accessibili. Non è necessario preoccuparsi di creare una regione attiva con i problemi descritti nella sezione precedente.
Ecco alcuni pacchetti attivi per i framework JavaScript più comuni:
- Reazione: react-aria-live e annuncio-reagire-a11y
- Angolare:
LiveAnnouncer - Vue: vue-a11y-utils
JavaScript moderno è un linguaggio potente che consente agli sviluppatori web di creare solide applicazioni web. Questo a volte porta a un eccesso di attività ingegneristica e, un'estensione, pattern inaccessibili. Seguendo i pattern e i suggerimenti JavaScript In questo modulo puoi rendere le tue app più accessibili a tutti gli utenti.
Verifica le tue conoscenze
Verifica 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?