Accessibilità dell'iPhone: come sfruttare al meglio le impostazioni di accessibilità

Il testo alternativo (alt text) descrive ciò che è visibile in un'immagine. Viene utilizzato per rendere il tuo sito web accessibile a tutti, comprese le persone non vedenti o ipovedenti.

I lettori di schermo leggono ad alta voce il testo alternativo, consentendo agli utenti di comprendere il significato di un'immagine. Ciò significa che il testo alternativo contribuisce direttamente all'accessibilità digitale e aiuta il tuo sito web a rispettare le linee guida WCAG.

Il testo alternativo non solo migliora l'accessibilità, ma rafforza anche la SEO. Descrizioni chiare aiutano i motori di ricerca a capire di cosa tratta un'immagine, supportando sia l'usabilità che le prestazioni del sito web.

Insomma

• Il testo alternativo rende i siti web accessibili a tutti

• Descrizioni chiare aiutano i motori di ricerca a comprendere meglio i tuoi contenuti.

• Il testo alternativo è essenziale per rispettare le linee guida sull'accessibilità digitale.

Come scrivere un buon testo alternativo (alt text)

Il testo alternativo (alt text) si crea aggiungendo una breve descrizione all'elemento che si desidera chiarire. Questo può essere fatto nel codice o tramite il CMS (Content Management System). Un CMS consente di gestire i contenuti del sito web senza richiedere competenze tecniche avanzate.

In HTML, la descrizione si aggiunge utilizzando l'attributo alt all'interno del tag img. Questo indica agli utenti, e alle tecnologie assistive, cosa mostra l'immagine. Ad esempio:

<img src="flower.jpg" alt="tulipino giallo in un vaso" title="tulipino giallo in un vaso>

Oltre all'attributo alt, puoi anche utilizzare l' attributo titolo Questo fornisce informazioni aggiuntive quando gli utenti passano il mouse sopra un elemento. Alcuni screen reader leggono il titolo anziché il testo alternativo. Utilizzando la stessa descrizione in entrambi, si garantisce che nessuna informazione vada persa.

Per pulsanti e moduli, utilizzare attributi ARIA ad esempio etichetta aria O aria-labelledby . Questi elementi descrivono la funzione di un elemento, anche in assenza di indizi visivi.

Attributo

Scopo

Esempio

Tutto

Descrizione di un'immagine

<img alt=" logo Eye-Able">

titolo

Ulteriori spiegazioni

<img title="Logo Eye-Able">

etichetta aria

descrive uomini o forma

<button aria-label="Invia modulo">

Diversi tipi di immagini

Immagini informative

Le immagini informative contengono contenuti essenziali. Aiutano gli utenti di screen reader a comprendere ciò che viene mostrato visivamente.

Un esempio comune è un logo. Il testo alternativo dovrebbe descrivere brevemente cosa raffigura il logo e a quale organizzazione appartiene.

<img src="logo.jpg" alt=" Logo Eye-Able che mostra un occhio stilizzato titolo=" Logo Eye-Able che mostra un occhio stilizzato .”>

Evita descrizioni vaghe come "bella immagine" o "foto". Concentrati solo sulle informazioni pertinenti.

Un lettore di schermo legge ad alta voce questo testo, in modo che chi non può vedere l'immagine sappia comunque che si tratta del logo Eye-Able. Ciò rende il sito web accessibile e garantisce la conformità alle linee guida WCAG.

Esempi:

Esempio negativo

Buon esempio

“Immagine di un grafico”

Grafico a barre che mostra i dati di vendita per il 2025.

"Logo"

Logo “Eye-Able con un occhio stilizzato”

"Foto"

"Ritratto di un dipendente al lavoro su un computer portatile"

Grafici e diagrammi

I grafici mostrano dati e relazioni. Il testo alternativo dovrebbe spiegare cosa mostra il grafico e perché è importante.

• Per i grafici semplici, includete i dati principali direttamente nel testo alternativo.

• Per i grafici complessi, descrivetene lo scopo e rimandate gli utenti al testo adiacente per maggiori dettagli.

Se il diagramma è complesso, descrivi semplicemente lo scopo e rimanda al testo sottostante per maggiori dettagli. In questo modo si evita che il testo alternativo diventi troppo lungo.

Esempio:
<img src="election-chart.jpg" alt="Grafico a barre che mostra i risultati delle elezioni. Ulteriori spiegazioni seguono nel testo.">

Assicurati sempre che i dati chiave siano disponibili anche in formato testuale, in modo che tutti possano accedere alle informazioni.

Immagini funzionali

Le immagini funzionali attivano azioni, come pulsanti, icone o loghi collegati. Il testo alternativo dovrebbe descrivere cosa fa l'immagine , non è quello che sembra.

Esempio:

<a href="https://eye-able.com/"> <img src="logo.jpg" alt="Vai alla homepage di Eye-Able" title="Vai alla homepage di Eye-Able"</a>

Il testo alternativo indica che l'immagine rimanda alla home page. L'aspetto del logo non è importante, ma la sua funzione sì.

Buoni esempi:

• "Avvia la ricerca"

• “Invia modulo”

• “pagina successiva”

Evitate descrizioni visive come "freccia" o "lente d'ingrandimento".

Immagini funzionali comuni:

Tipo di immagine

Funzione

Esempio di testo alternativo

Icona di ricerca

Avvia una ricerca

"Avvia la ricerca"

Icona Salva

Salva il documento

"Salva"

Freccia a destra

Vai alla pagina successiva

"Pagina successiva"

Icona della casa

Vai alla pagina iniziale

"Pagina iniziale"

Questo approccio garantisce che tutti, compresi gli utenti di screen reader, comprendano cosa accade quando cliccano sull'immagine.

Immagini decorative

Le immagini decorative non aggiungono alcun contenuto. Sono presenti solo per creare atmosfera o per motivi estetici. In questo caso, lascia vuoto l'attributo alt:

<img src="background-pattern.jpg" alt="">

I lettori di schermo ignoreranno queste immagini, evitando interruzioni non necessarie.

Utilizzate le immagini decorative con criterio. Se una foto o un'icona comunica qualcosa sul contenuto, non dovrebbe essere solo decorativa. In tal caso, è necessario aggiungere una descrizione.

Lista di controllo per le immagini decorative:

• L'immagine aggiunge significato? ?
  Sì → aggiungi testo alternativo.
  No → lascia vuoto l'attributo alt.

• È puramente decorativo?

  Sì → usa alt="" .

• Fa parte di un pulsante o di un link?

  No → allora può essere decorativo.

Una chiara distinzione tra immagini decorative e informative contribuisce a mantenere il sito web accessibile.

Utilizzando il testo alternativo in questo modo, rendi il tuo sito web più comprensibile e facile da usare per tutti.

Come scrivere un testo alternativo efficace

Un buon testo alternativo aiuta le persone non vedenti a comprendere il contenuto delle immagini. Puoi scrivere un buon testo alternativo descrivendo in modo breve e chiaro ciò che è visibile nell'immagine.

Buone prassi:

• Sii conciso e descrittivo

• Evita frasi come "immagine di" o "foto di"

• Concentrati su ciò che è rilevante nel contesto

• Mantieni il testo alternativo tra 80–120 caratteri

• Utilizzare ortografia e grammatica corrette

Panoramica delle linee guida

Aspetto

Linee guida

Esempio

Apertura

Evitare “l’immagine di”

"Auto blu su una strada di campagna"

Lunghezza

80–120 caratteri

“Due studenti che lavorano al computer in una biblioteca”

Lingua

Chiaro e corretto

Vietata l'uso di abbreviazioni ed emoji.

Messa a fuoco

Solo contesto rilevante

Descrivi ciò che conta

Il testo alternativo (alt text) supporta anche la SEO. I motori di ricerca lo utilizzano per comprendere le immagini, migliorandone la visibilità nei risultati di ricerca per immagini, senza ricorrere al keyword stuffing.

Chiedi un feedback a qualcuno che usa un lettore di schermo o che non ha familiarità con l'immagine. La loro risposta mostrerà se la tua descrizione è abbastanza chiara. Se capiscono cosa mostra l'immagine, saprai che il tuo testo alternativo funziona bene. Questo renderà il tuo sito web più accessibile e facile da usare per tutti.

Cosa succede se manca il testo alternativo?

Senza testo alternativo, I lettori di schermo annunciano i nomi dei file come img123.jpg. Gli utenti perdono informazioni cruciali e il tuo sito web potrebbe violare le normative WCAG e quelle sull'accessibilità.

Conseguenze della mancanza del testo alternativo:

• Gli utenti non comprendono il contenuto

• Il tuo sito non soddisfa i requisiti WCAG 2.2

• Le organizzazioni rischiano multe in base alle leggi sull'accessibilità

Il testo alternativo garantisce pari accesso e conformità alla Legge europea sull'accessibilità (EAA).

Legislazione sull'accessibilità digitale

Le leggi sull'accessibilità digitale impongono alle organizzazioni di rendere siti web e app utilizzabili da tutti, comprese le persone con disabilità.

• Le linee guida WCAG definiscono gli standard di accessibilità

• Da 28 giugno 2025 , IL Legge europea sull'accessibilità (EAA) si applica a molti prodotti e servizi digitali

• L'applicazione delle norme è supervisionata da un gruppo eterogeneo di agenzie o istituzioni (governative).

Principali obblighi:

• Conforme alla norma EN 301 549

• Pubblica una dichiarazione di accessibilità

• Fornire alternative testuali per immagini e contenuti multimediali

• Monitorare e mantenere l'accessibilità in modo continuo

Linee guida e testo alternativo di WCAG

WCAG 2.2 chiarisce come deve essere utilizzato il testo alternativo:

• Ogni immagine significativa necessita di un testo alternativo descrittivo

• Le immagini decorative utilizzano alt=""

• Il contesto determina ciò che è rilevante

• Eseguire regolarmente test utilizzando strumenti di accessibilità.

Punti chiave di WCAG 2.2:

Linee guida

Spiegazione

Testi alternativi richiesti

Ad ogni immagine significativa viene assegnato un testo alternativo descrittivo.

Immagini decorative

Utilizzare testo alternativo vuoto ( alt="" ) se l'immagine non aggiunge alcuna informazione.

Il contesto è importante

Descrivi cosa è rilevante per il contenuto della pagina.

Metti alla prova i tuoi contenuti

Utilizza uno strumento di verifica WCAG per accertarti che i tuoi testi alternativi soddisfino i requisiti.

Domande frequenti

1. Come faccio ad aggiungere il testo alternativo alle immagini?

Aggiungi l'attributo alt in HTML o tramite il tuo CMS con una descrizione breve e chiara.

2. Come faccio a rendere il testo alternativo chiaro a tutti? ?

Utilizza un linguaggio semplice, evita dettagli superflui e descrivi ciò che altrimenti gli utenti non noterebbero.

Testo alternativo valido:

• Descrive ciò che una persona si perde se l'immagine non è visibile.

• Tiene conto delle linee guida WCAG per l'accessibilità digitale.

• Rientra nel significato della pagina.

3. Quali errori dovrei evitare?

Molte persone lasciano vuoto il campo del testo alternativo o scrivono frasi troppo lunghe. Questo rende il sito web meno accessibile.

Evita questi errori:

1. Lasciando vuoto il testo alternativo

2. Scrivere descrizioni generiche

3. Inserimento di parole chiave

4. Aggiungere testo alternativo alle immagini puramente decorative

4. In che modo il testo alternativo migliora la SEO del mio sito web?

Il testo alternativo (alt text) aiuta i motori di ricerca a capire il contenuto di un'immagine. Questo può migliorare il posizionamento della tua immagine su Google Immagini.

Testo alternativo ben scritto:

• Migliora la reperibilità del tuo sito web.

• Fornisce contesto ai motori di ricerca.

• Aumenta la probabilità che gli utenti visitino il tuo sito.

5. La mancanza del testo alternativo influisce sull'accessibilità?

Sì, senza il testo alternativo, i lettori di schermo non possono descrivere il contenuto dell'immagine. Le persone con disabilità visive, di conseguenza, perdono informazioni importanti.

Il testo alternativo (alt text) garantisce che tutti comprendano lo stesso contenuto, indipendentemente dal fatto che possano vedere o meno. Questo rende il tuo sito web più accessibile e facile da usare.

6. Come posso testare il mio testo alternativo?

Utilizza lettori di schermo come NVDA o VoiceOver, oppure verifica il tuo sito con la piattaforma di accessibilità Eye-Able per identificare immediatamente i testi alternativi mancanti o poco chiari.

Puoi anche utilizzare strumenti di verifica dell'accessibilità, come la nostra piattaforma Eye-Able. Ti mostriamo in modo semplice e veloce se i tuoi testi alternativi sono mancanti o poco chiari.