Obiettivo: Fornire alternative testuali per tutto il contenuto non testuale in modo che possa essere trasformato in altre forme che le persone possano leggere, inclusi testo grande, braille, parlato, simboli o linguaggio più semplice.

Perché è Importante (Beneficio Utente):

• Consente a persone cieche o ipovedenti di comprendere il contenuto delle immagini e degli elementi grafici tramite screen reader.
• Permette agli utenti con disabilità cognitive di elaborare le informazioni in un formato testuale più semplice e adattabile.
• Migliora la SEO (Search Engine Optimization) e l'indicizzazione delle immagini da parte dei motori di ricerca.

Cosa Verificare / Come Implementare:

• Immagini Informative: Per ogni immagine che veicola un significato, l'attributo `alt` deve contenere una descrizione concisa e significativa del suo contenuto o della sua funzione.

  <img src="grafico.png" alt="Grafico delle vendite trimestrali con un aumento del 15% nel Q4">

• Immagini Decorative: Se un'immagine è puramente estetica e non aggiunge informazioni (es. bordi, sfondi), l'attributo `alt` deve essere lasciato vuoto (`alt=""`).

  <img src="sfondo.jpg" alt="">

• Icone/Pulsanti Immagine: Se un'icona è cliccabile, l'attributo `alt` (o `aria-label`) deve descrivere l'azione del pulsante, non solo l'immagine (es. `alt="Cerca"` per una lente di ingrandimento).
• Grafici/Diagrammi Complessi: Oltre all'alt text, fornire una "descrizione lunga" (es. tramite `aria-describedby` o un link a una pagina separata) che spieghi in dettaglio il contenuto informativo.
• Contenuti Audio/Video: Offrire trascrizioni complete (per audio) e/o descrizioni dettagliate (per video muti o solo visivi).

Errori Comuni da Evitare:

• Omettere completamente l'attributo `alt`.
• Usare `alt` text generico o ridondante (es. `alt="immagine"`, `alt="foto.jpg"`, `alt="clicca qui"`).
• `alt` text troppo lungo o che include dettagli non necessari per il contesto.
• Non fornire trascrizioni o descrizioni per contenuti multimediali importanti.

Strumenti Utili per il Test:

• Estensioni Browser: Axe DevTools, Lighthouse, WAVE, Web Developer (per visualizzare gli alt text).
• Screen Reader: Naviga la pagina con uno screen reader (es. NVDA, JAWS, VoiceOver) per sentire come vengono lette le alternative testuali.
• Disabilitare le Immagini: Nelle impostazioni del browser, disabilita il caricamento delle immagini per vedere il testo alternativo al loro posto.

Obiettivo: Fornire un'alternativa per i contenuti solo audio o solo video preregistrati, in modo che tutte le informazioni veicolate siano accessibili a chi non può percepirli.

Perché è Importante (Beneficio Utente):

• Utenti sordi o con gravi deficit uditivi possono accedere al contenuto audio tramite una trascrizione testuale.
• Utenti ciechi o ipovedenti possono accedere al contenuto visivo tramite una descrizione testuale.
• Permette la consultazione in ambienti dove l'audio/video non è fruibile (es. luoghi pubblici, connessioni lente).

Cosa Verificare / Come Implementare:

• Contenuti Solo Audio: Offri una trascrizione testuale completa del dialogo e di tutti i suoni significativi (es. musica, effetti sonori importanti) presenti nell'audio. La trascrizione dovrebbe essere facilmente accessibile e associata all'audio (es. sotto il player o tramite un link).
• Contenuti Solo Video: Fornisci una descrizione testuale dettagliata di tutti gli eventi visivi significativi e delle informazioni presentate nel video (es. azioni, oggetti, testo su schermo).

Errori Comuni da Evitare:

• Non fornire alcuna alternativa testuale per audio o video.
• Trascrizioni incomplete o che omettono suoni importanti.
• Descrizioni video generiche che non catturano il significato visivo.

Strumenti Utili per il Test:

• Revisione Manuale: Confronta attentamente l'audio/video con la trascrizione/descrizione per verificarne completezza e accuratezza.
• Coinvolgimento Utenti: Fai testare a persone con disabilità visive o uditive.

Obiettivo: Fornire sottotitoli sincronizzati per tutti i contenuti audio preregistrati in video, inclusi dialoghi e suoni non verbali significativi.

Perché è Importante (Beneficio Utente):

• Consente a persone sorde o con problemi uditivi di accedere ai contenuti audio dei video.
• Utile in ambienti rumorosi o dove non è possibile ascoltare l'audio.
• Favorisce la comprensione per chi non è madrelingua o per chi ha difficoltà cognitive.

Cosa Verificare / Come Implementare:

• Sottotitoli Sincronizzati: Assicurati che i sottotitoli siano disponibili e perfettamente sincronizzati con l'audio e il video.
• Contenuto Completo: I sottotitoli devono includere tutti i dialoghi parlati e, dove significativo, anche suoni non verbali (es. `[musica drammatica]`, `[applauso]`).
• Formato Adeguato: Utilizza formati di sottotitoli supportati (es. WebVTT, SRT) e assicurati che il player video consenta l'attivazione/disattivazione e la personalizzazione (se possibile).

Errori Comuni da Evitare:

• Mancanza totale di sottotitoli.
• Sottotitoli imprecisi, incompleti o con errori di trascrizione.
• Sincronizzazione errata (sottotitoli che appaiono troppo presto o troppo tardi).
• Omissione di suoni non verbali importanti.

Strumenti Utili per il Test:

• Test Manuale: Guarda il video con l'audio disattivato e verifica la comprensione tramite i sottotitoli.
• Screen Reader: Verifica che il player sia accessibile e che i sottotitoli non interferiscano.

Obiettivo: Per i video preregistrati con una traccia audio, fornire una descrizione audio che narri il contenuto visivo essenziale per gli utenti non vedenti, o un'alternativa testuale completa.

Perché è Importante (Beneficio Utente):

• Permette a persone cieche o ipovedenti di comprendere le informazioni visive non spiegate nel dialogo audio.
• Offre un'esperienza completa del contenuto multimediale a tutti gli utenti.

Cosa Verificare / Come Implementare:

• Descrizione Audio: Integra una traccia audio aggiuntiva che descrive le scene visive, le azioni, il testo su schermo e altri dettagli visivi rilevanti che non sono già presenti nel dialogo principale.
• Alternativa Multimediale Testuale: In alternativa, fornisci una trascrizione testuale completa che include sia il dialogo che una descrizione dettagliata del contenuto visivo.

Errori Comuni da Evitare:

• Mancanza di descrizione audio per video che ne richiedono una.
• Descrizione audio incompleta o troppo breve.

Strumenti Utili per il Test:

• Test Manuale: Guarda il video con gli occhi chiusi e verifica se la descrizione audio ti permette di comprendere tutte le informazioni visive importanti.

Obiettivo: Fornire sottotitoli sincronizzati per tutti i contenuti audio in diretta (live) in video.

Perché è Importante (Beneficio Utente):

• Essenziale per persone sorde o con gravi problemi uditivi per accedere a eventi in diretta.
• Permette la partecipazione in tempo reale a webinar, dirette, conferenze.

Cosa Verificare / Come Implementare:

• Sottotitoli in Tempo Reale: Implementare una soluzione per la generazione di sottotitoli in tempo reale (es. tramite stenografi umani, tecnologie di riconoscimento vocale con revisione).
• Precisione e Sincronizzazione: Assicurarsi che i sottotitoli siano il più accurati e sincronizzati possibile, tenendo conto delle sfide del live.

Errori Comuni da Evitare:

• Mancanza di sottotitoli per contenuti live.
• Sottotitoli generati automaticamente con alta percentuale di errori.

Strumenti Utili per il Test:

• Test Manuale: Monitorare la qualità e la tempestività dei sottotitoli durante un evento live.

Obiettivo: Fornire una descrizione audio per tutti i contenuti video preregistrati. Questo criterio è un requisito più stringente di 1.2.3, chiedendo una descrizione audio per tutti i video, anche se c'è già una traccia audio principale.

Perché è Importante (Beneficio Utente):

• Garantisce che le persone non vedenti ricevano tutte le informazioni visive importanti.

Cosa Verificare / Come Implementare:

• Inclusione Descrizione Audio: Assicurarsi che tutti i video preregistrati abbiano una traccia di descrizione audio, anche se breve, che narra il contenuto visivo significativo.

Errori Comuni da Evitare:

• Mancanza di descrizione audio.

Strumenti Utili per il Test:

• Test Manuale: Ascolta il video con la descrizione audio attivata per valutarne la completezza.

Obiettivo: Assicurarsi che la struttura, le relazioni e il significato del contenuto siano comprensibili non solo visivamente, ma anche tramite il codice (programmaticamente). Questo permette alle tecnologie assistive di interpretare correttamente la gerarchia e il ruolo degli elementi della pagina.

Perché è Importante (Beneficio Utente):

• Navigazione Migliorata: Permette agli utenti di screen reader di navigare la pagina in modo efficiente (es. saltando di intestazione in intestazione o esplorando liste).
• Comprensione del Contesto: Aiuta tutti gli utenti a capire la relazione tra diversi elementi della pagina (es. etichette vs campi modulo, celle vs intestazioni di tabella).
• Consistenza e Personalizzazione: Garantisce che il contenuto sia presentato in modo coerente e significativo, facilitando anche la personalizzazione da parte dell'utente.

Cosa Verificare / Come Implementare:

• Gerarchia delle Intestazioni (<h1> - <h6>):
  • Usa i tag di intestazione per la struttura logica (uno solo <h1> per pagina).
  • Non saltare livelli di intestazione (es. da <h1> a <h3>).
• Liste (<ul>, <ol>, <dl>):
  • Utilizza gli elementi semantici per tutti gli elenchi.
  • Evita di simulare le liste con semplici div o paragrafi.
• Formulari (Moduli):
  • Associa sempre <label> a ogni controllo di input usando for e id.
  • Raggruppa i controlli correlati (es. radio button) con <fieldset> e <legend>.
• Tabelle Dati (<table>, <th>, <caption>):
  • Usa le tabelle solo per dati tabulari, mai per il layout.
  • Identifica le intestazioni (<th> con scope) e fornisci un <caption>.
• Ruoli ARIA (Accessible Rich Internet Applications):
  • Utilizza gli attributi ARIA per definire ruoli, proprietà e stati dei componenti UI complessi o personalizzati.

Errori Comuni da Evitare:

• Gerarchia Visiva Ingannevole: Usare solo stili visivi (grassetto, dimensione font) per intestazioni senza usare i tag <h1>-<h6>.
• Etichette Mancanti o Non Associate: Campi modulo senza <label> o con `label` non correttamente collegato.
• Tabelle Usate per il Layout: Abuso dell'elemento <table> per il posizionamento visivo.
• Struttura Non Semantica: Creare liste o altri elementi strutturali usando solo <div> o <p> senza gli elementi semantici corretti.

Strumenti Utili per il Test:

• Estensioni Browser per l'Accessibilità: Axe DevTools, Lighthouse, WAVE Evaluation Tool.
• Screen Reader: NVDA, JAWS (Windows), VoiceOver (macOS).
• Validatore HTML: W3C Markup Validation Service.

Obiettivo: Assicurarsi che quando la sequenza del contenuto (presentazione visiva) influenza il suo significato, l'ordine di lettura e interazione programmatico sia anch'esso significativo e logico. Questo è cruciale per gli utenti che accedono al contenuto in un ordine diverso da quello visivo (es. con screen reader).

Perché è Importante (Beneficio Utente):

• Coerenza Logica: Garantisce che il contenuto abbia senso indipendentemente da come viene percepito (visivamente, tramite screen reader, navigazione da tastiera).
• Navigazione Efficiente: Aiuta gli utenti di tecnologie assistive a seguire il flusso logico del documento senza confusioni o salti inaspettati.
• Esperienza Utente Migliorata: Previene frustrazione e disorientamento per tutti gli utenti, specialmente in layout complessi.

Cosa Verificare / Come Implementare:

• Ordine di Lettura Logico: La sequenza del DOM (Document Object Model) deve riflettere l'ordine logico del contenuto che l'autore intendeva. Ciò che appare prima visivamente dovrebbe generalmente venire prima nel codice.
• Contenuti Correlati: Se il contenuto è correlato (es. una domanda e le sue opzioni di risposta), assicurati che siano vicini nel codice HTML per mantenere la loro relazione.
• Layout CSS: Evita di usare CSS per riordinare elementi in modo tale che l'ordine visivo sia drasticamente diverso dall'ordine nel DOM, specialmente per elementi interattivi o informativi. Se lo fai, verifica attentamente l'accessibilità.
• Test del Contenuto Linearizzato: Immagina di leggere la pagina senza CSS; il contenuto ha ancora senso? Lo scorrimento da tastiera (tabulazione) segue un percorso logico?

Errori Comuni da Evitare:

• Discrepanza Ordine Visivo/DOM: L'ordine degli elementi nel codice HTML non corrisponde all'ordine logico o visivo, causando confusione per gli screen reader.
• Contenuti Dispersi: Informazioni correlate (es. un avviso e il pulsante per chiuderlo) sono posizionate distanti nel codice HTML.
• Riordinamento Estremo via CSS/JavaScript: Abuso di proprietà CSS come `order` in flexbox/grid o manipolazioni JavaScript che alterano pesantemente l'ordine visivo rispetto a quello del DOM, senza considerare l'ordine di tabulazione o lettura.

Strumenti Utili per il Test:

• Navigazione da Tastiera: Naviga l'intera pagina usando solo il tasto Tab (e Shift+Tab per tornare indietro) per verificare che il focus si sposti in un ordine logico e significativo.
• Screen Reader: Ascolta il contenuto con uno screen reader (es. NVDA, JAWS, VoiceOver) per assicurarti che la sequenza di lettura sia quella attesa e comprensibile.
• Ispezione del Codice: Esamina l'ordine degli elementi nel DOM (utilizzando gli strumenti per sviluppatori del browser) e confrontalo con l'ordine visivo.

Obiettivo: Le istruzioni fornite per comprendere e operare il contenuto non devono basarsi unicamente sulle caratteristiche sensoriali dei componenti (forma, dimensione, colore, posizione, orientamento o suono).

Perché è Importante (Beneficio Utente):

• Permette a persone con cecità, daltonismo, o disabilità cognitive di comprendere le istruzioni anche se non percepiscono determinate caratteristiche sensoriali.
• Garantisce che le indicazioni siano chiare e non ambigue per tutti.

Cosa Verificare / Come Implementare:

• Istruzioni Redundant: Se usi il colore per indicare lo stato (es. rosso per errore), aggiungi sempre un indicatore testuale o un'icona (es. "Campo obbligatorio mancante" o un'icona di avviso).
• Forme/Dimensioni: Se le istruzioni si riferiscono a forme o dimensioni ("Clicca il pulsante rotondo"), aggiungi un'alternativa testuale ("Clicca il pulsante 'Invia ordine'").
• Posizione/Orientamento: Evita istruzioni come "Clicca l'icona a destra" o "Guarda il menu in alto" senza fornire un'alternativa testuale specifica per l'elemento.

Errori Comuni da Evitare:

• Dire "clicca il pulsante rosso" senza fornire il testo del pulsante.
• Indicare campi obbligatori solo con un asterisco rosso, senza una dicitura come "(obbligatorio)".

Strumenti Utili per il Test:

• Test Manuale: Prova a capire le istruzioni senza guardare i colori o le forme.
• Simulazione Daltonismo: Usa estensioni browser per simulare diverse forme di daltonismo per verificare la chiarezza delle informazioni.

Obiettivo: Il colore non deve essere l'unico mezzo visivo per veicolare informazioni, indicare un'azione, sollecitare una risposta o distinguere un elemento visivo.

Perché è Importante (Beneficio Utente):

• Persone daltoniche o con problemi di percezione del colore possono comprendere tutte le informazioni.
• Migliora la chiarezza e l'usabilità per tutti gli utenti, anche in condizioni di scarsa illuminazione o su schermi di scarsa qualità.

Cosa Verificare / Come Implementare:

• Redundancy: Se un'informazione è trasmessa tramite il colore, deve esserci un altro indicatore (es. testo, icona, sottolineatura per i link). * *Esempio:* Invece di "I campi rossi sono obbligatori", usa "I campi rossi con un asterisco (*) sono obbligatori".
• Link: I link dovrebbero avere un indicatore aggiuntivo oltre al colore quando non sono nel corpo del testo (es. sottolineatura o un'icona su hover/focus).
• Grafici: Nei grafici, oltre ai colori, usa pattern, etichette di testo o icone per distinguere le diverse serie di dati.

Errori Comuni da Evitare:

• Indicare un errore solo colorando di rosso il testo del messaggio o del campo.
• Usare il colore per mostrare lo stato (es. elemento selezionato) senza un altro indicatore visivo.

Strumenti Utili per il Test:

• Estensioni per la simulazione del daltonismo: Colorblinding, NoCoffee.
• Test Manuale: Converti la pagina in scala di grigi per vedere se tutte le informazioni sono ancora chiare.

Obiettivo: Se qualsiasi audio su una pagina web viene riprodotto automaticamente per più di 3 secondi, deve essere disponibile un meccanismo per mettere in pausa, interrompere o controllare il volume in modo indipendente dal volume generale del sistema.

Perché è Importante (Beneficio Utente):

• Utenti che usano screen reader o altri ausili uditivi possono trovare l'audio inaspettato distraente o coprire l'audio del loro ausilio.
• Migliora l'usabilità generale, evitando suoni improvvisi che possono spaventare o irritare gli utenti.

Cosa Verificare / Come Implementare:

• Controlli Visibili: Assicurati che ci siano pulsanti chiari e ben visibili (Pausa, Stop, Muto) per l'audio che si riproduce automaticamente.
• No Auto-play: La pratica migliore è evitare del tutto l'auto-riproduzione dell'audio. Lascia che l'utente decida quando avviare l'audio.

Errori Comuni da Evitare:

• Audio che si avvia automaticamente e non può essere interrotto o silenziato.

Strumenti Utili per il Test:

• Test Manuale: Visita la pagina e verifica subito se l'audio si avvia e se puoi controllarlo facilmente.

Obiettivo: Assicurare un rapporto di contrasto sufficiente tra il testo (e le immagini di testo) e il loro sfondo, per garantire leggibilità a persone con problemi di vista o daltonismo.

Perché è Importante (Beneficio Utente):

• Aumenta la leggibilità per persone con ipovisione o daltonismo.
• Migliora la leggibilità per tutti gli utenti in condizioni di luce avversa (es. luce solare intensa) o su schermi di bassa qualità.

Cosa Verificare / Come Implementare:

• Testo Normale: Il rapporto di contrasto deve essere di almeno 4.5:1 per il testo di dimensioni normali.
• Testo Grande: Per il testo di grandi dimensioni (almeno 18pt / 24px, o 14pt / 18.66px e in grassetto), il rapporto di contrasto deve essere di almeno 3:1.
• Loghi ed Elementi Decorativi: Non si applica ai loghi o al testo che fa parte di un'immagine puramente decorativa.

Errori Comuni da Evitare:

• Testo chiaro su sfondo chiaro o testo scuro su sfondo scuro con contrasto insufficiente.
• Sfondi con pattern o immagini che riducono il contrasto del testo.

Strumenti Utili per il Test:

• Analizzatori di Contrasto: Contrast Checker (online), Colour Contrast Analyser (applicazione desktop), estensioni browser come Axe DevTools o Lighthouse.
• CSS: Utilizza colori definiti con un buon rapporto di contrasto.

Obiettivo: Il testo (escluso il testo che fa parte di immagini) deve poter essere ridimensionato fino al 200% senza perdita di contenuto o funzionalità, senza l'uso di tecnologia assistiva.

Perché è Importante (Beneficio Utente):

• Utenti con ipovisione possono ingrandire il testo per leggerlo più facilmente senza dover scorrere orizzontalmente.
• Migliora l'usabilità generale su schermi a risoluzione diversa.

Cosa Verificare / Come Implementare:

• Unità Relative: Utilizza unità di misura relative per il testo (es. `em`, `rem`, `vw`) invece di unità assolute (`px`) per consentire il ridimensionamento facile.
• Layout Flessibile: Assicurati che il layout della pagina si adatti all'ingrandimento del testo, evitando sovrapposizioni o troncamenti del contenuto.

Errori Comuni da Evitare:

• Testo che si sovrappone o scompare quando ingrandito.
• Layout che richiede lo scorrimento orizzontale al 200% di zoom (violazione 1.4.10 Reflow).

Strumenti Utili per il Test:

• Funzione Zoom del Browser: Utilizza la funzione di zoom del browser (Ctrl/Cmd + `+`) per ingrandire il testo al 200% e verifica il layout.

Obiettivo: Se le tecnologie web possono essere utilizzate per ottenere l'effetto visivo desiderato, il testo deve essere utilizzato invece di immagini di testo. L'unica eccezione sono i loghi.

Perché è Importante (Beneficio Utente):

• Il testo reale è ridimensionabile senza perdita di qualità, personalizzabile (colore, font) e accessibile agli screen reader.
• Migliora la SEO e la copiabilità del testo.

Cosa Verificare / Come Implementare:

• Preferire il Testo HTML/CSS: Utilizza sempre testo reale stilizzato con CSS, piuttosto che immagini contenenti testo.
• Eccezioni (Loghi): I loghi che sono intrinsecamente immagini (es. con un design grafico complesso) sono un'eccezione accettabile. Assicurati che abbiano un alt text appropriato.

Errori Comuni da Evitare:

• Testo di intestazioni, pulsanti o istruzioni incorporato in immagini.

Strumenti Utili per il Test:

• Zoom del Browser: Ingrandisci la pagina. Se il testo diventa pixelato, è probabile che sia un'immagine.
• Tentare di selezionare il testo: Se non puoi selezionare il testo con il mouse, è probabilmente un'immagine.

Obiettivo: Il contenuto deve potersi riorganizzare linearmente senza perdere informazioni o funzionalità, quando viene visualizzato con una larghezza di 320 CSS pixel (equivalente al 400% di zoom su una larghezza standard di 1280px) senza richiedere lo scorrimento bidimensionale.

Perché è Importante (Beneficio Utente):

• Utenti con ipovisione che ingrandiscono il testo non devono scorrere orizzontalmente per leggere ogni riga.
• Migliora l'usabilità su schermi piccoli o per utenti che ingrandiscono molto il contenuto.

Cosa Verificare / Come Implementare:

• Layout Responsivo: Utilizza un design responsivo con media queries, flexbox o CSS Grid per adattare il layout a diverse larghezze di viewport.
• Contenuto Che Si Adatta: Assicurati che immagini, tabelle, video e altri elementi si ridimensionino o si riorganizzino in modo da non causare scorrimento orizzontale non necessario.

Errori Comuni da Evitare:

• Contenuto che "scompare" fuori dallo schermo o che richiede lo scorrimento orizzontale a zoom elevato.
• Elementi con larghezza fissa in pixel che superano la larghezza del viewport ridotto.

Strumenti Utili per il Test:

• Ridimensionamento Finestra Browser: Rimpicciolisci la finestra del browser per simulare schermi più piccoli o zoom elevato.
• Strumenti per Sviluppatori del Browser: Utilizza la "Modalità dispositivo" (Device Mode) per testare diverse dimensioni del viewport e livelli di zoom.

Obiettivo: Gli oggetti grafici essenziali per comprendere il contenuto e i componenti dell'interfaccia utente (es. bordi dei campi modulo, icone) devono avere un rapporto di contrasto di almeno 3:1 rispetto ai colori adiacenti.

Perché è Importante (Beneficio Utente):

• Permette a persone con problemi di vista di percepire e interagire con i controlli e le informazioni non testuali.
• Assicura che i confini e gli stati degli elementi interattivi siano chiari.

Cosa Verificare / Come Implementare:

• Controlli Interattivi: I bordi dei campi di input, i checkbox, i radio button, i toggle switch e gli indicatori di stato (es. la parte "on" di un toggle) devono avere un contrasto sufficiente.
• Icone Significative: Le icone che veicolano un significato (es. una lente di ingrandimento per la ricerca, una freccia per la navigazione) devono avere un contrasto adeguato rispetto allo sfondo.
• Grafici e Diagrammi: Le parti di un grafico (es. barre, linee) che sono essenziali per comprendere l'informazione devono avere un contrasto sufficiente tra di loro e rispetto allo sfondo.

Errori Comuni da Evitare:

• Bordi di input field che svaniscono su sfondi chiari.
• Icone con colori a basso contrasto.

Strumenti Utili per il Test:

• Analizzatori di Contrasto: Gli stessi strumenti usati per il contrasto del testo (Colour Contrast Analyser, estensioni browser) possono aiutare.
• Test Manuale: Osserva attentamente gli elementi non testuali e valuta se sono chiaramente distinguibili.

Obiettivo: Il contenuto testuale deve rimanere leggibile e funzionale quando l'utente modifica la spaziatura del testo tramite CSS o estensioni del browser (senza scorrimento bidimensionale, violazioni di 1.4.10, o perdita di funzionalità).

Perché è Importante (Beneficio Utente):

• Utenti con disabilità cognitive (es. dislessia) o problemi visivi spesso beneficiano di una maggiore spaziatura tra lettere, parole e righe.
• Permette la personalizzazione dell'esperienza di lettura senza rompere il layout.

Cosa Verificare / Come Implementare:

• Unità Relative per Spaziatura: Utilizza unità relative (es. `em`, `rem`) per `line-height`, `letter-spacing`, `word-spacing` e `margin`/`padding` quando possibile, per adattarsi alle modifiche dell'utente.
• Evitare Contenuto Fissato: Evita di fissare l'altezza o la larghezza dei contenitori di testo in modo che il testo non possa espandersi.

Errori Comuni da Evitare:

• Testo che si sovrappone, scompare o causa scorrimento orizzontale quando la spaziatura è aumentata.
• Elementi dell'interfaccia utente che non si adattano ai blocchi di testo più grandi.

Strumenti Utili per il Test:

• CSS Override: Utilizza gli strumenti per sviluppatori del browser per modificare i valori CSS (`line-height`, `letter-spacing`, `word-spacing`) e vedere come il layout si comporta.
• Estensioni per la Spaziatura: Esistono estensioni browser che consentono di aumentare la spaziatura del testo per testare questo criterio.

Obiettivo: Il contenuto che appare e scompare al passaggio del mouse (hover) o al focus (es. tooltip, sottomenu) deve essere dismissible (chiudibile), hoverable (selezionabile con il mouse) e persistent (persistente fino alla chiusura volontaria o al passaggio del focus).

Perché è Importante (Beneficio Utente):

• Utenti con disabilità motorie che faticano a mantenere il mouse su un elemento possono accedere al contenuto.
• Utenti che navigano con tastiera possono accedere e interagire con il contenuto.
• Utenti con disabilità cognitive hanno il tempo sufficiente per leggere e comprendere il contenuto senza che scompaia troppo velocemente.

Cosa Verificare / Come Implementare:

• Dismissible (Chiudibile): Il contenuto deve poter essere chiuso dall'utente senza spostare il focus o il puntatore. Questo include la possibilità di chiuderlo con il tasto Esc o cliccando fuori dall'area del contenuto.
• Hoverable (Selezionabile): Se il contenuto appare al passaggio del mouse, l'utente deve poter muovere il mouse su di esso per interagire (es. cliccare un link all'interno di un tooltip). Non deve scomparire se il mouse si sposta leggermente.
• Persistent (Persistente): Il contenuto deve rimanere visibile finché l'utente non lo chiude esplicitamente, oppure finché non sposta il focus o il puntatore lontano dal trigger *e* dal contenuto stesso.

Errori Comuni da Evitare:

• Tooltip che scompaiono appena il mouse si muove dal trigger, impedendo l'interazione.
• Sottomenu che si chiudono troppo rapidamente.
• Contenuto su focus non accessibile tramite tastiera.

Strumenti Utili per il Test:

• Navigazione da Tastiera: Usa solo la tastiera per accedere ed interagire con gli elementi che mostrano contenuto su hover/focus.
• Test Mouse: Sposta il mouse lentamente per vedere se il contenuto persiste e se puoi interagire con esso.

Obiettivo: Tutta la funzionalità del contenuto deve essere operabile tramite un'interfaccia a tastiera senza richiedere tempi specifici per i singoli tasti. Questo è essenziale per gli utenti che non possono usare il mouse o altri dispositivi di puntamento.

Perché è Importante (Beneficio Utente):

• Essenziale per utenti con disabilità motorie che non possono usare il mouse.
• Permette la navigazione per utenti di screen reader e per chi preferisce la tastiera.
• Utile su dispositivi touch dove la "tabulazione" può simulare il tocco.

Cosa Verificare / Come Implementare:

• Accesso Completo: Ogni elemento interattivo (link, pulsanti, campi modulo, elementi di navigazione, popup) deve essere raggiungibile tramite il tasto `Tab` e attivabile con `Invio` o `Spazio`.
• Stati di Focus: Il focus della tastiera deve essere sempre visibile e chiaro quando un elemento è selezionato (vedi 2.4.7 Focus Visibile).
• Ordine Logico: L'ordine di tabulazione (`tabindex`) deve essere logico e coerente con l'ordine visivo e di lettura del contenuto.

Errori Comuni da Evitare:

• Elementi interattivi che non ricevono il focus della tastiera.
• Funzionalità accessibile solo tramite mouse (es. drag-and-drop senza alternativa da tastiera).
• Ordine di tabulazione casuale o che salta elementi.

Strumenti Utili per il Test:

• Test Manuale: Naviga l'intera pagina utilizzando solo il tasto `Tab` (e `Shift+Tab` per andare indietro), `Invio` e `Spazio`.
• Estensioni Browser: Axe DevTools, Lighthouse (per controlli automatizzati di elementi focusabili).

Obiettivo: Se il focus della tastiera può essere spostato su un componente tramite tastiera, deve essere possibile spostarlo via da quel componente utilizzando solo la tastiera. Se si richiede una sequenza specifica di tasti, l'utente deve essere informato.

Perché è Importante (Beneficio Utente):

• Evita che gli utenti dipendenti dalla tastiera rimangano "bloccati" in una parte della pagina.
• Garantisce la piena navigabilità e usabilità del sito.

Cosa Verificare / Come Implementare:

• Uscita da Modal/Pop-up: Assicurati che i dialoghi modali o i pop-up possano essere chiusi e il focus riportato al contenuto sottostante utilizzando il tasto `Esc` o il tasto `Tab`.
• Componenti Personalizzati: Se si usano widget complessi o incorporati, verifica che il focus possa entrare e uscire liberamente.

Errori Comuni da Evitare:

• Focus che entra in un elemento (es. un iframe o un widget personalizzato) e non può uscirne con `Tab`.

Strumenti Utili per il Test:

• Test Manuale: Naviga la pagina con il solo tasto `Tab` e `Shift+Tab`. Se ti trovi "bloccato" in un'area, è una trappola di tastiera.

Obiettivo: Se una scorciatoia da tastiera con un singolo carattere viene implementata, l'utente deve poterla disattivare, rimappare o deve essere attiva solo quando un componente specifico ha il focus.

Perché è Importante (Beneficio Utente):

• Evita conflitti con le scorciatoie di screen reader o altre tecnologie assistive, o con la normale digitazione dell'utente.
• Garantisce un'esperienza di digitazione fluida e prevedibile.

Cosa Verificare / Come Implementare:

• Opzioni per l'Utente: Se il tuo sito usa scorciatoie da tastiera a singolo carattere (es. premere 'S' per salvare), offri all'utente la possibilità di disattivarle o di modificarle.
• Contesto Specifico: Idealmente, le scorciatoie a singolo carattere dovrebbero funzionare solo quando un elemento specifico (es. un campo di testo o un'area di input) ha il focus, in modo da non interferire con la normale digitazione.

Errori Comuni da Evitare:

• Scorciatoie a singolo carattere attive globalmente sulla pagina, che interferiscono con la digitazione in campi di testo o con le scorciatoie dello screen reader.

Strumenti Utili per il Test:

• Test Manuale: Prova a digitare normalmente in un campo di testo e verifica se le scorciatoie involontariamente si attivano.

Obiettivo: Per qualsiasi limite di tempo imposto dal contenuto, l'utente deve avere il controllo di esso: la possibilità di estenderlo, disattivarlo o regolarlo, a meno che il limite non sia essenziale o più lungo di 20 ore.

Perché è Importante (Beneficio Utente):

• Utenti con disabilità cognitive, motorie o visive potrebbero aver bisogno di più tempo per leggere o interagire con il contenuto.
• Riduce lo stress e la frustrazione, consentendo agli utenti di operare al proprio ritmo.

Cosa Verificare / Come Implementare:

• Estensione del Tempo: Se c'è un timeout di sessione o un limite di tempo per completare un'operazione, offrire un avviso chiaro e la possibilità di estendere il tempo.
• Pausa/Stop: Per quiz a tempo o giochi, offrire la possibilità di mettere in pausa o resettare il tempo.
• Eccezioni: Se il tempo è un elemento critico dell'attività (es. un'asta dal vivo), il limite può essere mantenuto, ma deve essere chiaramente comunicato.

Errori Comuni da Evitare:

• Timeout di sessione che scadono senza avviso o possibilità di estensione.
• Componenti con tempo limitato senza controlli per l'utente.

Strumenti Utili per il Test:

• Test Manuale: Avvia le funzionalità a tempo e verifica l'esistenza e la funzionalità dei controlli di tempo.

Obiettivo: Per il contenuto che si muove, lampeggia, scorre o si aggiorna automaticamente e dura più di 5 secondi, deve essere disponibile un meccanismo per mettere in pausa, interrompere o nascondere tale movimento.

Perché è Importante (Beneficio Utente):

• Evita distrazioni per utenti con disabilità cognitive o disturbi dell'attenzione.
• Permette agli utenti con disabilità motorie di interagire con il contenuto senza la pressione del tempo.
• Riduce il disagio visivo causato da movimenti rapidi o lampeggianti.

Cosa Verificare / Come Implementare:

• Slider/Caroselli: Fornire pulsanti "Pausa", "Play", "Precedente", "Successivo" e indicatori di slide. Idealmente, mettere in pausa automaticamente all'hover.
• Notifiche/Aggiornamenti Live: Se ci sono aggiornamenti automatici (es. feed di notizie), dare la possibilità di metterli in pausa o disattivarli.
• Animazioni Loop: Animazioni decorative che durano più di 5 secondi dovrebbero poter essere messe in pausa o nascoste.

Errori Comuni da Evitare:

• Slider o caroselli che non possono essere messi in pausa.
• Contenuti che si aggiornano automaticamente e non possono essere controllati.

Strumenti Utili per il Test:

• Test Manuale: Interagisci con tutti gli elementi in movimento o che si aggiornano automaticamente per verificare i controlli.

Obiettivo: Il contenuto non deve contenere nulla che lampeggi più di tre volte in un secondo, o il lampeggio deve essere sotto le soglie di rischio generale per le crisi epilettiche.

Perché è Importante (Beneficio Utente):

• Previene crisi epilettiche fotosensibili in persone predisposte.
• Riduce il disagio visivo e la distrazione per tutti gli utenti.

Cosa Verificare / Come Implementare:

• Evitare Lampeggi Rapidi: Non utilizzare animazioni o effetti visivi che producono lampeggi superiori a 3 volte al secondo.
• Soglie di Sicurezza: Se il lampeggio è necessario, assicurati che rientri nelle soglie di sicurezza (es. non più di 3 flash in un secondo in una determinata area dello schermo).

Errori Comuni da Evitare:

• GIF animate o video con effetti stroboscopici.
• Notifiche o avvisi che lampeggiano rapidamente.

Strumenti Utili per il Test:

• Test Manuale/Video: Registra la schermata e analizza la frequenza di lampeggio.

Obiettivo: Fornire un meccanismo per bypassare blocchi di contenuto che si ripetono su più pagine web.

Perché è Importante (Beneficio Utente):

• Utenti di tastiera e screen reader possono saltare blocchi di navigazione o header ripetitivi, accedendo direttamente al contenuto principale.
• Migliora l'efficienza della navigazione e riduce la frustrazione.

Cosa Verificare / Come Implementare:

• Skip Link: Implementa un "skip link" (link salta navigazione/salta al contenuto principale) all'inizio della pagina. Deve essere visibile quando riceve il focus (es. con il tasto Tab).

  <a href="#main-content" class="sr-only sr-only-focusable">Salta al contenuto principale</a>
                                                                                                                                                                              ...
                                                                                                                                                                              <main id="main-content">...</main>

• Landmark Roles: L'uso corretto di elementi HTML5 semantici (`
  `, `

Errori Comuni da Evitare:

• Mancanza di un "skip link" o meccanismi simili.
• "Skip link" non focusabile o non visibile quando focusato.

Strumenti Utili per il Test:

• Navigazione con Tastiera: Premi `Tab` all'inizio della pagina per vedere se il "skip link" appare e funziona.
• Screen Reader: Prova a navigare per landmark o con i tasti rapidi dello screen reader.

Obiettivo: Assicurarsi che ogni pagina web abbia un titolo che descriva il suo argomento o scopo. Il titolo è cruciale per l'identificazione della pagina da parte degli utenti e delle tecnologie assistive.

Perché è Importante (Beneficio Utente):

• Orientamento: Aiuta gli utenti a capire rapidamente il contenuto di una pagina senza doverla leggere per intero, specialmente quando hanno molte schede aperte nel browser.
• Navigazione con Screen Reader: Gli screen reader leggono il titolo della pagina quando l'utente la visita, fornendo un contesto immediato.
• SEO e Segnalibri: Migliora la SEO e rende più facile per gli utenti identificare le pagine nei risultati di ricerca o quando le salvano come preferiti.

Cosa Verificare / Come Implementare:

• Titolo Descrittivo: Ogni pagina deve avere un elemento `<title>` nel `<head>` che sia unico e descrittivo. Dovrebbe riassumere l'argomento principale della pagina.
• Titolo Unico: Ogni pagina del sito dovrebbe avere un titolo distinto e significativo per evitare confusione.
• Posizione del Titolo: Il titolo viene visualizzato nella barra del titolo del browser, nelle schede del browser e nei risultati dei motori di ricerca.

Errori Comuni da Evitare:

• Titoli Mancanti: Non avere un elemento `<title>` nella pagina.
• Titoli Generici: Usare titoli non informativi come "Home", "Pagina 1", "Senza Titolo".
• Titoli Duplicati: Pagine diverse con lo stesso titolo, rendendo difficile distinguere tra loro per gli utenti.

Strumenti Utili per il Test:

• Controllo del Browser: Controlla la scheda del browser o la barra del titolo per visualizzare il titolo della pagina.
• Ispezione del Codice: Verifica la presenza e il contenuto dell'elemento `<title>` nel `<head>` (Ctrl+U o Cmd+Option+U per visualizzare il sorgente).
• Screen Reader: Ascolta come lo screen reader annuncia il titolo della pagina all'apertura.

Obiettivo: Se un contenuto può essere navigato in sequenza e la sequenza influisce sul significato o sull'operabilità, gli oggetti focusabili devono ricevere il focus in un ordine che preservi il significato e l'operabilità.

Perché è Importante (Beneficio Utente):

• Utenti di tastiera e screen reader possono navigare la pagina in modo logico e prevedibile.
• Previene la confusione e la frustrazione dovute a salti illogici tra gli elementi interattivi.

Cosa Verificare / Come Implementare:

• Ordine Logico e Visivo: L'ordine in cui gli elementi ricevono il focus tramite `Tab` deve seguire l'ordine visivo e di lettura del contenuto (es. dall'alto al basso, da sinistra a destra nelle lingue LTR).
• Evitare `tabindex > 0`: Non usare `tabindex="1"`, `tabindex="2"` ecc., a meno che non sia strettamente necessario per manipolare un ordine di focus non standard in modo accessibile (raramente). Lascia che il browser gestisca l'ordine naturale del DOM.
• Contenuto Dinamico: Quando un nuovo contenuto appare (es. un dialogo modale), il focus dovrebbe essere spostato programmaticamente all'inizio di quel contenuto. Alla chiusura, il focus dovrebbe tornare all'elemento che lo ha attivato.

Errori Comuni da Evitare:

• Ordine di tabulazione che salta sezioni o è illogico.
• Il focus non si sposta in modo prevedibile dopo l'apertura/chiusura di un componente dinamico.

Strumenti Utili per il Test:

• Test Manuale: Naviga la pagina usando solo il tasto `Tab` per verificare l'ordine del focus.
• Screen Reader: Ascolta l'ordine in cui gli elementi vengono annunciati.

Obiettivo: Lo scopo di ogni link deve essere chiaro dal solo testo del link o dal testo del link combinato con il suo contesto programmatico.

Perché è Importante (Beneficio Utente):

• Utenti di screen reader spesso navigano le pagine saltando da un link all'altro. Un testo di link chiaro li aiuta a capire la destinazione.
• Migliora la comprensione per tutti, riducendo l'ambiguità e i clic errati.

Cosa Verificare / Come Implementare:

• Testo del Link Descrittivo: Utilizza testi di link significativi (es. "Scarica il report annuale in PDF" invece di "Clicca qui").
• Contesto Aggiuntivo: Se il testo del link da solo non è sufficiente, assicurati che il contesto circostante (testo del paragrafo, intestazione della lista) fornisca il chiarimento necessario.
• Attributo `aria-label`: Per casi complessi o per link icona, puoi usare `aria-label` per fornire una descrizione aggiuntiva (che sovrascrive il testo visibile per gli screen reader).

  <a href="info.html" aria-label="Maggiori informazioni sulla nostra azienda">Leggi di più</a>

Errori Comuni da Evitare:

• Testi di link generici come "Clicca qui", "Maggiori informazioni", "Leggi di più" quando non c'è contesto esplicito.
• Link composti solo da URL non parlanti.

Strumenti Utili per il Test:

• Screen Reader: Naviga la pagina per link (spesso con tasto `L`) e valuta se i testi dei link sono comprensibili fuori contesto.
• Estensioni Browser: Web Developer (Outline > Link Details), Axe DevTools, Lighthouse.

Obiettivo: Deve essere disponibile più di un modo per localizzare una pagina web all'interno di un insieme di pagine web, a meno che la pagina non sia il risultato di un processo o un passo specifico.

Perché è Importante (Beneficio Utente):

• Utenti con disabilità cognitive o difficoltà di navigazione possono trovare il contenuto desiderato più facilmente.
• Offre flessibilità nella navigazione, adattandosi a diverse preferenze utente.

Cosa Verificare / Come Implementare:

• Navigazione Principale: Deve essere presente un sistema di navigazione consistente (es. menu principale, breadcrumbs).
• Ricerca: Fornire una funzione di ricerca nel sito.
• Mappa del Sito: Offrire una mappa del sito (HTML o XML) o un indice del sito.
• Link Contestuali: Utilizzare link contestuali rilevanti nel corpo del testo.

Errori Comuni da Evitare:

• Sito navigabile solo tramite un unico percorso (es. solo barra di ricerca o solo menu).

Strumenti Utili per il Test:

• Test Manuale: Prova a trovare una pagina specifica in più di un modo.

Obiettivo: Le intestazioni e le etichette devono descrivere l'argomento o lo scopo degli elementi a cui si riferiscono.

Perché è Importante (Beneficio Utente):

• Facilita la comprensione del contenuto e della struttura della pagina per tutti gli utenti.
• Gli screen reader annunciano le intestazioni e le etichette, consentendo una navigazione rapida.

Cosa Verificare / Come Implementare:

• Intestazioni Descrittive: Assicurati che il testo delle intestazioni (`

  ` - `

  `) rifletta accuratamente il contenuto della sezione che introducono.

• Etichette Chiare: Le etichette dei campi modulo (``) devono essere chiare e indicare lo scopo del campo.
• Testo Pulsanti: Il testo sui pulsanti deve descrivere l'azione che verrà eseguita.

Errori Comuni da Evitare:

• Intestazioni vaghe o non correlate al contenuto.
• Etichette di moduli non chiare (es. "Campo 1" anziché "Nome Utente").

Strumenti Utili per il Test:

• Screen Reader: Naviga per intestazioni o moduli per sentire come vengono annunciati gli elementi.
• Test Manuale: Leggi solo le intestazioni/etichette e valuta se il loro scopo è immediatamente chiaro.

Obiettivo: Qualsiasi indicatore di focus per l'interfaccia utente (es. quando un link o un campo modulo è selezionato) deve essere chiaramente visibile quando viene utilizzato il tasto della tastiera.

Perché è Importante (Beneficio Utente):

• Essenziale per gli utenti che navigano tramite tastiera per sapere sempre dove si trovano sulla pagina.
• Utile per gli utenti con disabilità cognitive o visive per orientarsi.

Cosa Verificare / Come Implementare:

• Default Browser Focus: Non rimuovere l'outline di focus predefinito del browser a meno che non si fornisca un indicatore di focus personalizzato che sia altrettanto o più visibile.
• Stile del Focus: Lo stile del focus dovrebbe essere evidente (es. bordo spesso, colore contrastante, ombra). Evita stili di focus troppo sottili o che si confondono con lo sfondo.

Errori Comuni da Evitare:

• Usare `outline: none;` in CSS senza fornire un'alternativa visibile.
• Indicatori di focus che hanno un contrasto insufficiente.

Strumenti Utili per il Test:

• Test Manuale: Naviga l'intera pagina con il tasto `Tab` e osserva attentamente l'indicatore di focus.
• Estensioni Browser: Axe DevTools, Lighthouse (possono rilevare la mancanza di focus style).

Obiettivo: La lingua umana predefinita di ogni pagina web deve essere determinata programmaticamente.

Perché è Importante (Beneficio Utente):

• Consente agli screen reader di pronunciare correttamente il contenuto nella lingua appropriata.
• Migliora l'esperienza per gli utenti che utilizzano strumenti di traduzione.

Cosa Verificare / Come Implementare:

• **Attributo `lang`:** Dichiarare la lingua principale nell'elemento `` (es. `` per italiano, `` per inglese).

  <html lang="it">

Errori Comuni da Evitare:

• Omettere l'attributo `lang`.
• Dichiarare una lingua sbagliata.

Strumenti Utili per il Test:

• **Validatori HTML:** Controllano la presenza e la correttezza dell'attributo `lang`.
• **Screen Reader:** Ascolta come lo screen reader pronuncia il testo se la lingua è impostata in modo errato.

Obiettivo: La lingua umana di ogni passaggio o frase nel contenuto deve essere determinata programmaticamente.

Perché è Importante (Beneficio Utente):

• Gli screen reader possono cambiare la pronuncia per le parole in lingue diverse, migliorando la comprensione.
• Facilita la traduzione automatica di sezioni multilingue.

Cosa Verificare / Come Implementare:

• **Attributo `lang` per Sottosezioni:** Se una sezione di testo è in una lingua diversa da quella principale della pagina, usa l'attributo `lang` su un elemento HTML che la racchiude (es. ``, `

  `, `

  `).

  <p>Ciao, come stai? And then, <span lang="en">Hello, how are you?</span></p>

Errori Comuni da Evitare:

• Non dichiarare la lingua di blocchi di testo che non sono nella lingua principale.

Strumenti Utili per il Test:

• **Screen Reader:** Ascolta il testo in lingua straniera per sentire se la pronuncia è corretta.

Obiettivo: Il cambiamento di focus su un componente dell'interfaccia utente non deve causare automaticamente un cambiamento di contesto.

Perché è Importante (Beneficio Utente):

• Utenti con disabilità cognitive o visive potrebbero essere disorientati da cambiamenti improvvisi della pagina.
• Evita che l'utente perda il suo posto o attivi azioni indesiderate senza preavviso.

Cosa Verificare / Come Implementare:

• **Nessun Reindirizzamento Automatico:** Spostare il focus su un link o un pulsante non deve reindirizzare automaticamente la pagina. L'azione deve avvenire solo dopo che l'utente ha attivato l'elemento.
• **Nessun Invio Automatico di Moduli:** Un campo di input non deve inviare automaticamente un modulo solo perché ha ricevuto il focus.

Errori Comuni da Evitare:

• Un link che si attiva automaticamente al focus.
• Un campo dropdown che invia il modulo quando l'utente lo raggiunge con il tab.

Strumenti Utili per il Test:

• **Test Tastiera:** Naviga la pagina con `Tab` e `Shift+Tab`. Osserva se ci sono cambiamenti inaspettati nel contenuto o reindirizzamenti.

Obiettivo: Il cambiamento di impostazione di qualsiasi componente dell'interfaccia utente (es. un checkbox, un radio button) non deve causare automaticamente un cambiamento di contesto, a meno che l'utente non sia informato del comportamento prima di utilizzare il componente.

Perché è Importante (Beneficio Utente):

• Previene disorientamento e azioni indesiderate, soprattutto per utenti con disabilità cognitive o motorie.
• Assicura che l'utente mantenga il controllo sulle proprie azioni.

Cosa Verificare / Come Implementare:

• **Nessun Invio Automatico:** Non inviare automaticamente un modulo dopo aver selezionato un'opzione in un dropdown o un checkbox. L'invio dovrebbe avvenire solo tramite un pulsante "Invia" esplicito.
• **Avvisi Preventivi:** Se un'azione (es. cambio lingua) causa un cambiamento di contesto immediato, avvisa l'utente in anticipo (es. "Selezionando una lingua, la pagina verrà ricaricata").

Errori Comuni da Evitare:

• Un filtro a discesa che ricarica la pagina non appena viene selezionata un'opzione, senza un pulsante "Applica".

Strumenti Utili per il Test:

• **Test Manuale:** Interagisci con i componenti di input e osserva se ci sono cambiamenti di contesto non annunciati o inaspettati.

Obiettivo: I meccanismi di navigazione che si ripetono su più pagine web devono apparire nello stesso ordine relativo, a meno che un cambiamento non sia attivato dall'utente.

Perché è Importante (Beneficio Utente):

• Aiuta gli utenti con disabilità cognitive o visive a orientarsi e a costruire un modello mentale del sito.
• Riduce il carico cognitivo e la frustrazione.

Cosa Verificare / Come Implementare:

• **Posizionamento Coerente:** Menu di navigazione principale, barra di ricerca, footer e altri elementi ripetitivi devono mantenere la stessa posizione relativa e lo stesso ordine su tutte le pagine.
• **Consistenza Funzionale:** Se un menu si espande, deve farlo nello stesso modo ovunque.

Errori Comuni da Evitare:

• Menu di navigazione che cambiano posizione o ordine degli elementi da una pagina all'altra.

Strumenti Utili per il Test:

• **Test Manuale:** Naviga diverse pagine del sito e osserva la consistenza dei meccanismi di navigazione.

Obiettivo: I componenti che hanno la stessa funzionalità all'interno di un insieme di pagine web devono essere identificati in modo coerente.

Perché è Importante (Beneficio Utente):

• Utenti con disabilità cognitive o visive possono riconoscere rapidamente elementi familiari e la loro funzione.
• Crea un'esperienza utente prevedibile e riduce la necessità di ri-apprendimento.

Cosa Verificare / Come Implementare:

• **Testo e Icone:** Se un pulsante "Cerca" ha un'icona lente di ingrandimento e il testo "Cerca", deve mantenere lo stesso testo e icona (o simile) su tutte le pagine dove svolge la stessa funzione.
• **Nomi Accessibili:** Utilizza `aria-label` o `aria-labelledby` in modo coerente per identificare elementi che hanno la stessa funzione ma forse un testo visivo leggermente diverso (meno comune, ma utile).

Errori Comuni da Evitare:

• Pulsanti con la stessa funzione ma etichette diverse (es. "Invia" in una pagina, "Conferma" in un'altra).

Strumenti Utili per il Test:

• **Test Manuale:** Naviga diverse pagine e verifica se i componenti ripetuti hanno un'identificazione chiara e coerente.

Obiettivo: Se un errore di input viene rilevato automaticamente, l'elemento che presenta l'errore deve essere identificato all'utente e la descrizione dell'errore deve essere fornita in testo.

Perché è Importante (Beneficio Utente):

• Permette a tutti gli utenti, inclusi quelli con disabilità visive o cognitive, di capire cosa è andato storto e come correggerlo.
• Evita frustrazione e blocchi nel completamento di moduli o processi.

Cosa Verificare / Come Implementare:

• **Messaggi di Errore Testuali:** Quando un utente commette un errore in un modulo, deve apparire un messaggio di errore chiaro e descrittivo in testo (es. "Il campo email non è valido").
• **Associazione all'Input:** Il messaggio di errore deve essere chiaramente associato al campo di input errato (es. usando `aria-describedby` o posizionandolo vicino).
• **Indicatori Visivi Aggiuntivi:** Oltre al colore (es. bordo rosso), usa icone o testi per indicare l'errore.
• **Focus sull'Errore:** Sposta il focus programmaticamente al primo campo con errore dopo l'invio del modulo.

Errori Comuni da Evitare:

• Indicare un errore solo con il colore (es. solo un bordo rosso senza testo).
• Messaggi di errore generici o non specifici.
• Messaggi di errore che non sono leggibili dagli screen reader.

Strumenti Utili per il Test:

• **Screen Reader:** Invia un modulo con errori e verifica che lo screen reader annunci chiaramente gli errori.
• **Test Manuale:** Simula errori di input e verifica la chiarezza dei messaggi.

Obiettivo: Le etichette o le istruzioni sono fornite quando il contenuto richiede l'input dell'utente.

Perché è Importante (Beneficio Utente):

• Tutte le persone possono capire cosa ci si aspetta in ogni campo di input.
• Gli screen reader annunciano le etichette, guidando gli utenti nella compilazione dei moduli.

Cosa Verificare / Come Implementare:

• **Etichette Associate:** Ogni campo di input in un modulo deve avere una `<label>` associata esplicitamente usando `for` e `id`.
• **Istruzioni Chiare:** Fornire istruzioni chiare e concise su formati richiesti (es. "DD/MM/YYYY"), campi obbligatori, o limiti di caratteri.
• **Placeholder Text (Attenzione):** Il testo placeholder non deve essere usato come sostituto delle etichette, in quanto scompare all'input e non è sempre accessibile. Usalo solo come suggerimento aggiuntivo.

Errori Comuni da Evitare:

• Campi modulo senza etichette visibili o programmaticamente associate.
• Usare solo il placeholder come etichetta.

Strumenti Utili per il Test:

• **Screen Reader:** Naviga un modulo con uno screen reader per verificare che ogni campo sia annunciato con la sua etichetta corretta.
• **Estensioni Browser:** Axe DevTools, Lighthouse, WAVE (rilevano etichette mancanti o non associate).
• **Test Manuale:** Clicca sull'etichetta di un campo: il focus dovrebbe spostarsi sul campo corrispondente.

Obiettivo: Se viene rilevato un errore di input e sono noti suggerimenti per la correzione, questi suggerimenti devono essere forniti all'utente.

Perché è Importante (Beneficio Utente):

• Guida gli utenti su come correggere gli errori, riducendo la frustrazione e il tempo necessario per completare un'azione.
• Particolarmente utile per utenti con disabilità cognitive che potrebbero non capire l'errore senza suggerimenti.

Cosa Verificare / Come Implementare:

• **Suggerimenti Specifici:** Invece di un generico "Errore", fornire suggerimenti come "Inserisci un indirizzo email valido (es. nome@dominio.com)" o "La password deve contenere almeno 8 caratteri".
• **Formato e Posizione:** I suggerimenti dovrebbero essere in formato testuale, chiaramente visibili e posizionati vicino al campo errato.

Errori Comuni da Evitare:

• Messaggi di errore vaghi che non indicano come risolvere il problema.

Strumenti Utili per il Test:

• **Test Manuale:** Simula vari errori e verifica la chiarezza e l'utilità dei suggerimenti.

Obiettivo: Per pagine web che richiedono all'utente di inviare informazioni legali, transazioni finanziarie, o altri dati irreversibili, deve esserci un meccanismo per la prevenzione degli errori o la loro correzione.

Perché è Importante (Beneficio Utente):

• Protegge gli utenti da errori costosi o irreversibili (es. acquisti, trasferimenti di denaro, dati medici).
• Aumenta la fiducia nell'interfaccia.

Cosa Verificare / Come Implementare:

• **Verifica/Revisione:** Permetti agli utenti di rivedere e correggere le informazioni prima dell'invio finale.
• **Conferma:** Richiedi una conferma esplicita dell'invio (es. "Sei sicuro di voler procedere?").
• **Annulla:** Offri la possibilità di annullare la transazione o il cambiamento.
• **Validazione Automatica:** Utilizza la validazione in tempo reale dove possibile per prevenire errori prima dell'invio.

Errori Comuni da Evitare:

• Transazioni irreversibili che non offrono alcuna possibilità di revisione o annullamento.

Strumenti Utili per il Test:

• **Test Manuale:** Simula transazioni importanti e verifica la presenza e la funzionalità dei meccanismi di prevenzione errori.

Obiettivo: Nel contenuto implementato usando linguaggi di markup, gli elementi hanno tag di inizio e fine completi, gli elementi sono annidati secondo le loro specifiche, non ci sono ID duplicati, e ogni ID è unico, eccetto quando le specifiche lo permettono.

Perché è Importante (Beneficio Utente):

• Garantisce che tutti i browser e le tecnologie assistive possano analizzare (parse) e interpretare correttamente il contenuto.
• Previene comportamenti imprevedibili o errori di visualizzazione/funzionalità.

Cosa Verificare / Come Implementare:

• Validità HTML/XML: Assicurati che il codice HTML sia valido e ben formato, senza errori di sintassi.
• ID Unici: Ogni attributo `id` deve essere unico all'interno della pagina.
• Annidamento Corretto: Gli elementi devono essere annidati correttamente (es. `` non deve contenere un altro ``).