Scopo #
Lo scopo principale di questo test di accessibilità manuale è valutare meticolosamente la presenza, la pertinenza e l’accuratezza delle alternative testuali per contenuti non testuali, in particolare immagini, e identificare i casi in cui il testo viene presentato come immagine inutilmente. Questo test mira a confermare la conformità ai Criteri di Successo WCAG 2.2 1.1.1 Contenuto non testuale (A), 1.4.5 Immagini di testo (AA), 1.4.9 Immagini di testo (Nessuna eccezione) (AAA) e 1.3.3 Caratteristiche sensoriali (A). Alternative testuali appropriate sono fondamentali per gli utenti che non possono percepire i contenuti visivi (ad esempio, utenti non vedenti, coloro che utilizzano browser solo testo), mentre evitare immagini di testo garantisce scalabilità, personalizzazione e rendering corretto su diversi dispositivi e impostazioni utente. Questo processo manuale si basa sull’ispezione visiva, sull’analisi degli strumenti di sviluppo e sulla verifica tramite screen reader per garantire che tutto il contenuto visivo significativo sia disponibile a livello di programmazione in formato testo e che il testo sia effettivamente testo.
Criteri WCAG coperti #
Questo test affronta specificamente i seguenti criteri di successo WCAG 2.2 relativi alle alternative di immagini e testo:
- 1.1.1 Contenuto non testuale – A
Questo criterio richiede che tutti i contenuti non testuali presentati all’utente abbiano un’alternativa testuale che svolga lo stesso scopo, fatta eccezione per alcune eccezioni (ad esempio, controllo, contenuti multimediali temporizzati, test, captcha, decorazione). Per le immagini, ciò significa principalmente l’attributo alt per i tag <img> o nomi accessibili equivalenti per le immagini generate tramite CSS o altri mezzi.
Rilevanza/Test:
Esamineremo ogni immagine sulla pagina per verificare che abbia un attributo alt appropriato. Valuteremo il testo alt per verificarne l’accuratezza, la concisione e la pertinenza contestuale. Questo include la distinzione tra immagini informative (che necessitano di un testo alt descrittivo), immagini funzionali (che necessitano di un testo alt che ne descriva l’azione) e immagini decorative (che dovrebbero avere un testo alt nullo, alt=””). Utilizzeremo degli screen reader per confermare che il testo alt sia letto correttamente.
- 1.4.5 Immagini di testo – AA
Questo criterio stabilisce che, se le tecnologie utilizzate consentono di ottenere una presentazione visiva, il testo viene utilizzato per trasmettere informazioni anziché immagini di testo, salvo alcune eccezioni (ad esempio, loghi, parti di uno screenshot, testo altrimenti personalizzabile). Ciò significa che le etichette dell’interfaccia, le intestazioni e il corpo del testo devono essere costituiti da testo HTML vero e proprio, anziché essere incorporati in un file immagine.
Rilevanza/Test:
Analizzeremo visivamente l’intera pagina per individuare eventuali casi in cui il testo sia presentato come immagine. Per ciascuno di questi casi, verificheremo se rientra in un’eccezione consentita (ad esempio, si tratta di un logo). In caso contrario, lo identificheremo come un errore, poiché il testo reale offre una migliore scalabilità, ricercabilità e accessibilità (ad esempio, il testo può essere ridimensionato, personalizzato tramite fogli di stile utente e letto dagli screen reader senza dover ricorrere al testo alternativo, che potrebbe essere insufficiente per blocchi di testo complessi).
- 1.4.9 Immagini di testo (nessuna eccezione) – AAA
Questo criterio è una versione più restrittiva della versione 1.4.5. Stabilisce che le immagini di testo siano utilizzate solo a scopo puramente decorativo o quando il testo fa parte di una fotografia o di altro contenuto visivo. Ciò significa che, anche se una specifica presentazione visiva del testo (ad esempio, un’intestazione altamente stilizzata) non può essere ottenuta con i CSS, non rispetterebbe comunque la versione 1.4.9 se si trattasse di un’immagine di testo e non di un elemento puramente decorativo o parte di una fotografia.
Rilevanza/Test:
Per una valutazione AAA, rivaluteremo tutte le istanze di immagini di testo identificate al punto 1.4.5. Applicheremo rigorosamente la regola “nessuna eccezione”, ovvero qualsiasi testo funzionale o informativo presentato come immagine (anche per motivi di design) verrà segnalato come non valido, a meno che non si tratti di un logo o di una parte integrante di una fotografia/screenshot. Sono comunque ammesse immagini di testo puramente decorative (con alt=””).
- 1.3.3 Caratteristiche sensoriali – A
Questo criterio richiede che le istruzioni per la comprensione e l’utilizzo dei contenuti non si basino esclusivamente sulle caratteristiche sensoriali di componenti come forma, dimensione, posizione visiva, orientamento o suono. Pur non riguardando direttamente le immagini, ha implicazioni sul modo in cui le immagini trasmettono il significato. Se la posizione o la forma di un’immagine sono l’unico modo per comprenderne lo scopo (ad esempio, “clicca sul grande pulsante circolare a sinistra”), allora un’alternativa testuale (o il testo circostante) deve chiarirlo.
Rilevanza/Test:
Esamineremo le immagini, in particolare le icone o le immagini funzionali, per garantire che il loro significato non sia trasmesso esclusivamente dal loro aspetto visivo o dalla loro posizione. Se un’istruzione fa riferimento a un’immagine in base alla sua forma o posizione, verificheremo che sia fornito un testo adeguato per identificarne in modo indipendente lo scopo. Questo problema viene in genere risolto tramite un testo alternativo efficace o il contesto testuale circostante.
Ambiente di prova #
Questo test richiede una combinazione di ispezione visiva, ispezione del codice tramite strumenti per sviluppatori e verifica tramite screen reader su vari dispositivi.
Desktop #
- Sistemi operativi: Windows (ultime due versioni), macOS (ultime due versioni).
- Browser: ultime versioni stabili di Chrome, Firefox, Edge, Safari (con strumenti per sviluppatori per l’ispezione di HTML, CSS e alberi di accessibilità).
- Metodi di input:
- Mouse standard (per l’ispezione visiva)
- Tastiera (per la navigazione degli elementi negli strumenti di sviluppo).
- Tecnologie assistive: Lettore di schermo (ad esempio NVDA, JAWS su Windows; VoiceOver su macOS) per ascoltare come viene pronunciato il testo alternativo dell’immagine e per identificare se le immagini di testo vengono percepite come tali.
Cellulari e tablet #
- Sistemi operativi: iOS (ultime due versioni), Android (ultime due versioni).
- Browser: browser predefiniti (Safari su iOS, Chrome su Android)
- Metodi di input:
- touchscreen (per ispezione visiva e interazione).
- Tecnologie assistive: lettori di schermo integrati (VoiceOver su iOS, TalkBack su Android) per verificare gli annunci di testo alternativo.
- Strumenti per sviluppatori: funzionalità di debug remoto (ad esempio, Chrome DevTools per Android, Safari Web Inspector per iOS) per l’ispezione dell’HTML sui dispositivi mobili.
- Orientamento: modalità verticale e orizzontale (per valutare la scala delle immagini di testo e il comportamento del testo alternativo con layout reattivi).
Preparazione al test #
Prima di iniziare il test manuale, assicurarsi di aver completato i seguenti passaggi:
- Identifica tutte le immagini e i contenuti non testuali:
Elenca sistematicamente ogni istanza di immagini (<img>, immagini di sfondo CSS, icone SVG, contenuto <canvas>) e altri contenuti non testuali sulla piattaforma. - Identificare potenziali immagini di testo:
Effettua una scansione visiva preliminare di tutte le pagine per individuare qualsiasi testo che sembri parte di un’immagine, anziché testo HTML vero e proprio. Questo potrebbe includere titoli, pulsanti con testo incorporato nella grafica o banner promozionali. - Comprendere lo scopo dell’immagine:
Per ogni immagine identificata, determinane lo scopo e il contesto:- È puramente decorativo (ad esempio, un motivo di sfondo)?
- È informativo (ad esempio, un grafico, una fotografia, un’illustrazione che spiega un concetto)?
- È funzionale (ad esempio, un’icona che funge da pulsante, un’icona di collegamento)?
- Si tratta di un’immagine di testo (ad esempio, un banner con uno slogan, un pulsante con del testo al suo interno)?
- Si tratta di un’immagine complessa (ad esempio, un’infografica, un diagramma)?
- Familiarizzare con i criteri WCAG:
Rileggere e assimilare i requisiti specifici delle WCAG 1.1.1, 1.4.5, 1.4.9 e 1.3.3, prestando particolare attenzione alla natura più rigorosa delle eccezioni della 1.4.9 rispetto alla 1.4.5. - Configurare gli screen reader:
Assicurati che il software di lettura dello schermo sia installato e configurato correttamente sia sui dispositivi desktop che su quelli mobili. Familiarizza con i comandi di base per navigare tra le immagini e ascoltare il testo alternativo. - Prepararsi all’ispezione del codice:
Assicurati di avere familiarità con l’apertura e l’utilizzo degli strumenti di sviluppo del browser per ispezionare gli attributi degli elementi (alt, ruolo, aria-label), le proprietà CSS (per le immagini di sfondo) e l’albero di accessibilità.
Processo di test passo dopo passo #
Eseguire i seguenti passaggi per ogni immagine o elemento di contenuto non testuale identificato, sia su desktop che su dispositivi mobili/tablet. Documentare meticolosamente le osservazioni.
PASSO 1 – Procedura generale per le alternative al testo dell’immagine (WCAG 1.1.1) #
Ispeziona gli elementi <img>: #
- Utilizzando gli strumenti per sviluppatori, seleziona ciascun elemento <img> sulla pagina.
- Caso di prova:
verificare che sia presente un attributo alt. - Caso di prova:
se l’immagine è informativa (trasmette un significato, ad esempio una foto di un prodotto, un grafico, un’illustrazione pertinente):- Il testo alternativo descrive accuratamente il contenuto e lo scopo dell’immagine?
- Il testo alternativo è conciso ma sufficientemente descrittivo?
- Il testo alternativo è privo di ridondanza (ad esempio, non inizia con “Immagine di…” o “Foto di…”)?
- Evita di trasmettere solo caratteristiche sensoriali senza contesto (considerazione WCAG 1.3.3)?
- Caso di prova:
se l’immagine è funzionale (un’icona che funge da pulsante o collegamento, ad esempio un’icona di ricerca, un’icona di carrello della spesa):- Il testo alternativo descrive l’azione o la destinazione dell’icona, anziché solo il suo aspetto visivo (ad esempio, alt=”Cerca” invece di alt=”Lente di ingrandimento” per un pulsante di ricerca)?
- Se all’icona è associato del testo visibile, il testo alternativo è significativo senza essere ridondante?
- Caso di prova:
se l’immagine è decorativa (non ha alcuno scopo funzionale e non aggiunge alcuna informazione, ad esempio un bordo puramente stilistico, un motivo di sfondo):- L’attributo alt è impostato su alt=”” (una stringa nulla o vuota)? Questo lo nasconde correttamente agli screen reader.
- Assicurati che non si tratti di un’immagine di sfondo con contenuti importanti, poiché il testo alternativo non può essere applicato alle immagini di sfondo CSS.
- Caso di prova (immagini complesse – grafici, diagrammi):
- Il testo alternativo fornisce un breve riassunto dell’immagine?
- Esiste una descrizione più lunga disponibile altrove (ad esempio, un testo collegato, una <figcaption> o aria-describedby che punta a un blocco di testo dettagliato) che spiega tutte le informazioni essenziali trasmesse dall’immagine?
Ispeziona immagini non <img> (sfondi CSS, SVG, Canvas): #
- Per le immagini implementate tramite la proprietà CSS background-image:
- Caso di prova:
se l’immagine di sfondo è informativa o funzionale, è disponibile un’alternativa testuale equivalente altrove (ad esempio, aria-label sull’elemento contenitore, testo nascosto visivamente o testo circostante)? - Caso di prova:
se è puramente decorativo, assicurati che non trasmetta informazioni essenziali solo visivamente (WCAG 1.3.3).
- Caso di prova:
- Per le immagini SVG:
- Caso di prova:
hanno un elemento <title> e/o <desc> oppure hanno un’etichetta aria o un’etichetta aria? - Caso di prova:
l’alternativa testuale fornisce una descrizione equivalente?
- Caso di prova:
- Per i contenuti <canvas> (ad esempio, grafici interattivi, aree di disegno):
- Caso di prova:
è disponibile un’alternativa programmatica (ad esempio, un riepilogo testuale, una tabella dati) per gli screen reader o altre tecnologie assistive? Viene utilizzato un aria-label o un aria-describedby sull’elemento canvas?
- Caso di prova:
Verifica dello screen reader (tutti i contenuti non testuali): #
- Attiva uno screen reader.
- Navigare nella pagina utilizzando i comandi di navigazione standard (ad esempio, Tab, tasti freccia, elenco intestazioni, elenco elementi).
- Caso di prova:
quando lo screen reader incontra ogni immagine o contenuto non testuale, annuncia il testo alternativo corretto e significativo (o un’alternativa testuale equivalente)? - Caso di prova:
salta le immagini decorative (quelle con alt=””)? - Caso di prova:
per le immagini complesse, indica che è disponibile una descrizione più lunga (se applicabile)?
PASSO 2 – Procedura generale per evitare immagini di testo (WCAG 1.4.5 AA e 1.4.9 AAA) #
Scansione visiva per immagini di testo: #
- Caso di prova (touchscreen):
- Esaminare attentamente l’intera pagina, prestando particolare attenzione ai titoli, alle etichette, al testo dei pulsanti e a qualsiasi altro contenuto testuale.
- Caso di prova (ruolo – WCAG 4.1.2):
- identificare eventuali casi in cui il testo appare visualizzato come un’immagine (ad esempio, testo sfocato quando ingrandito, testo non selezionabile, testo con una dimensione pixel fissa indipendentemente dallo zoom).
Ispezione del codice per immagini di testo: #
- Per eventuali immagini sospette contenenti testo, utilizzare gli strumenti per sviluppatori per ispezionare l’elemento.
- Caso di prova:
il testo è contenuto in un tag <img> in cui il testo fa parte del file immagine stesso? - Caso di prova:
il testo viene visualizzato utilizzando immagini di sfondo CSS anziché elementi di testo HTML effettivi?
Valutare le eccezioni “essenziali” (WCAG 1.4.5 AA): #
- Per ogni caso in cui si scopre che il testo è un’immagine, valutare innanzitutto in base a 1.4.5 (AA):
- Caso di prova:
è un logo o un marchio? (Eccezione valida per 1.4.5). - Caso di prova:
fa parte di uno screenshot o di una fotografia in cui il testo non può essere ragionevolmente separato? (Eccezione valida per 1.4.5). - Caso di prova:
il testo deve avere uno stile visivo molto specifico che non può essere ottenuto solo con CSS, E viene fornito un meccanismo alternativo per consentire agli utenti di personalizzarne l’aspetto (ad esempio, una versione solo testo)? (Questa potrebbe essere una valida eccezione per 1.4.5, ma è attentamente esaminata). - Caso di prova:
si tratta di testo decorativo privo di significato (meno comune per questo criterio, solitamente gestito da 1.1.1)?
- Caso di prova:
Valutare la regola “Nessuna eccezione” (WCAG 1.4.9 AAA): #
- Ora, per le stesse istanze di immagini di testo, applicare rigorosamente i criteri 1.4.9 (AAA):
- Caso di prova:
l’immagine del testo è puramente decorativa (ovvero ha alt=”” e non trasmette alcuna informazione)? (Supera la norma 1.4.9). - Caso di prova:
il testo fa parte di una fotografia o di un altro contenuto visivo in cui il testo non è l’elemento principale (ad esempio, il testo su un cartello stradale in una foto)? (Supera la sezione 1.4.9). - Caso di prova:
l’immagine del testo è un logo o un marchio? (Supera la sezione 1.4.9). - Caso di prova:
se l’immagine del testo non rientra tra quelle sopra elencate (ad esempio, un’intestazione stilizzata, un testo di pulsante o un testo di banner che altrimenti potrebbe essere testo HTML), non soddisfa i requisiti WCAG 1.4.9 (AAA), anche se potrebbe superare la 1.4.5 (AA) a causa di una giustificazione “essenziale”. Il testo vero e proprio è sempre preferibile per tutti i componenti dell’interfaccia, le intestazioni e il corpo del testo a livello AAA.
- Caso di prova:
Funzionalità con ridimensionamento/zoom del testo: #
- Caso di test (desktop):
aumentare il livello di zoom del browser (ad esempio, 200%). Le immagini di testo diventano pixelate o sfocate, mentre il testo reale rimane nitido e si ridimensiona correttamente? - Caso di prova (dispositivo mobile/tablet):
utilizzare il pinch-to-zoom. Le immagini di testo diventano illeggibili o pixelate, mentre il testo reale rimane chiaro?
Preferenze utente (contrasto elevato, stili personalizzati): #
- Caso di prova (desktop):
se un utente applica un tema ad alto contrasto o un foglio di stile personalizzato, il testo incorporato nelle immagini rimane visibile e leggibile oppure perde contrasto? (Il testo reale si adatta automaticamente).
Identificazione dei problemi #
Durante il processo di test, identificare e documentare eventuali deviazioni dal comportamento previsto in base alle WCAG 1.1.1, 1.4.5, 1.4.9 e 1.3.3. Esempi di problemi comuni includono:
- Attributo alt mancante (errore WCAG 1.1.1):
un elemento <img> è completamente privo di un attributo alt. - Alt vuoto su immagine informativa (errore WCAG 1.1.1):
un’immagine informativa ha alt=””, rendendola inaccessibile agli screen reader. - Testo alternativo non accurato (errore WCAG 1.1.1):
il testo alternativo descrive l’immagine in modo errato o ambiguo. - Testo alternativo ridondante (errore WCAG 1.1.1):
il testo alternativo ripete informazioni già presenti nel testo adiacente o implica “immagine di” (ad esempio, alt=”Immagine del pulsante blu” quando il testo circostante è “Pulsante blu”). - Testo alternativo insufficiente per immagini complesse (errore WCAG 1.1.1):
un’immagine complessa (grafico, infografica) ha un breve testo alternativo ma non fornisce un’alternativa più dettagliata. - Immagine di sfondo CSS informativa senza alternativa (errore WCAG 1.1.1):
un’immagine di sfondo trasmette informazioni essenziali ma non ha un testo alternativo programmatico. - Testo come immagine (errore WCAG 1.4.5 AA):
i titoli, il testo dei pulsanti o il contenuto del corpo vengono visualizzati come immagini anziché come testo HTML reale e non come logo, parte di uno screenshot o testo altrimenti personalizzabile. - Testo come immagine (WCAG 1.4.9 AAA Failure):
qualsiasi testo funzionale o informativo viene reso come immagine, anche se potrebbe superare la norma 1.4.5 (AA) a causa di una giustificazione “essenziale”. In AAA sono consentite solo immagini puramente decorative di testo, loghi o testo che faccia parte di una fotografia. - Le immagini di testo risultano pixelate/sfocate quando vengono ingrandite (correlate a WCAG 1.4.5/1.4.9):
il testo nelle immagini perde qualità quando viene ingrandito, a differenza del testo HTML vero e proprio. - Affidamento sensoriale (fallimento WCAG 1.3.3):
le istruzioni si basano esclusivamente sulle caratteristiche visive di un’immagine (ad esempio, “clicca sul quadrato verde” senza altro testo distintivo). - Immagini non utilizzabili con testo (correlate a WCAG 1.4.5/1.4.9):
il testo che fa parte di un’immagine non può essere selezionato, copiato o tradotto dalle funzioni standard del browser. - Silenzio/lettura errata del lettore di schermo:
il lettore di schermo ignora un’immagine importante a causa dell’assenza di testo alternativo, oppure legge un testo alternativo senza senso, oppure non riesce a identificare correttamente il testo all’interno di un’immagine.
Classificazione di gravità #
Assegnare un livello di gravità a ciascun problema identificato in base al suo impatto sull’accessibilità dell’utente:
- Critico (WCAG 1.1.1 A):
impedisce agli utenti con disabilità visive di accedere a contenuti o funzionalità essenziali (ad esempio, manca il tasto alt per un’icona di un pulsante fondamentale, un’intera infografica essenziale non ha un’alternativa testuale). Violazione diretta del Livello A. - Alto (WCAG 1.4.5 AA):
ostacola significativamente la comprensione o l’uso del contenuto o introduce notevoli ostacoli all’usabilità (ad esempio, immagini di testo frequenti per elementi critici dell’interfaccia, testo alternativo impreciso su immagini importanti che causa confusione). Violazione diretta del Livello AA. - Medio (WCAG 1.4.9 AAA):
casi in cui il testo è presentato come un’immagine, non soddisfacendo il più rigoroso criterio AAA 1.4.9, anche se potrebbe superare il criterio 1.4.5 (AA) grazie a una giustificazione “essenziale”. Pur non essendo un fallimento diretto di Livello A/AA, rappresenta un ostacolo significativo per gli utenti che necessitano di una personalizzazione ottimale del testo. - Basso:
piccoli problemi estetici o leggere inefficienze (ad esempio, testo alternativo leggermente ridondante che non ostacola la comprensione, immagini decorative molto piccole con testo alternativo mancante).
