Contenuto non testuale

Cosa richiede

I contenuti non testuali — immagini, icone, grafici, animazioni, CAPTCHA, elementi audio incorporati, esperienze sensoriali — devono essere accompagnati da un’alternativa testuale che trasmetta le stesse informazioni o la stessa funzione. L’alternativa testuale è ciò che la tecnologia assistiva presenterà all’utente quando l’elemento originale non può essere percepito.

Le quattro categorie che WCAG individua:

• Le immagini informative richiedono un testo alternativo che descriva l’informazione che trasmettono.
• Le immagini funzionali (link, pulsanti) richiedono un testo alternativo che descriva l’azione, non l’aspetto visivo.
• Le immagini decorative ricevono un attributo alt vuoto (alt="") in modo che gli screen reader le saltino.
• Le immagini complesse (grafici, diagrammi) richiedono un testo alternativo breve più una descrizione più estesa nel testo vicino, in un blocco <details> o tramite aria-describedby.

Come soddisfarlo

• Aggiungere un attributo alt a ogni <img>. Vuoto se decorativo, descrittivo se informativo.
• Fornire un nome accessibile a ogni <button> con sola icona tramite aria-label, testo visibile o un elemento SVG <title>.
• Per grafici e infografiche, scrivere un testo alternativo di riepilogo in una frase e inserire i dati in una tabella accessibile immediatamente prima o dopo la figura.
• Per i CAPTCHA, fornire almeno un’alternativa non visiva (CAPTCHA audio, verifica via e-mail, limitazione della frequenza lato server).
• Per l’audio che trasmette informazioni (un’anteprima podcast, un suono dell’interfaccia), fornire un equivalente testuale.

Errori comuni

• alt="immagine" o alt="foto di una persona" — descrive il mezzo, non il contenuto.
• Pulsanti con sola icona privi di nome accessibile (<button><svg /></button>). Gli screen reader annunciano «pulsante» senza ulteriori dettagli.
• Immagini decorative prive di alt="" — gli screen reader ricorrono alla lettura del nome del file.
• Tag <img> di grafici con il titolo del grafico come alt e i dati sottostanti assenti dalla pagina.
• Immagini di sfondo CSS che trasmettono significato, senza etichetta testuale nel markup.

Perché è importante

Questo è il fondamento dell’accessibilità per gli screen reader. Un sito che non soddisfa il criterio 1.1.1 è inutilizzabile per gli utenti non vedenti — ogni immagine diventa un vicolo cieco. È anche il problema più frequentemente rilevato da axe e Lighthouse, poiché gli strumenti automatici possono segnalare gli attributi alt mancanti ma non possono valutare se il testo alternativo presente sia significativo.