Checklist WCAG 2.2 per creatori di corsi online: ogni requisito spiegato

Creare un corso online dall’aspetto curato e con contenuti eccellenti è solo metà del lavoro. Se gli studenti con disabilità non riescono a percepire i tuoi video, navigare i tuoi quiz o comprendere le tue istruzioni, il tuo corso è fondamentalmente difettoso per una porzione significativa del pubblico. Le Web Content Accessibility Guidelines (WCAG) 2.2, pubblicate dal W3C nell’ottobre 2023, forniscono lo standard tecnico definitivo per rendere accessibili i contenuti digitali. Questa checklist traduce ogni requisito WCAG 2.2 di Livello AA rilevante in azioni concrete che i creatori di corsi online e gli instructional designer possono implementare immediatamente.

Le WCAG 2.2 organizzano i loro 56 criteri di successo sotto quattro principi, noti con l’acronimo POUR: Perceivable (Percepibile), Operable (Utilizzabile), Understandable (Comprensibile) e Robust (Robusto). Ogni principio affronta una dimensione diversa dell’accessibilità. Questo articolo analizza i criteri più rilevanti per i corsi online, spiega cosa significa ciascuno nella pratica, fornisce indicazioni per l’implementazione e segnala gli errori più comuni dei creatori di corsi.

Usala come riferimento operativo. Stampala, salvala nei preferiti o condividila con il tuo team. Se stai costruendo corsi su Eduspera, molti di questi controlli sono automatizzati attraverso il punteggio di accessibilità integrato nella piattaforma — ma comprendere i requisiti sottostanti ti rende un creatore di corsi migliore indipendentemente dagli strumenti che utilizzi.

Principio 1: Percepibile

I contenuti devono essere presentati in modi che tutti gli utenti possano percepire — attraverso la vista, l’udito o il tatto. Per i creatori di corsi, questo principio governa come gestisci immagini, video, audio, colore e formattazione del testo.

1.1.1 Contenuti non testuali (Livello A)

Cosa significa: Ogni elemento non testuale — immagini, diagrammi, grafici, icone, infografiche — deve avere un’alternativa testuale che trasmetta le stesse informazioni. Gli screen reader non possono interpretare i pixel; leggono il testo alternativo che fornisci.

Come implementare per i corsi online:

• Scrivi attributi alt descrittivi per ogni immagine nei materiali del corso. Un diagramma che mostra “Tre fasi del processo di Design Thinking: Empatizzare, Definire, Ideare” ha bisogno di un testo alternativo che nomini quelle fasi, non semplicemente “diagramma.”
• Per infografiche complesse, fornisci una descrizione estesa nel testo circostante o un link a una versione testuale dettagliata.
• Le immagini decorative (separatori visivi, pattern di sfondo) dovrebbero usare un alt="" vuoto in modo che gli screen reader le saltino completamente.
• Le icone usate come pulsanti o link devono avere etichette accessibili — testo visibile o attributi aria-label.

Errori comuni:

• Usare nomi di file come testo alternativo (es. alt="IMG_2847.jpg").
• Scrivere testo alternativo che dice “immagine di” — lo screen reader annuncia già che si tratta di un’immagine.
• Lasciare il testo alternativo vuoto sulle immagini informative, rendendole invisibili per gli utenti di screen reader.

1.2.2 Sottotitoli (preregistrati) (Livello A)

Cosa significa: Tutti i video preregistrati con audio devono includere sottotitoli sincronizzati. Non è negoziabile — i sottotitoli non sono un accessorio piacevole per i corsi online, sono un requisito di base.

Come implementare per i corsi online:

• Usa strumenti di trascrizione IA (come OpenAI Whisper) per generare i sottotitoli iniziali, poi rivedili e correggili manualmente. I sottotitoli automatici raggiungono tipicamente una precisione del 90-95%, ma quel 5% rimanente ricade spesso su terminologia tecnica, nomi propri e gergo specifico del settore — esattamente le parole che i tuoi studenti devono comprendere.
• Assicurati che i sottotitoli siano sincronizzati con l’audio — il timing è fondamentale. Un sottotitolo che appare con due secondi di ritardo compromette l’esperienza di apprendimento.
• Includi l’identificazione del parlante quando ci sono più persone che parlano.
• Sottotitola gli effetti sonori significativi (es. “[applausi]”, “[telefono che squilla]”) che contribuiscono alla comprensione.

Errori comuni:

• Affidarsi esclusivamente ai sottotitoli generati automaticamente senza revisione.
• Usare sottotitoli incorporati (open captions) con contrasto basso o dimensioni del carattere ridotte.
• Omettere i sottotitoli sui video “brevi” — il requisito si applica a tutte le durate.

1.2.5 Audiodescrizione (preregistrata) (Livello AA)

Cosa significa: Quando il tuo video mostra informazioni visive non descritte nella traccia audio — come testo a schermo, dimostrazioni o transizioni visive — devi fornire un’audiodescrizione che narri quegli elementi visivi.

Come implementare per i corsi online:

• L’approccio più semplice: descrivi a voce tutto ciò che mostri. Se stai dimostrando un’interfaccia software, descrivi cosa stai cliccando e cosa appare sullo schermo. Questa tecnica, chiamata “video autodescrittivo”, elimina la necessità di una traccia di audiodescrizione separata nella maggior parte dei contesti didattici.
• Per i video in cui il contenuto visivo è essenziale ma non narrato (es. una dimostrazione silenziosa o un time-lapse), fornisci una traccia di audiodescrizione separata o una descrizione testuale estesa.

Errori comuni:

• Dire “come potete vedere qui” senza descrivere cosa mostra “qui”.
• Affidarsi a registrazioni dello schermo senza narrare le azioni eseguite.
• Mostrare codice o formule a schermo senza leggerle ad alta voce.

1.4.3 Contrasto (minimo) (Livello AA)

Cosa significa: Il testo deve avere un rapporto di contrasto di almeno 4,5:1 rispetto allo sfondo. Il testo grande (18pt o 14pt grassetto) richiede almeno 3:1. Questo garantisce la leggibilità per gli utenti con ipovisione o deficit della percezione cromatica.

Come implementare per i corsi online:

• Controlla le tue presentazioni, le miniature e le sovrapposizioni di testo usando uno strumento di verifica del contrasto (come il WebAIM Contrast Checker).
• Evita di posizionare testo su sfondi fotografici complessi — usa una sovrapposizione semi-trasparente se necessario.
• Presta particolare attenzione al testo segnaposto nei form, che spesso è stilizzato in grigio chiaro su bianco e non rispetta i requisiti di contrasto.

Errori comuni:

• Usare colori del brand che sono esteticamente gradevoli ma non rispettano i rapporti di contrasto (comune con le palette pastello).
• Dimenticare di verificare il contrasto negli stati hover, focus e attivo.
• Usare il grigio chiaro per il testo “secondario” o “meno importante” — se è contenuto leggibile, necessita del contrasto completo.

1.4.5 Immagini di testo (Livello AA)

Cosa significa: Non usare immagini per visualizzare testo quando la stessa presentazione visiva può essere ottenuta con testo reale stilizzato. Le immagini di testo non possono essere ridimensionate, rifluite o lette dagli screen reader senza testo alternativo.

Come implementare per i corsi online:

• Usa testo reale (HTML, stilizzato con CSS) per titoli, didascalie, etichette e callout anziché incorporarli come grafiche.
• Quando gli screenshot di testo sono necessari (es. mostrare un editor di codice), fornisci il contenuto testuale come blocco di codice o trascrizione nelle vicinanze.

Errori comuni:

• Creare slide titolo elaborate come immagini piatte invece di usare testo stilizzato.
• Usare screenshot di codice invece di blocchi di codice formattati correttamente con evidenziazione della sintassi.

1.4.11 Contrasto dei componenti non testuali (Livello AA)

Cosa significa: I componenti dell’interfaccia utente (pulsanti, campi dei form, indicatori di focus) e gli elementi grafici significativi (icone, elementi dei grafici) devono avere un rapporto di contrasto di almeno 3:1 rispetto ai colori adiacenti.

Come implementare per i corsi online:

• Assicurati che i pulsanti dei quiz, le barre di avanzamento e i controlli di navigazione siano chiaramente visibili rispetto allo sfondo.
• Verifica che i colori dei grafici siano distinguibili — non affidarti solo al colore per differenziare le serie di dati. Aggiungi pattern, etichette o forme distinte.

Errori comuni:

• Usare bordi sottili e a basso contrasto sui campi di input dei form.
• Stilizzare i pulsanti disabilitati in modo da renderli indistinguibili dallo sfondo.

Principio 2: Utilizzabile

Gli utenti devono poter navigare e interagire con il tuo corso usando qualsiasi metodo di input — tastiera, dispositivo switch, controllo vocale o mouse. Per i creatori di corsi, questo principio governa la navigazione, i limiti temporali e gli elementi interattivi.

2.1.1 Tastiera (Livello A)

Cosa significa: Ogni elemento interattivo — pulsanti, link, campi dei form, controlli video, risposte ai quiz, menu di navigazione — deve essere utilizzabile usando solo la tastiera. Nessuna funzionalità può richiedere esclusivamente un mouse o un trackpad.

Come implementare per i corsi online:

• Testa l’intero flusso del corso usando solo il tasto Tab (per spostare il focus), Invio o Spazio (per attivare) e i tasti freccia (all’interno dei gruppi). Se non puoi completare qualsiasi azione, non supera questo criterio.
• Gli elementi interattivi personalizzati (accordion, tab, finestre modali) necessitano di gestori di eventi da tastiera appropriati — non solo gestori del click.
• Assicurati che i player video rispondano alle scorciatoie da tastiera: Spazio per play/pausa, tasti freccia per lo scorrimento, M per il mute.

Errori comuni:

• Costruire interazioni quiz con drag-and-drop che non hanno alternativa da tastiera.
• Usare elementi <div> stilizzati come pulsanti senza role="button" e tabindex="0" — appaiono cliccabili ma non possono ricevere il focus da tastiera.
• Creare trappole da tastiera dove il focus entra in una finestra modale o un player video ma non può uscirne senza il mouse.

2.1.2 Nessuna trappola da tastiera (Livello A)

Cosa significa: Se il focus da tastiera può entrare in un componente, deve poterne uscire usando l’interazione standard da tastiera (tipicamente Tab o Escape). Gli utenti non devono mai rimanere bloccati.

Come implementare per i corsi online:

• Testa tutti i contenuti incorporati (player video, simulazioni interattive, widget di terze parti) navigando con Tab al loro interno e verificando che tu possa uscirne.
• Le finestre modali dovrebbero trattenere il focus al loro interno mentre sono aperte ma riportarlo all’elemento che le ha attivate alla chiusura con Escape o il pulsante di chiusura.

Errori comuni:

• Incorporare widget di terze parti (sondaggi, lavagne, playground di codice) che catturano il focus da tastiera senza fornire un meccanismo di uscita.
• Cicli di tabulazione infiniti all’interno di componenti interattivi complessi.

2.4.7 Focus visibile (Livello AA)

Cosa significa: Quando un elemento riceve il focus da tastiera, deve esserci un indicatore visibile — tipicamente un contorno o un’evidenziazione — in modo che gli utenti da tastiera possano vedere dove si trovano nella pagina.

Come implementare per i corsi online:

• Non rimuovere mai il contorno di focus predefinito del browser (outline: none) senza sostituirlo con uno stile di focus personalizzato ugualmente o più visibile.
• Usa uno stile di focus che contrasti bene sia con sfondi chiari che scuri. Un pattern comune è un contorno solido di 2px con un colore contrastante e un piccolo distanziamento.
• Testa la visibilità del focus su ogni elemento interattivo: link di navigazione, pulsanti delle lezioni, opzioni dei quiz, controlli video.

Errori comuni:

• Aggiungere *:focus { outline: none; } nel CSS per “pulire” il design — questa singola riga compromette l’accessibilità da tastiera in tutto il corso.
• Usare un colore di focus che si confonde con lo sfondo dell’elemento.

2.5.7 Movimenti di trascinamento (Livello AA) — Novità WCAG 2.2

Cosa significa: Qualsiasi funzionalità che usa un movimento di trascinamento (click e trascina) deve essere realizzabile anche attraverso un’azione con puntatore singolo senza trascinamento, a meno che il trascinamento non sia essenziale.

Come implementare per i corsi online:

• Se hai domande quiz con drag-and-drop (“trascina l’etichetta nell’area corretta del diagramma”), fornisci un menù a tendina o un’alternativa click-per-selezionare.
• Le liste di lezioni riordinabili dovrebbero supportare i pulsanti “sposta su/sposta giù” oltre alle maniglie di trascinamento.

Errori comuni:

• Presumere che il drag-and-drop sia l’unica interazione intuitiva — molti utenti non possono eseguire movimenti di trascinamento a causa di disabilità motorie.
• Fornire un’alternativa da tastiera ma non un’alternativa con puntatore singolo (click/tap) — questo criterio riguarda specificamente l’input con puntatore, non solo la tastiera.

2.4.4 Scopo del link (nel contesto) (Livello A)

Cosa significa: Lo scopo di ogni link deve essere determinabile dal testo del link stesso, o dal testo del link insieme al contesto circostante. Gli utenti di screen reader spesso navigano tabulando tra i link — sentire “clicca qui, clicca qui, clicca qui” è inutile.

Come implementare per i corsi online:

• Scrivi testi di link descrittivi: “Scarica il brief del progetto (PDF, 2,3 MB)” anziché “Clicca qui.”
• Per la navigazione delle lezioni, usa il titolo della lezione come testo del link, non etichette generiche.

Errori comuni:

• Usare “Scopri di più” o “Leggi tutto” come testo del link senza contesto aggiuntivo.
• Usare URL grezzi come testo visibile — sono illeggibili dagli screen reader e difficili per tutti.

2.2.1 Limiti di tempo regolabili (Livello A)

Cosa significa: Se il tuo corso include attività a tempo (quiz, valutazioni), gli utenti devono poter disattivare, regolare o estendere il limite di tempo — con almeno una di queste opzioni disponibile.

Come implementare per i corsi online:

• Per i quiz a tempo, offri un’opzione per richiedere tempo aggiuntivo o disabilitare completamente il timer.
• Le presentazioni o i caroselli con avanzamento automatico devono avere controlli di pausa.
• I timeout di sessione devono avvisare gli utenti prima della scadenza e consentire l’estensione.

Errori comuni:

• Impostare timer dei quiz senza alcuna opzione di regolazione — questo penalizza in modo sproporzionato gli studenti con disabilità cognitive, limitazioni motorie o chi usa tecnologie assistive che rallentano la velocità di interazione.

Principio 3: Comprensibile

I contenuti e il comportamento dell’interfaccia devono essere comprensibili per tutti gli utenti. Per i creatori di corsi, questo principio riguarda la chiarezza del linguaggio, la navigazione coerente e il modo in cui il corso gestisce l’input dell’utente — in particolare nei quiz e nei form.

3.1.1 Lingua della pagina (Livello A)

Cosa significa: La lingua predefinita di ogni pagina deve essere determinabile a livello programmatico — tipicamente tramite l’attributo lang sull’elemento <html>. Gli screen reader lo usano per selezionare il motore di pronuncia corretto.

Come implementare per i corsi online:

• Assicurati che la tua piattaforma imposti l’attributo lang corretto (es. lang="it" per l’italiano, lang="en" per l’inglese).
• Se il tuo corso contiene passaggi in una lingua diversa, avvolgili in un elemento span o div con l’attributo lang appropriato in modo che gli screen reader cambino pronuncia.

Errori comuni:

• Usare lang="en" su una pagina interamente in italiano — lo screen reader tenterà la pronuncia inglese sulle parole italiane.
• Omettere completamente l’attributo lang, costringendo lo screen reader a indovinare.

3.3.1 Identificazione degli errori (Livello A)

Cosa significa: Quando un utente commette un errore di input (inviando un quiz, compilando un form), l’errore deve essere rilevato automaticamente e descritto in formato testuale. Il messaggio di errore deve identificare il campo specifico e descrivere il problema.

Come implementare per i corsi online:

• Quando una domanda del quiz riceve una risposta errata, indica chiaramente quale domanda presenta l’errore e quale tipo di risposta è atteso.
• Per i form di registrazione o profilo, mostra messaggi di errore specifici accanto al campo pertinente: “L’indirizzo email deve includere una @” anziché un generico “Input non valido” in cima alla pagina.
• Usa aria-describedby per associare programmaticamente i messaggi di errore ai campi del form, in modo che gli screen reader annuncino l’errore quando il focus si sposta sul campo.

Errori comuni:

• Indicare gli errori solo attraverso il colore (bordo rosso) senza testo — gli utenti che non percepiscono il colore non vedranno l’errore.
• Mostrare un unico messaggio “Ci sono errori nella tua compilazione” senza specificare quali campi necessitano di correzione.

3.3.2 Etichette o istruzioni (Livello A)

Cosa significa: I campi dei form e i componenti interattivi devono avere etichette o istruzioni che descrivono l’input atteso. Ogni campo di testo, menù a tendina, checkbox e pulsante radio necessita di un’etichetta visibile e associata programmaticamente.

Come implementare per i corsi online:

• Usa l’elemento <label> con un attributo for che corrisponda all’id dell’input, oppure avvolgi l’input all’interno dell’elemento label.
• Per le domande dei quiz, assicurati che il testo della domanda sia associato programmaticamente alle opzioni di risposta usando fieldset/legend o aria-labelledby.
• Fornisci indicazioni sul formato dove necessario: “Data di nascita (GG/MM/AAAA)” o “La password deve contenere almeno 8 caratteri.”

Errori comuni:

• Usare il testo segnaposto come unica etichetta — il segnaposto scompare quando l’utente inizia a digitare, lasciandolo senza contesto.
• Affidarsi alla prossimità visiva (l’etichetta appare vicina al campo) senza un’associazione programmatica.

3.2.3 Navigazione coerente (Livello AA)

Cosa significa: I meccanismi di navigazione che appaiono su più pagine (sidebar del corso, navigazione delle lezioni, barra di avanzamento) devono apparire nello stesso ordine relativo ogni volta. Gli utenti costruiscono una memoria spaziale della tua interfaccia; cambiare il layout tra le pagine li disorienta.

Come implementare per i corsi online:

• Mantieni la navigazione del corso (sidebar, breadcrumb, pulsanti precedente/successivo) in una posizione coerente in tutte le lezioni.
• Se hai un indicatore di progresso, assicurati che appaia nella stessa posizione su ogni pagina di lezione.

Errori comuni:

• Spostare il pulsante “Lezione successiva” dal fondo del contenuto in alcune pagine alla cima in altre.
• Mostrare elementi di navigazione diversi nelle pagine dei quiz rispetto alle pagine delle lezioni senza un motivo chiaro.

3.3.8 Autenticazione accessibile (minima) (Livello AA) — Novità WCAG 2.2

Cosa significa: I processi di autenticazione non devono richiedere test di funzionalità cognitiva (memorizzare una password, risolvere un CAPTCHA, riconoscere oggetti nelle immagini) a meno che non sia disponibile un’alternativa accessibile. Gli utenti devono potersi autenticare tramite gestori di password, passkey, copia-incolla o single sign-on.

Come implementare per i corsi online:

• Non bloccare l’incollaggio nei campi password — questo impedisce l’uso dei gestori di password.
• Supporta il login OAuth/SSO (Google, Microsoft) come alternativa all’autenticazione basata su password.
• Se usi CAPTCHA, fornisci un’alternativa audio o usa tecniche CAPTCHA invisibili che non richiedono interazione dell’utente.

Errori comuni:

• Disabilitare l’incollaggio nei campi password per “sicurezza” — questo in realtà riduce la sicurezza scoraggiando password forti e uniche.
• Usare CAPTCHA basati su immagini senza alcuna alternativa.

3.2.6 Aiuto coerente (Livello A) — Novità WCAG 2.2

Cosa significa: Se la tua piattaforma fornisce meccanismi di aiuto (informazioni di contatto, link alle FAQ, supporto via chat), questi devono apparire nella stessa posizione relativa in tutte le pagine.

Come implementare per i corsi online:

• Posiziona il link di aiuto/supporto in un luogo coerente — tipicamente nel footer o in un elemento di navigazione permanente.
• Assicurati che il meccanismo di aiuto sia disponibile dall’interno del player del corso, non solo dal sito principale.

Errori comuni:

• Fornire un widget di chat di aiuto nel sito marketing ma rimuoverlo dall’interfaccia del player del corso.

Principio 4: Robusto

I contenuti devono essere sufficientemente robusti da funzionare in modo affidabile con le tecnologie assistive attuali e future. Per i creatori di corsi, questo principio governa la struttura HTML del corso e la capacità delle tecnologie assistive di interpretarlo correttamente.

4.1.2 Nome, Ruolo, Valore (Livello A)

Cosa significa: Ogni componente dell’interfaccia utente deve esporre il suo nome (etichetta), ruolo (tipo di elemento) e valore o stato corrente alle tecnologie assistive. È così che gli screen reader sanno che qualcosa è un pulsante, se un checkbox è selezionato o quale è il valore corrente di uno slider.

Come implementare per i corsi online:

• Usa elementi HTML semantici: <button> per le azioni, <a> per la navigazione, <input type="checkbox"> per i checkbox. Questi espongono ruolo e stato automaticamente.
• Quando usi componenti personalizzati, applica i ruoli e le proprietà ARIA appropriati: role="tabpanel", aria-selected="true", aria-expanded="false".
• Per gli indicatori di progresso dei quiz, usa role="progressbar" con aria-valuenow, aria-valuemin e aria-valuemax.

Errori comuni:

• Costruire un player video personalizzato con pulsanti <div> senza ruoli ARIA — gli screen reader non possono identificarli come interattivi.
• Usare aria-label in contraddizione con il testo visibile — gli utenti di screen reader sentono una cosa mentre gli utenti vedenti ne vedono un’altra.

4.1.3 Messaggi di stato (Livello AA)

Cosa significa: I messaggi di stato — conferme di successo, conteggi degli errori, aggiornamenti del progresso — devono essere annunciati alle tecnologie assistive senza ricevere il focus. Gli utenti non dovrebbero dover cercare i cambiamenti nella pagina.

Come implementare per i corsi online:

• Usa le regioni ARIA live (role="status" o role="alert") per messaggi come “Quiz inviato con successo” o “3 di 10 domande completate.”
• Per aggiornamenti di progresso in tempo reale (avanzamento upload, completamento lezione), usa aria-live="polite" in modo che l’annuncio non interrompa l’attività corrente dell’utente.
• Per errori critici, usa role="alert" che attiva un annuncio immediato.

Errori comuni:

• Mostrare una notifica toast di successo visibile sullo schermo ma non annunciata agli screen reader.
• Usare aria-live="assertive" per aggiornamenti non critici, causando interruzioni fastidiose.

Struttura HTML semantica

Cosa significa: Il contenuto del tuo corso dovrebbe usare una semantica HTML corretta — intestazioni (da <h1> a <h6>) in ordine logico, liste per gli elementi elencati, tabelle per i dati tabulari e landmark (<nav>, <main>, <aside>) per le regioni della pagina. Questo è fondamentale per il supporto delle tecnologie assistive.

Come implementare per i corsi online:

• Struttura il contenuto delle lezioni con una gerarchia chiara delle intestazioni: un solo <h1> per il titolo della lezione, <h2> per le sezioni principali, <h3> per le sottosezioni. Non saltare mai i livelli di intestazione.
• Usa <ul> o <ol> per le liste — gli utenti di screen reader si affidano alla semantica delle liste per comprendere la struttura e il numero di elementi.
• Avvolgi la navigazione del corso in un landmark <nav> in modo che gli utenti di screen reader possano raggiungerla direttamente.

Errori comuni:

• Usare il grassetto per simulare le intestazioni — sembra un’intestazione visivamente ma è invisibile alla funzione di navigazione per intestazioni degli screen reader.
• Annidare il contenuto in elementi generici <div> senza alcun significato semantico.

Uso corretto di ARIA

Cosa significa: Gli attributi ARIA (Accessible Rich Internet Applications) integrano la semantica HTML per i widget complessi. Tuttavia, un ARIA scorretto è peggiore dell’assenza di ARIA — inganna attivamente le tecnologie assistive.

Come implementare per i corsi online:

• Segui la prima regola di ARIA: se puoi usare un elemento HTML nativo che ha già la semantica di cui hai bisogno, usalo al posto di aggiungere ARIA a un elemento generico.
• Se devi usare ARIA, segui la WAI-ARIA Authoring Practices Guide per il pattern specifico (tab, accordion, finestre modali, ecc.).
• Testa con uno screen reader — NVDA (gratuito, Windows), VoiceOver (integrato, macOS/iOS) o TalkBack (integrato, Android).

Errori comuni:

• Aggiungere role="button" a un <div> ma dimenticare di aggiungere i gestori di eventi da tastiera — l’elemento viene annunciato come pulsante ma non risponde a Invio o Spazio.
• Usare aria-hidden="true" su contenuti visibili e interattivi — questo li nasconde agli screen reader mentre rimangono visibili sullo schermo, creando una disconnessione confusa.

Checklist WCAG 2.2 stampabile per creatori di corsi

Usa questa checklist per verificare il contenuto del corso prima della pubblicazione. Ogni voce corrisponde a un criterio di successo WCAG 2.2 specifico.

Percepibile

• ☐ Tutte le immagini hanno testo alternativo descrittivo (1.1.1)
• ☐ Le immagini decorative usano attributi alt vuoti (1.1.1)
• ☐ Tutti i video hanno sottotitoli accurati e sincronizzati (1.2.2)
• ☐ I video con informazioni solo visive hanno audiodescrizioni (1.2.5)
• ☐ Il rapporto di contrasto del testo è almeno 4,5:1 (1.4.3)
• ☐ Il rapporto di contrasto del testo grande è almeno 3:1 (1.4.3)
• ☐ Il rapporto di contrasto dei componenti UI è almeno 3:1 (1.4.11)
• ☐ Si usa testo reale invece di immagini di testo (1.4.5)
• ☐ Il contenuto è leggibile con zoom al 200% (1.4.4)
• ☐ Le informazioni non vengono trasmesse solo attraverso il colore (1.4.1)

Utilizzabile

• ☐ Tutti gli elementi interattivi sono accessibili da tastiera (2.1.1)
• ☐ Non esistono trappole da tastiera in nessuna parte del corso (2.1.2)
• ☐ L’ordine del focus segue una sequenza logica (2.4.3)
• ☐ L’indicatore di focus è chiaramente visibile su tutti gli elementi (2.4.7)
• ☐ Il testo dei link descrive la destinazione o lo scopo (2.4.4)
• ☐ I titoli delle pagine sono descrittivi e unici (2.4.2)
• ☐ Il drag-and-drop ha un’alternativa click/tap (2.5.7)
• ☐ Le attività a tempo possono essere estese o disabilitate (2.2.1)
• ☐ Nessun contenuto lampeggia più di 3 volte al secondo (2.3.1)
• ☐ È disponibile un link per saltare la navigazione (2.4.1)

Comprensibile

• ☐ La lingua della pagina è impostata tramite l’attributo lang (3.1.1)
• ☐ Gli errori nei form sono identificati con descrizioni specifiche in formato testuale (3.3.1)
• ☐ Tutti i campi dei form hanno etichette visibili e associate (3.3.2)
• ☐ La navigazione è coerente in tutte le pagine (3.2.3)
• ☐ I meccanismi di aiuto appaiono in una posizione coerente (3.2.6)
• ☐ L’autenticazione non richiede test di funzionalità cognitiva (3.3.8)
• ☐ Vengono forniti suggerimenti per la correzione degli errori dove possibile (3.3.3)
• ☐ Il contenuto usa un linguaggio chiaro e semplice, appropriato al pubblico

Robusto

• ☐ Gli elementi HTML semantici sono usati correttamente (4.1.2)
• ☐ I componenti personalizzati hanno ruoli e stati ARIA appropriati (4.1.2)
• ☐ I messaggi di stato usano regioni ARIA live (4.1.3)
• ☐ Il contenuto funziona con i principali screen reader (NVDA, VoiceOver, JAWS)
• ☐ La gerarchia delle intestazioni è logica e sequenziale
• ☐ L’HTML è valido senza errori critici

Come Eduspera automatizza la conformità WCAG

Costruire un corso accessibile da zero è un impegno considerevole — ma non deve essere necessariamente manuale. Eduspera integra i controlli di accessibilità direttamente nel workflow di creazione del corso, individuando i problemi prima che raggiungano i tuoi studenti.

• Punteggio di accessibilità: ogni corso riceve un punteggio di accessibilità in tempo reale basato su controlli automatizzati WCAG 2.2 AA. Il punteggio si aggiorna man mano che aggiungi contenuti, segnalando immediatamente testo alternativo mancante, problemi di contrasto e problemi strutturali.
• Sottotitoli basati su IA: i video caricati su Eduspera vengono trascritti automaticamente usando l’IA, generando sottotitoli che puoi revisionare e modificare direttamente nella piattaforma — soddisfacendo il criterio 1.2.2 senza necessità di strumenti o workflow separati.
• Design keyboard-first: l’intero player del corso — navigazione, controlli video, quiz e tracciamento del progresso — è costruito con piena accessibilità da tastiera fin dall’inizio, non adattato successivamente.
• Output HTML semantico: i contenuti del corso creati nell’editor di testo ricco di Eduspera producono automaticamente HTML pulito e semantico con gerarchia corretta delle intestazioni, strutture di liste e attributi ARIA.
• Motore quiz accessibile: i componenti quiz includono etichette appropriate, messaggi di errore e gestione del focus pronti all’uso, soddisfacendo più criteri WCAG (3.3.1, 3.3.2, 2.1.1, 4.1.2) senza richiedere conoscenze tecniche ai creatori di corsi.

L’obiettivo non è sostituire la tua comprensione dell’accessibilità — questa checklist esiste perché comprendere i principi è importante. L’obiettivo è automatizzare i controlli ripetitivi in modo che tu possa concentrarti sulla creazione di contenuti educativi eccellenti che servano ogni studente. Leggi di più su come rendere accessibili i corsi online per una prospettiva più ampia sull’instructional design accessibile.

Domande frequenti

Devo raggiungere il Livello WCAG A, AA o AAA per il mio corso online?

Il Livello AA delle WCAG è lo standard riconosciuto a livello internazionale per la conformità all’accessibilità web ed è il livello a cui fa riferimento la maggior parte della legislazione, incluso l’European Accessibility Act, l’Americans with Disabilities Act (nella pratica) e la Section 508. Il Livello A è il minimo assoluto e non è sufficiente per la conformità. Il Livello AAA include criteri avanzati che sono preziosi ma non tipicamente richiesti — molti criteri AAA sono impraticabili da applicare universalmente (ad esempio, richiedere l’interpretazione nella lingua dei segni per tutti i contenuti video). Punta al Livello AA come base e adotta singoli criteri AAA dove beneficiano il tuo specifico pubblico di studenti.

Quali strumenti posso usare per testare la conformità WCAG del mio corso?

Gli strumenti automatizzati individuano circa il 30-40% dei problemi WCAG. Usa axe DevTools (estensione browser), WAVE o Lighthouse per la scansione automatizzata. Per il restante 60-70%, il test manuale è essenziale: naviga il corso usando solo la tastiera, testa con uno screen reader (NVDA su Windows, VoiceOver su macOS), verifica il contrasto dei colori con il WebAIM Contrast Checker e chiedi a utenti con disabilità di testare il tuo corso. Piattaforme come Eduspera integrano la scansione automatizzata dell’accessibilità direttamente nel workflow di authoring, individuando i problemi comuni prima della pubblicazione.

Posso adeguare un corso esistente alla conformità WCAG o devo ricostruirlo da zero?

L’adeguamento è quasi sempre possibile e di solito più pratico della ricostruzione. Inizia con una scansione automatizzata per identificare i problemi più comuni — testo alternativo mancante, contrasto insufficiente, campi dei form senza etichetta — che spesso possono essere corretti rapidamente. Poi affronta i problemi strutturali: gerarchia delle intestazioni, navigazione da tastiera e gestione del focus. La correzione più dispendiosa in termini di tempo per la maggior parte dei creatori di corsi è aggiungere i sottotitoli ai video esistenti, ma gli strumenti di trascrizione IA hanno ridotto drasticamente lo sforzo necessario. Dai priorità alle correzioni in base all’impatto: le barriere che bloccano completamente l’accesso (trappole da tastiera, sottotitoli mancanti) vanno corrette per prime, seguite dai problemi che degradano l’esperienza (contrasto insufficiente, testo alternativo mancante).