Quando un sito web viene progettato con un approccio consapevolmente rivolto all’accessibilità viene offerta la possibilità a tutti gli utenti, comprese le persone con disabilità, di navigare con facilità tra i contenuti di un sito e di interagire con esso, ad esempio effettuando una prenotazione online o un semplice acquisto.
Se hai seguito i nostri aggiornamenti saprai già che lo scorso mese abbiamo lanciato una nuova rubrica interamente dedicata all’accessibilità dei siti web (puoi leggere l’articolo di introduzione della rubrica qui).
Rendere un sito accessibile è semplice e conveniente, per questo motivo abbiamo pensato di approfondire alcuni degli aspetti più importanti per progettare un sito web accessibile a tutti.
Scopriamo subito qual è il primo, ma non per questo più importante degli altri, aspetto essenziale: il testo alternativo per le immagini
Il testo alternativo (ovvero il tag “alt” o “alternative text”) è uno strumento che abbinato a una immagine consente di comprenderne il contenuto e più in generale cosa si sta guardando.
Molto spesso accade che ci si dimentica di inserire il testo alternativo nonostante sia assolutamente fondamentale:
- Il testo alternativo infatti aiuta le persone che hanno difficoltà a percepire i contenuti visivi, permette ai dispositivi di assistenza, come per esempio gli screen reader e la sintesi vocale, di leggere il testo presentando il contenuto visivo o di convertirlo in braille.
- Il testo alternativo aiuta le persone che hanno difficoltà a comprendere il significato di fotografie, disegni e altri formati visivi (per esempio semplici linee, elementi grafici, animazioni ecc).
- Le persone sorde o che hanno difficoltà uditive e che quindi hanno problemi a comprendere informazioni sonore possono leggere il testo alternativo.
- Le persone sordocieche possono leggere il testo in braille.
Questi sono solo alcuni dei benefici che derivano dall’utilizzo del testo alternativo nel proprio sito web.
Non bisogna dimenticare infatti che inserendo il testo alternativo è possibile intercettare le ricerche per immagini che vengono fatte dagli utenti, migliorando quindi il posizionamento sui motori di ricerca e la visibilità del proprio sito.
Come funziona il testo alternativo?
Per “leggere” un’immagine viene utilizzato uno screen reader. Gli utenti ciechi e ipovedenti possono servirsi di computer e smartphone e navigare sul web grazie ad appositi screen reader (lettori di schermo) e sintesi vocali. Questi strumenti rendono disponibile in forma uditiva ogni contenuto testuale, che può essere così ascoltato e fruito dai non vedenti.
Uno screen reader non è in grado di comprendere il contenuto di un’immagine, ma semplicemente legge e pronuncia il testo alternativo assegnato così chi non vede può comprenderne il significato.
Inoltre per svolgere il suo compito in modo corretto il testo alternativo deve contenere una descrizione sintetica e chiara dell’immagine.
Un sito web accessibile deve quindi necessariamente attribuire ai propri contenuti non testuali come video, immagini e file audio i relativi testi alternativi per garantire a tutti gli utenti di poter fruire dei contenuti presenti anche in forma testuale.
Basta quindi semplicemente scrivere una descrizione e il gioco è fatto?
Non esattamente. Quando si scrivono i testi alternativi ci sono alcune regole che vanno seguite. Vediamo quali sono:
Immagini generiche
Prendiamo per esempio un sito web di un hotel che voglia inserire in una sua pagina l’immagine di una delle sue camere matrimoniali con vista mare fotografata di giorno. Il testo alternativo (“alt”) corretto in questo caso potrebbe essere “camera matrimoniale vista mare di giorno”, mentre è da evitare un campo “alt” vuoto o con una dicitura come “img_hotel2.jpg” che renderebbe impossibile comprendere cosa si sta guardando.
Immagini ”spaziatrici”
Le immagini spaziatrici vengono spesso utilizzate in molti siti web ed hanno lo scopo di creare spazio all’interno della pagina.
Le immagini spaziatrici dovrebbero sempre avere assegnato un testo alternativo nullo del tipo alt=””. In questo modo la maggior parte degli screen reader ignorerà completamente l’immagine e non ne annuncerà nemmeno la presenza.
Gli errori più comuni sono non utilizzare il testo alternativo nullo oppure scrivere alt=”immagine spaziatrice”. Nel primo caso lo screen reader registra la presenza di un’immagine e verrà pronunciata semplicemente la parola “immagine”, nel secondo caso invece finirebbe col leggere “immagine, immagine spaziatrice” non aiutando quindi l’utente finale.
In alcuni casi invece semplicemente viene omesso l’attributo ALT per queste immagini. In questo caso la maggior parte degli screen reader leggerà il nome del file contenente l’immagine (per esempio foto01.jpg).
Navigazione e testo all’interno di immagini
Nei menu di navigazione progettati con elementi grafici il testo si trova all’interno delle immagini. In casi come questo il testo alternativo dovrebbe essere utilizzato solo per ripetere la voce del menù e non ampliare il testo presente nell’immagine.
Per esempio se l’elemento di un menu è “chi siamo”, il testo ALT dovrebbe anch’esso dire “chi siamo”. In nessun caso l’alt dovrebbe dire “Siamo un’azienda leader nel…”.
Le stesse regole valgono quando si ha un testo all’interno di un’immagine. Il testo ALT dovrebbe semplicemente ripetere, parola per parola, il testo contenuto dall’immagine.
Immagini decorative
Per immagini decorative s’intendono tutti gli elementi grafici e visuali che non devono necessariamente essere “visti” dall’utente e che quindi se venissero percepiti dallo screen reader andrebbero ad aumentare il “rumore” durante la navigazione. Anch’esse dovrebbero avere un testo alternative nullo, o alt=””.
Alcuni sviluppatori di siti web affermano che le immagini di un sito web creano un’identità di marchio e nascondendone l’esistenza agli utenti di screen reader si priva questa categoria di utenti dell’”esperienza” associata al marchio.
Tuttavia gli esperti di accessibilità tendono generalmente a privilegiare l’eliminazione di testo alternativo in caso di immagini decorative.
Conclusioni
Non è sempre semplice individuare il corretto testo alternativo per le immagini di un sito web: la regola fondamentale è ricordarsi che il testo alternativo deve servire per veicolare lo stesso messaggio dell’immagine e non per descriverla.
Ci auguriamo che questo primo punto essenziale nella progettazione di un sito web accessibile che abbiamo condiviso con te oggi ti sia piaciuto.
Ti aspettiamo con la prossima uscita della rubrica! Continua a seguirci 😉
Il tuo sito web è accessibile a tutti? Scoprilo con l’accessibility check-up di Yeah! (inserire link)