L'utilizzo del testo alternativo è uno delle pietre miliari dell'accessibilità web e, nonostante tutto, la mancanza del testo alternativo, o il suo uso incoerente, è uno dei problemi che maggiormente si riscontra durante i controlli di accessibilità.
Cos'è e a cosa serve il testo alternativo?
La struttura di una pagina WEB può essere genericamente descritta come un insieme di testi, di oggetti che permettono la navigazione sulla pagina e tra le pagine e di contenuti non testuali come ad esempio immagini, filmati, ....
Alcuni utenti accedono al web utilizzando delle tecnologie particolari che trasformano i contenuti testuali delle pagine in un'altra forma sensoriale idonea ad essere fruita dalle proprie capacità. Ad esempio le persone non vedenti utilizzano gli screen reader che "leggono" il contenuto della pagina web, fornendone una versione vocale, altre utilizzano la Barra Braille che fornisce invece un'alternativa tattile, ….
Tutte queste tecnologie utilizzano il testo alternativo per fornire le informazioni associate ai contenuti non testuali presenti nella pagina web
Non associando alcun testo alternativo agli oggetti non testuali, questi sono di fatto inesistenti per questi utenti, anzi in qualche caso l'assenza del testo alternativo è anche di disturbo per gli utilizzatori di queste tecnologie.
Esistono varie modalità per implementare i contenuti non testuali, e di relativi testi alternativi, su un sito web .
Alcune sono gestite dai designer e dagli sviluppatori in fase di progettazione del sito, altre sono oggetto delle attività degli autori dei contenuti siano essi articoli oppure post sui social network. Proprio agli autori di contenuti voglio fornire alcune semplici regole utili per la corretta gestione di una risorsa così importante.
L'attributo ALT
Dal punto di vista tecnico l'inserimento, ad esempio, di un'immagine in una pagina web si effettua predisponendo un TAG (una clausola) <img> nel programma HTML (Hyper Text Markup Language - il linguaggio di pubblicazione delle pagine WEB) a cui sono associati una serie di attributi che ne descrivono le caratteristiche come ad esempio la posizione, le dimensioni, il testo alternativo,....
Se non sei un progammatore probabilmente non avrai mai scritto e probabilmente mai visto una clausola <img> di questo tipo:
Infatti, i moderni strumenti di predisposizione di contenuti, siano essi CSM (Content Management System), Social Network, ma anche alcuni ambienti di programmazione, tendono a nascondere agli utenti la complessità dei costrutti di base dei linguaggi di programmazione.
Devi comunque sapere che qualsiasi sia strumento o l'ambiente con cui stai inserendo un'immagine sul WEB questa verrà sempre tradotta nel linguaggio HTML in una clausola <img> completata con i propri attributi.
A questo è necessario chiedersi come o dove si puo inserire il testo alternativo?
Come accennavo gli strumenti e gli ambienti web utilizzati per predispore pagine WEB sono tantissimi e non è possibile dare indicazioni generiche valide per tutti.
Prossimamente pubblicherò una serie di articoli con le indicazioni specifiche per l'inserimento del testo alternativo per una serie di ambienti specifici (Facebook, Twitter, ...)
In rete è comunque semplice reperire le modalità operative di inserimento del testo alternativo dello strumento o ambiente utilizzato.
Hai bisogno di maggiori informazioni? Vuoi una consulenza?
Ma come compilare correttamente il testo alternativo?
Supponendo che sei riusciuto a trovare dove inserire il testo altenativo ci dobbiamo chiedere come deve essere compilato.
Ecco alcune regole che devi ricordare:
-
Ogni contenuto non testuale deve avere un testo alternativo associato
Al fini dell'accessibilità, quindi, la clausola <img> deve avere obbligatoriamente contenere l'attributo ALT
Se escludiamo pochissimi casi specifici, non c'è alcuna eccezione a questa regola. Non importa per cosa l'immagine è usata, cosa mostra, o quanto sia grande o piccola.
L'attributo ALT deve essere sempre presente. -
Il contesto è tutto
In altre parole il testo alternativo non deve descrivere l'immagine, ma deve "integrare" il contesto (la pagina, l'articolo, il post, ...) con il contenuto che l'immagine vuole fornire.
La stessa immagine può avere testi altenativi estremamente diversi in funzione di dove viene utilizzata.
L'autore del contenuto, conoscendo il contesto, dovrebbe essere in grado di definirlo correttamente.
Un'immagine di Portofino visto dal mare, ad esempio, potrebbe essere descritta come:- "Tipico borgo ligure incastonato tra mare e monti" se si sta genericamente parlando della Costa Ligure
- "Portofino visto dal mare" se si parla di Portofino
- oppure riferirsi alla particolarità delle costruzioni e dei colori delle case se il testo è focalizzato sugli aspetti "architettonici" del luogo
A nessuno penso verrebbe in mente di inserire come testo alternativo ALT="Un'uccellino blu".
- Il testo alternativo dipende dalla tipologia dell'immagine
Si riconoscono tre tipologie di immagini:
- Le immagini attive
Un'immagine è attiva quando selezionandola si esegue un'azione o una specifica funzionalità.
Potrebbe trattarsi di un collegamento ad un'altra pagina del sito (ad esempio nel passaggio da una pagina blog ad un singolo articolo) o di immagini/pulsanti che permettono di inserire il prodotto nel carrello, di iscriversi ad una newsletter, di inviare una richiestra attraverso un modulo di contatto,...
In questi casi, generalmente gestiti dai progettisti, il testo alternativo è semplice da definire. Deve descrivere l'azione che viene eseguita. - Le immagini che forniscono contenuto
Se l'immagine non è attiva allora è necessario verificare se fornisce o meno informazioni al contesto.
A volte può essere semplice ma più spesso dovrai decidere tu, in qualità di autore, qual'è l'informazione (il contenuto) l'immagine vuole fornire.
Una tecnica potrebbe essere quella di chiedersi se l'assenza dell'immagine, e dell'eventuale testo alternativo associato, cambia o rende incompleto il contesto.
Se il risultato è incompleto allora siamo nel caso di un'immagine che necessita di un adeguato testo alternativo.
Se l'utente non perde contenuto allora l'immagine potrebbe considerarsi puramente decorativa.
Ad esempio l'immagine di due Capi di Stato che che sottoscrivono un trattato probabilmente necessita di un adeguato testo alternativo (con l'indicazione dei personaggi, della data, del luogo, ...), un'immagine generica di due mani che si stringono per simboleggiare la stipula di un'accordo sara sicuramente da considerare decorativa. - Le immagini puramente decorative
Le immagini devorative non avrebbero bisogno di un testo alternativo, ma essendo l'attributo ALT obbligatorio, è necessario anche queste immagini associare il testo alternativo che deve essere valorizzato con la stringa vuota (null) ALT="".
Le tecnologie assistive ignorano le informazioni associate alle immagini con l'attributo ALT nullo.
- Le immagini attive
Un'ultima informazione importante!!
I testi alternativi sono analizzati dai programmi utilizzati dai tools di indicizzazione.
E' evidente che testi alternativi corretti ed associati ad immagini coerenti con il contesto non possono che migliorare la SEO del sito.
Per ulteriori approfondimenti: https://webaim.org/techniques/alttext/ (link esterno in Inglese)
Iscriviti alla nostra newsletter su LinkedIn