Introduzione alle applicazioni Internet ricche accessibili

Le applicazioni Internet ricche (ARIA) sono una specifica tecnica pubblicata dal World Wide Web Consortium (W3C) che collega il divario tra interfacce dinamiche guidate da JavaScript e tecnologie assistive come lettori di schermo, display braille e software di controllo vocale. Senza ARIA, widget complessi come autocompleto dropdown, pannelli di schede, viste sugli alberi e dialoghi modali possono diventare invisibili o non intelligibili per gli utenti che si affidano a JavaScript.

Il valore centrale di ARIA sta nella sua capacità di aggiungere retroattivamente significato semantico agli elementi HTML che non possono trasmettere in nativo il loro ruolo o stato. Ad esempio, un ] stile per sembrare un pulsante rimane un contenitore generico nell'albero di accessibilità a meno che non venga dato e la gestione della tastiera appropriata.

Questo articolo passa attraverso l'implementazione pratica di ARIA con JavaScript, ricoprendo ruoli, stati, proprietà, gestione dinamica degli attributi, messa a fuoco e tastiera, e modelli comuni.

ARIA Roles, Stati e Proprietà

Roles: Definire il tipo Widget

Un ruolo ARIA dice la tecnologia assistiva che cosa un elemento dovrebbe fare. Per esempio, segnali che l'elemento è un pannello di contenuto associato a una scheda.

Stati e proprietà: Attributi dinamici

Gli stati ARIA sono attributi che cambiano in risposta all'interazione dell'utente o alla logica dell'applicazione.

  • – indica se un elemento pieghevole è aperto o chiuso.
  • – per i pulsanti di attivazione che si attivano/disattivano.
  • – usato nelle liste di schede, caselle di elenco o griglie per mostrare quale opzione è scelta.
  • – comunica che un elemento non è attualmente operativo.

Le proprietà, invece, tendono ad essere più stabili e descrivono relazioni o etichette. Gli esempi includono (punti all'ID di un elemento che controlla il widget), (lega un'etichetta visibile a un widget), e (denuncia che una regione si aggiornerà dinamicamente e dovrebbe essere monitorata dalla tecnologia assistiva).

JavaScript è responsabile di mantenere questi attributi sincronizzati con lo stato DOM sottostante. Ogni volta che un'azione utente o un evento tempestivo cambia l'interfaccia utente, gli attributi ARIA corrispondenti devono essere aggiornati immediatamente.

Implementazione ARIA con JavaScript: Modelli core

Gestione degli attributi dinamici

Il compito più semplice ARIA è quello di alleggerire gli attributi booleani. Il seguente modello è comune per menu espandibili, widget di divulgazione e pannelli di fisarmonica:

const trigger = document.getElementById('expand-trigger');
const target = document.getElementById('expandable-content');

trigger.addEventListener('click', () => {
 const isExpanded = trigger.getAttribute('aria-expanded') === 'true';
 trigger.setAttribute('aria-expanded', !isExpanded);
 target.hidden = isExpanded;
});

Si noti che l'attributo HTML è anche disattivato. Questo assicura che il contenuto sia veramente rimosso dall'albero di accessibilità quando è crollato, non solo visivamente nascosto.

Per i widget più complessi come un pannello a schede, devono essere gestiti insieme molteplici attributi. Quando viene selezionata una nuova scheda, la scheda precedentemente selezionata perde la sua [ e il suo pannello associato è nascosto, mentre la scheda appena selezionata guadagna e il suo pannello diventa visibile. Il JavaScript deve anche aggiornare per gestire l'attenzione all'interno della lista di schede.

Utilizzo per i contenuti dinamici

Quando il contenuto cambia al di fuori dell'attenzione dell'utente (ad esempio, viene visualizzato un aggiornamento di news feed o un errore di validazione), i lettori di schermo non possono annunciare il cambiamento a meno che la regione non sia contrassegnata con ]. La proprietà ] prende tre valori: (default), ] [non citazione di errore]] [[[FLT(non cfr] [[FLT]] [[FLT] [FLT]] [FLT]] [[FLTriservagli aggiornamenti]]]]]]]] [[FLT] [[FLT] [[FLT] [[FLT] [[FLT]]]] [[FLT]]]]] [[FLT] [FLT]] [[FLT] [[FLT] [[FLT] ]]]]] [[FLT]]] [[FLT] [[FLT]] [[FLTriserva di errore

const liveRegion = document.getElementById('status-messages');
liveRegion.setAttribute('aria-live', 'polite');

function addMessage(text) {
 const p = document.createElement('p');
 p.textContent = text;
 liveRegion.appendChild(p);
}

Importante: il contenuto deve essere allegato o rimosso all'interno della regione dal vivo. Cambiare completamente l'HTML interno può causare la mancata modifica da parte di alcuni lettori di schermo.

Gestione del focus con JavaScript

Quando si apre una finestra di dialogo modale, si deve spostare l'attenzione nella finestra di dialogo e intrappolata lì fino a quando non si chiude. Quando un menu si chiude, si deve tornare all'elemento che lo ha innescato. JavaScript gestisce queste transizioni chiamando sull'elemento appropriato e impostando valori.

Esempio di dialogo modale:

function openDialog(dialogElement) {
 dialogElement.removeAttribute('hidden');
 dialogElement.setAttribute('aria-modal', 'true');
 dialogElement.setAttribute('role', 'dialog');
 // Focus the first focusable element inside the dialog
 const firstFocusable = dialogElement.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
 if (firstFocusable) {
 firstFocusable.focus();
 }
 // Store the previously focused element
 this.lastFocused = document.activeElement;
}

La trapping di messa a fuoco assicura che la pressione di Tab o Shift+Tab cicli solo attraverso elementi all'interno della finestra di dialogo. Questo può essere raggiunto ascoltando per eventi keydown sulla finestra di dialogo e reindirizzando l'attenzione al primo o ultimo bambino focalizzabile quando necessario.

ARIA ruoli e attributi solo trasmettere semantica; essi non forniscono automaticamente l'interazione della tastiera. JavaScript deve implementare il comportamento della tastiera previsto per ogni modello di widget. Il W3C ARIA Guida di pratiche di autorizzazione (APG) fornisce convenzioni di tastiera dettagliate per i modelli comuni.

Non implementare il supporto della tastiera è uno dei guasti di accessibilità più comuni. Una giostra che risponde solo ai clic del mouse, un elenco di drag-and-drop che funziona solo con il tocco, o un tooltip che appare solo su hover esclude gli utenti di solo tastiera e di screen reader completamente.

Testare sempre la navigazione della tastiera senza un mouse: assicurarsi che tutti gli elementi interattivi siano raggiungibili tramite Tab, che l'ordine di messa a fuoco logico corrisponde al layout visivo, e che nessuna trappola di messa a fuoco impedisce di lasciare il widget.

Modelli ARIA comuni con JavaScript Esempi

1. Accordamento accessibile

Una fisarmonica consiste di widget di divulgazione multipli, ciascuno contenente una voce con un pulsante e un pannello pieghevole. ARIA attributi: sul pulsante, ] puntando al pannello, e sul pannello per la denominazione.

const accordionButtons = document.querySelectorAll('.accordion-button');
accordionButtons.forEach(btn => {
 btn.addEventListener('click', () => {
 const panel = document.getElementById(btn.getAttribute('aria-controls'));
 const expanded = btn.getAttribute('aria-expanded') === 'true';
 btn.setAttribute('aria-expanded', !expanded);
 panel.hidden = expanded;
 });
});

2. Combobox completo automatico

I combobox richiedono un input di testo ([[), un popup di listbox ([[]]), e opzioni ([[]]]). JavaScript deve gestire e come l'utente naviga con i tasti freccia.

3. Dialogo modulare

Una finestra di dialogo modale utilizza e . Quando aperto, il resto della pagina dovrebbe essere inerte, focalizzare l'attenzione intrappolata all'interno, e applicato ai contenitori di fratelli.

Testare le implementazioni ARIA

I test con la tecnologia reale assistiva sono insostituibili, ma gli strumenti automatizzati possono catturare molti problemi in anticipo. Gli strumenti dello sviluppatore del browser ora includono i pannelli di accessibilità che mostrano l'albero di accessibilità calcolato. L'estensione del browser axe DevTools rileva le violazioni come gli attributi mancanti ARIA, l'uso del ruolo e gli errori di gestione del fuoco. Inoltre, i lettori di controllo dello schermo verificano come NVDA di transizione di NVDA, JAver Voice list di dialogo

Un'altra pratica essenziale è la sperimentazione solo con la tastiera: scheda attraverso tutti i controlli interattivi, utilizzare i tasti freccia in tablist e combobox, e assicurarsi che nessun elemento diventa irraggiungibile.

Migliori Pratiche per la produzione-Ready ARIA con JavaScript

  • Preferire elementi HTML nativi[[]]] sui ruoli ARIA quando possibile. Un nativo [] è intrinsecamente focalizzabile, cliccabile, e trasmette il suo ruolo per la tecnologia assistiva.
  • Atterri ARIA in sincronia[] con lo stato DOM in ogni momento. Utilizzare un pattern JavaScript coerente, come una piccola funzione di utilità, per aggiornare gli attributi e lo stato visivo insieme.
  • ]Usa ] con cautela[]. Applicando ] rimuove un elemento e tutti i suoi figli dall'albero di accessibilità. Questo è utile per nascondere il contenuto di schermo o elementi decorativi, ma non dovrebbe mai essere applicato agli elementi focalizzabili (altri utenti di lettore di schermo possono incontrare un “ghost”).
  • ]Manage focus esplicitamente[[]] ogni volta che l'interfaccia utente cambia drasticamente. Dopo una chiusura modale, riavviare la messa a fuoco sul pulsante di scatto. Dopo che viene selezionata una voce del menu, tornare a fuoco sul pulsante del menu.
  • Provi le etichette chiare[[]] per ogni elemento interattivo. Usa [ quando non è presente alcuna etichetta visibile, o preferisci per associare un'etichetta esistente al widget. Allo stesso modo, usa [ per allegare descrizioni più lunghe o istruzioni ai widget complessi.
  • Test con utenti reali[[]] che si affidano alla tecnologia assistiva.Gli strumenti automatizzati catturano solo circa il 30-40% dei problemi di accessibilità.Il feedback degli utenti è prezioso per capire se la tua logica ARIA si traduce in un'esperienza utilizzabile.

Pitfalls comuni da evitare

Un errore frequente è l'applicazione di un ruolo ARIA ad un elemento senza fornire anche l'interazione della tastiera prevista. Ad esempio, dando [ a un [ ma non aggiungendo e un gestore di keydown per Enter/Space. Un altro sta usando per aggiornamenti di routine, che possono sopraffare gli utenti di screen reader interrompendo il loro compito corrente.

Un altro inconveniente è un ruolo di nidificazione errato. Un [] dovrebbe contenere solo bambini con [, e ogni scheda deve controllare un corrispondente [].

Infine, evitare cambiamenti dinamici che si verificano senza l'iniziazione dell'utente.ARIA attributi e focus dovrebbero solo aggiornare in risposta alle azioni dell'utente o alle modifiche dello stato dell'applicazione che l'utente si aspetta. Riorientare automaticamente un elemento dopo ogni pochi secondi o aggiornare regioni troppo spesso crea un'esperienza disorientante.

Conclusioni

ARIA fornisce il ponteggio semantico che trasforma i contenitori generici HTML in widget riconoscibili, mentre JavaScript li porta alla vita con comportamento dinamico, navigazione della tastiera e gestione dello stato. Ogni attributo—, , , e altri—must essere costantemente mantenuto con l'interfaccia visiva.

Seguendo i modelli e le migliori pratiche qui delineate, gli sviluppatori possono creare applicazioni web che funzionano per tutti: toccare, mouse, tastiera, lettore di schermo e controllo vocale. L'accessibilità non è un ripensamento; è una parte integrante del processo di sviluppo JavaScript. Per ulteriori informazioni, consultare la W3C ARIA Guida pratiche di autorizzazione e il [FLT: DR]