WCAG 1.1.1: Contenuto non testuale

Cosa Significa Questa Regola

Il Criterio di Successo WCAG 1.1.1 Contenuti non testuali è un requisito di Livello A sotto il principio Percettibile. Stabilisce che tutti i contenuti non testuali presentati all’utente devono avere un’alternativa testuale che svolga uno scopo equivalente. “Contenuti non testuali” è definito in modo ampio: comprende immagini raster (JPEG, PNG, GIF, WebP), grafica vettoriale (SVG), pulsanti e campi di input basati su immagini, image map, elementi canvas, clip audio, video, animazioni, CAPTCHA e abbellimenti decorativi.

Un’alternativa testuale può assumere diverse forme a seconda del tipo di elemento: un attributo alt su un elemento <img>, un aria-label o aria-labelledby su un SVG o su un elemento con ruolo, un elemento title all’interno di un <object>, oppure un <figcaption> associato a una figura. Il requisito fondamentale è che il testo alternativo comunichi la stessa informazione o funzione del contenuto visivo stesso — non è semplicemente un nome di file o un segnaposto generico.

Il criterio definisce diversi casi specifici che determinano come deve essere un’adeguata alternativa testuale:

• Controlli e input: Se il contenuto non testuale è un controllo o accetta input dell’utente (come un pulsante immagine o un’immagine usata come link), l’alternativa testuale deve descriverne lo scopo o la funzione, non solo l’aspetto.
• Media temporizzati: Contenuti solo audio o solo video usati come presentazioni autonome richiedono almeno un’etichetta descrittiva che li identifichi; trascrizioni complete e sottotitoli sono trattati da criteri successivi (1.2.x).
• Test ed esperienze sensoriali: Se il contenuto è un test o un esercizio che non può essere presentato in forma testuale senza vanificarne lo scopo (come un rompicapo visivo), l’alternativa testuale deve solo identificare e descrivere il contenuto non testuale.
• CAPTCHA: Le alternative testuali devono descrivere lo scopo del CAPTCHA e deve essere fornita una forma alternativa di CAPTCHA che utilizzi una diversa modalità sensoriale.
• Decorazioni, formattazione e contenuti invisibili: Se un’immagine è puramente decorativa, usata per spaziatura o non è presentata agli utenti, dovrebbe essere implementata in modo che possa essere ignorata dalla tecnologia assistiva — tipicamente tramite un attributo alt="" vuoto o role="presentation".

Si ottiene un superamento quando ogni elemento non testuale significativo espone un’alternativa testuale programmabile che ne trasmette in modo equivalente lo scopo, oppure è esplicitamente contrassegnato come decorativo in modo che le tecnologie assistive possano ignorarlo. Si ha un fallimento quando un’immagine non ha affatto l’attributo alt, quando il valore di alt è il nome del file (ad es. alt="img_header_logo_v2.png"), quando un SVG usato come contenuto significativo non ha né un elemento <title> né un’etichetta accessibile, o quando un’immagine decorativa ha erroneamente un testo alternativo descrittivo che aggiunge rumore per gli utenti di screen reader.

Perché È Importante

Secondo l’Organizzazione Mondiale della Sanità, circa 2,2 miliardi di persone nel mondo hanno qualche forma di disabilità visiva o cecità. Gli utenti di screen reader — che si affidano a sintesi vocale o display Braille a rinfresco per fruire dei contenuti digitali — dipendono interamente dalle alternative testuali per comprendere immagini, icone, grafici e controlli grafici. Senza testo alternativo accurato, una pagina prodotto su un sito di e-commerce si riduce a un elenco di prezzi senza contesto visivo; la navigazione di una banca piena di loghi diventa una fila di pulsanti senza etichetta; il diagramma di un sistema di autovalutazione dei sintomi di un ospedale è invisibile all’utente che cerca di autovalutarsi.

Consideriamo uno scenario concreto: un utente cieco visita una piattaforma di e-commerce turca per acquistare una giacca. Il carosello del prodotto contiene sei immagini che mostrano diverse angolazioni e varianti di colore della giacca. Se nessuna di queste immagini ha un testo alternativo significativo, lo screen reader dell’utente annuncia solo “immagine, immagine, immagine” — sei volte. Non può determinare quale variante è blu navy rispetto al nero, non può capire quale immagine mostra la tasca posteriore e può decidere di abbandonare completamente l’acquisto. Un collega vedente con lo stesso link del prodotto completa l’acquisto in meno di due minuti. Questo divario è sia un fallimento di accessibilità sia una perdita di business.

Oltre alla cecità, questo criterio avvantaggia anche gli utenti con disabilità cognitive che si affidano a strumenti di sintesi vocale per supportare la lettura, gli utenti con disabilità motorie che navigano tramite tastiera e voce e hanno bisogno di etichette chiare sui controlli interattivi, e gli utenti con banda limitata per i quali le immagini potrebbero non caricarsi — in questi casi, il testo alternativo funge da fallback funzionale. Inoltre, un testo alternativo ben scritto migliora l’indicizzazione da parte dei motori di ricerca perché i crawler trattano gli attributi alt delle immagini come segnali testuali rilevanti, supportando direttamente i risultati SEO.

Regole Axe-core Correlate

Il motore di accessibilità axe-core applica la WCAG 1.1.1 tramite sette distinte regole automatizzate. Comprendere cosa verifica ciascuna regola — e dove si fermano i suoi limiti — è essenziale per una strategia di test completa.

• image-alt: Verifica che ogni elemento <img> abbia un attributo alt (che può essere vuoto per le immagini decorative) o un nome accessibile fornito tramite aria-label, aria-labelledby o title. Segnala le immagini che non hanno affatto l’attributo alt, poiché il browser espone quindi il percorso del file come nome accessibile.
• input-image-alt: Verifica che gli elementi <input type="image"> abbiano un attributo alt non vuoto. Gli input immagine agiscono come pulsanti di invio e devono trasmettere la loro funzione, non solo il loro aspetto visivo. Un alt mancante o vuoto su un input immagine rende il pulsante di fatto inutilizzabile con uno screen reader.
• area-alt: Verifica che ogni elemento <area> all’interno di una image map abbia un’alternativa testuale non vuota tramite alt, aria-label o aria-labelledby. Le image map sono un pattern legacy ancora usato in alcune applicazioni enterprise e portali del settore pubblico, e ogni hotspot deve descrivere in modo indipendente la propria destinazione di link o funzione.
• object-alt: Verifica che gli elementi <object> abbiano un nome accessibile. L’elemento <object> è storicamente usato per incorporare contenuti Flash, PDF o altri media; senza un’etichetta, gli screen reader non hanno modo di identificare il contenuto incorporato.
• svg-img-alt: Verifica che gli elementi <svg> inline con role="img" abbiano un nome accessibile, tipicamente fornito da un elemento figlio <title> (con un corrispondente aria-labelledby) o da un attributo aria-label sulla radice SVG. Le interfacce moderne usano ampiamente gli SVG per icone e illustrazioni; questa regola intercetta gli SVG senza etichetta che hanno significato.
• role-img-alt: Verifica che qualsiasi elemento con role="img" — che può essere applicato a elementi non SVG come <div> o <span> usati come contenitori di immagini — abbia un nome accessibile. Questo pattern è comune nei sistemi di icone personalizzati e nelle implementazioni con immagini di sfondo CSS in cui non viene usato alcun elemento immagine nativo.
• image-redundant-alt: Segnala situazioni in cui il testo alternativo di un’immagine duplica il testo visibile adiacente, tipicamente quando un’immagine appare all’interno di un’ancora insieme a un’etichetta testuale. Pur non essendo un errore grave, il testo alternativo ridondante fa sì che gli screen reader annuncino la stessa informazione due volte, peggiorando l’esperienza di ascolto. Questa regola richiede un giudizio umano per essere risolta correttamente, perché solo una persona può determinare se la duplicazione è realmente ridondante o intenzionalmente aggiuntiva.

È importante notare che gli strumenti automatizzati, incluso axe-core, non possono valutare la qualità del testo alternativo — solo la sua presenza e struttura di base. Una regola può risultare superata per un’immagine con alt="photo" o alt="decorative border" anche se nessuna delle due è significativa. È quindi sempre necessaria una revisione manuale insieme alla scansione automatizzata per confermare che il testo alternativo descriva accuratamente il contenuto e lo scopo di ogni immagine.

Come Testare

1. Scansione automatizzata con axe DevTools o Lighthouse: Installa l’estensione del browser axe DevTools (disponibile per Chrome e Firefox). Apri la pagina da testare, attiva l’estensione ed esegui un’analisi dell’intera pagina. Filtra i risultati per gli ID delle regole elencate sopra: image-alt, input-image-alt, area-alt, object-alt, svg-img-alt, role-img-alt e image-redundant-alt. Per ogni elemento segnalato, lo strumento evidenzia il nodo problematico nel DOM e spiega la violazione. Lighthouse (integrato in Chrome DevTools sotto l’audit Accessibility) evidenzia anche le violazioni image-alt con dettagli a livello di elemento. Registra tutte le violazioni con i relativi selettori di elemento e contesto circostante per il passaggio agli sviluppatori.
2. Ispezione manuale del DOM: Apri il pannello Elements degli strumenti di sviluppo del browser e cerca tutti i tag <img>, <input type="image">, <area>, <object> e <svg>. Per ciascuno, verifica che sia presente un attributo alt appropriato o un’etichetta ARIA e che il suo valore sia significativo nel contesto. Presta particolare attenzione alle immagini caricate dinamicamente tramite framework JavaScript come React o Vue, che potrebbero non apparire in uno snapshot HTML statico.
3. Test con screen reader usando NVDA e Firefox: Avvia NVDA (gratuito, Windows) e apri la pagina in Firefox. Naviga usando il tasto G per saltare tra le immagini. NVDA annuncia il nome accessibile di ogni immagine; ascolta annunci di percorsi di file, “image” o annunci vuoti — tutti indicatori di un fallimento. Per i pulsanti immagine e i link, usa il tasto Tab per raggiungere ogni controllo e verifica che l’etichetta pronunciata trasmetta l’azione svolta dal controllo.
4. Test con screen reader usando VoiceOver e Safari (macOS/iOS): Abilita VoiceOver (Command+F5 su macOS). Usa VO+Freccia destra per spostarti tra i contenuti elemento per elemento, oppure apri l’Item Chooser (VO+U) e seleziona Images dal rotor per vedere un elenco di tutte le immagini e delle loro etichette in una volta sola. Su iOS, scorri verso destra sulla pagina e ascolta come viene annunciata ogni immagine.
5. Test con screen reader usando JAWS e Chrome: In JAWS, premi G per navigare per grafica. Ogni immagine dovrebbe produrre una descrizione chiara e significativa. Usa il visualizzatore virtuale di JAWS (Insert+F1) per vedere il nome accessibile calcolato e il ruolo di qualsiasi elemento in questione.
6. Verifica del trattamento delle immagini decorative: Per le immagini che ritieni decorative, conferma che abbiano alt="" e nessun attributo title o etichetta ARIA che le renderebbe nuovamente esposte. Con uno screen reader, naviga fino a quegli elementi e conferma che vengano completamente saltati nell’ordine di lettura.

Come Correggere

Immagine informativa senza alt — Non corretto

<!-- L'immagine trasmette informazioni sul prodotto ma non ha l'attributo alt -->
<img src='jacket-navy-front.jpg'>

Immagine informativa senza alt — Corretto

<!-- Il testo alt descrive il contenuto visivo e il suo scopo nel contesto -->
<img src='jacket-navy-front.jpg' alt='Giacca di lana blu navy, vista frontale, con bottoni doppiopetto'>

Immagine decorativa etichettata in modo errato — Non corretto

<!-- L'immagine decorativa di separatore espone un alt descrittivo che aggiunge rumore -->
<img src='divider-ornament.png' alt='Divisore ornamentale decorativo con motivo a volute'>

Immagine decorativa correttamente nascosta alla tecnologia assistiva — Corretto

<!-- L'alt vuoto indica agli screen reader di saltare completamente questa immagine -->
<img src='divider-ornament.png' alt=''>

Icona SVG senza nome accessibile — Non corretto

<!-- L'SVG usato come icona significativa ha role="img" ma nessuna etichetta -->
<svg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
  <path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z'/>
</svg>

Icona SVG con nome accessibile — Corretto

<!-- L'elemento title fornisce il nome accessibile; aria-labelledby lo associa -->
<svg role='img' aria-labelledby='icon-account-title' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
  <title id='icon-account-title'>Il mio account</title>
  <path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z'/>
</svg>

Pulsante input immagine senza alt — Non corretto

<!-- Il pulsante di invio immagine non ha alt; lo screen reader annuncia solo "image" -->
<input type='image' src='btn-search.png'>

Pulsante input immagine con alt descrittivo — Corretto

<!-- L'alt descrive la funzione del pulsante, non il suo aspetto -->
<input type='image' src='btn-search.png' alt='Cerca'>

Errori Comuni

• Usare il nome del file come testo alternativo: Scrivere alt="hero_banner_v3_final.jpg" espone il percorso del file agli screen reader senza alcun contenuto significativo. Scrivi sempre un testo alternativo che descriva cosa mostra l’immagine o a quale scopo serve.
• Impostare il testo alternativo su "image" o "photo": Valori generici come alt="image" o alt="photo" superano i controlli automatizzati perché non sono vuoti, ma non trasmettono alcuna informazione. Gli screen reader annunciano già il ruolo dell’elemento come “image”, quindi ripetere quella parola fa solo perdere tempo all’utente.
• Dimenticare l’alt sulle immagini iniettate dinamicamente: Le immagini inserite nel DOM tramite JavaScript (ad es. un carosello di prodotti costruito con React) possono essere prive di attributi alt nell’HTML iniziale. Assicurati che il componente JavaScript renderizzi l’attributo alt nello stesso momento in cui renderizza il src.
• Applicare role="presentation" a immagini significative: Usare role="presentation" o role="none" su immagini che contengono contenuto le rimuove completamente dall’albero di accessibilità. Questo è appropriato solo per immagini puramente decorative; usarlo su immagini informative causa una perdita totale di contenuto per gli utenti di screen reader.
• Omettere l’attributo alt sulle immagini di sfondo CSS che usano role="img": Quando un <div> è stilizzato con un’immagine di sfondo e gli viene assegnato role="img", gli sviluppatori a volte dimenticano di aggiungere aria-label. Senza un’etichetta, l’elemento è nell’albero di accessibilità come immagine senza nome — altrettanto grave quanto un alt mancante.
• Scrivere testo alternativo che descrive l’aspetto anziché il significato: Per un grafico, scrivere alt="Un grafico a barre blu" descrive lo stile visivo ma non i dati. Il testo alternativo dovrebbe trasmettere l’intuizione chiave, ad esempio alt="Grafico a barre che mostra una crescita dei ricavi del 18% anno su anno nel Q3".
• Testo alternativo duplicato su più immagini in un set: Quando una scheda prodotto mostra sei miniature dello stesso articolo, assegnare a tutte lo stesso testo alternativo (ad es. alt="Scarpa da corsa") non permette di distinguerle. Ogni immagine in un set dovrebbe descrivere il proprio contenuto o angolazione unici.
• Mancanza di alt sugli elementi <area> nelle image map: Gli sviluppatori che usano le image map spesso aggiungono il testo alternativo all’<img> padre ma dimenticano che ogni hotspot <area> richiede anche il proprio attributo alt che descriva quella specifica destinazione di link.
• Usare il testo del tooltip come sostituto del testo alternativo: L’attributo title produce un tooltip visivo ed è letto da alcuni screen reader, ma il supporto del browser è incoerente e non è esposto in tutti i contesti di accessibilità. Dovrebbe integrare, non sostituire, un corretto attributo alt.
• Non testare le icone SVG fornite tramite sprite sheet o elementi <use>: Gli sprite SVG referenziati tramite <use href="#icon-id"> potrebbero non esporre il loro <title> interno a tutti gli screen reader a causa dei confini dello shadow DOM. Testa sempre le icone basate su sprite con screen reader reali e integra con aria-label sull’elemento <svg> esterno quando necessario.

Relazione con le Normative di Accessibilità della Turchia

La Circolare Presidenziale 2025/10 della Turchia, pubblicata nella Gazzetta Ufficiale n. 32933 il 21 giugno 2025, stabilisce requisiti obbligatori di accessibilità digitale per un’ampia gamma di soggetti pubblici e privati che operano in Turchia. La circolare fa riferimento alla WCAG 2.2 come standard tecnico, rendendo tutti i criteri di successo di Livello A — incluso WCAG 1.1.1 Contenuti non testuali — obblighi giuridicamente vincolanti piuttosto che raccomandazioni di best practice.

I soggetti interessati includono: tutte le istituzioni pubbliche e gli enti governativi, banche e istituzioni finanziarie, ospedali e fornitori di servizi sanitari, società di telecomunicazioni con 200,000 o più abbonati, piattaforme di e-commerce, agenzie di viaggio, società di trasporto privato e scuole private autorizzate dal Ministero dell’Istruzione Nazionale (MoNE). Per le istituzioni pubbliche, la conformità deve essere raggiunta entro un anno dalla data di entrata in vigore della circolare. Ai soggetti del settore privato è concesso un periodo di due anni per l’implementazione.

La WCAG 1.1.1 è particolarmente rilevante nel panorama digitale turco perché molti settori ad alto traffico coperti dalla circolare — tra cui marketplace di e-commerce, portali bancari e piattaforme di servizi governativi — dipendono fortemente dalle immagini. Le fotografie dei prodotti sui siti di e-commerce, gli annunci pubblici basati su infografiche sui portali governativi, le dashboard finanziarie ricche di grafici nelle applicazioni bancarie e le interfacce basate su moduli nei portali pazienti degli ospedali rientrano pienamente nell’ambito di questo criterio.

La mancata conformità ai requisiti di Livello A previsti dalla circolare espone i soggetti interessati a controlli regolatori e potenziali sanzioni. Poiché la WCAG 1.1.1 è uno dei criteri più frequentemente violati e più facilmente testabili — rilevabile sia tramite strumenti automatizzati sia tramite semplici walkthrough con screen reader — è probabile che rivesta un ruolo di primo piano negli audit di conformità. Le organizzazioni soggette alla circolare dovrebbero considerare la correzione di tutte le violazioni relative al testo alternativo delle immagini come un’attività immediata e ad alta priorità, non come un miglioramento rinviabile. L’implementazione di un SDK di overlay di accessibilità come Accsible può aiutare a individuare e correggere parzialmente in tempo reale le alternative testuali mancanti, ma una correzione completa a livello di codice sorgente rimane il percorso più robusto e duraturo verso la conformità.