L’attributoalt viene utilizzato per assegnare un’alternativa testuale a unimg. Il testo alternativo viene utilizzato ogni volta che l’immagine non viene renderizzata e da tecnologie assistive come i lettori di schermo. Inoltre, i motori di ricerca che offrono funzionalità di ricerca basate su immagini si basano sul testo alt per determinare il significato delle immagini., Fornire valorialt per le immagini non è davvero facoltativo, è qualcosa che dovresti assolutamente fare se sei un designer, uno sviluppatore o un webmaster. Tuttavia, utilizzare correttamente l’attributoalt è altrettanto importante quanto usarlo in primo luogo.
Linee guida per l’uso corretto del testo alternativo
Se usato correttamente, alternative di testo per elementi visivi significa che gli utenti che non possono visualizzare le immagini possono ancora fare uso di tutte le funzionalità di un sito web. Tuttavia, quando le alternative di testo non vengono utilizzate correttamente, possono creare confusione., Segui queste semplici regole per offrire ai visitatori del tuo sito web la migliore esperienza possibile.
Fornisce sempre testo alternativo
Potrebbe sembrare inutile dirlo, ma dovresti sempre aggiungere ilalt attribuito a ogni singola immagine che usi su una pagina web. Anche in alcuni casi speciali in cui non viene fornito alcun testo, l’attributo alt dovrebbe essere ancora presente e lasciato vuoto.,
Aiuta gli screen Reader a saltare le immagini estetiche
Quando uno screen reader incontra un’immagine senza l’attributoalt dirà semplicemente al visitatore del sito “immagine”. Questo lascia il visitatore chiedendo quali informazioni potrebbero mancare. Tuttavia, se l’attributo di testo alternativo è presente ma lasciato vuoto ,come questo alt="", lo screen reader capisce che l’immagine dovrebbe essere saltata completamente. Usa questa conoscenza per dire a tecnologie assistive come screen reader quali immagini dovrebbero semplicemente saltare., Se si dispone di immagini fornite esclusivamente per scopi di design o estetici, un’immagine utilizzata per il rendering di una barra orizzontale, fornire un attributo di testo alternativo vuoto in modo che le tecnologie assistive sappiano che dovrebbero ignorare completamente l’immagine.
Duplica il messaggio trasmesso dall’immagine
Quali informazioni trasmette l’immagine? Incapsulare tali informazioni in una breve dichiarazione e utilizzarle come alternativa testuale., Il punto del testo alt è quello di trasmettere lo stesso identico significato a un visitatore che non può vedere un’immagine come l’immagine stessa trasmette a un visitatore che può vederla. Nei casi in cui l’immagine fornisce informazioni testuali, è sufficiente fornire lo stesso testo del testoalt.
Indica ai visitatori dove vanno le immagini collegate
Le immagini sono spesso utilizzate come link ad altri siti web. Può essere il caso che si sta utilizzando le immagini dei pulsanti per i collegamenti, o si può semplicemente collegare un’immagine in un articolo alla fonte dell’immagine., Se stai collegando le immagini ad altri siti Web, usa il testo alternativo dell’immagine per dire agli utenti dove va il link.
Casi speciali
Seguendo le linee guida di cui sopra, fornirai alternative di testo migliori rispetto a molti siti Web comuni. Mentre queste linee guida copriranno la stragrande maggioranza delle esigenze di testo alternativi, ci sono alcuni casi speciali che si dovrebbe essere a conoscenza di.
Usa 125 caratteri o Meno
Molte tecnologie assistive elaborano il testo in blocchi di 125 caratteri. Migliora l’esperienza degli utenti di screen reader limitando il testo alternativo a 125 caratteri., Se non è possibile ridurre il testoalt a meno di 125 caratteri, fornire una descrizione estesa su una pagina separata e collegarvi. Ad esempio, se hai un’immagine di un diagramma che non può essere riassunta in meno di 125 caratteri, assegna all’immagine un breve testo alternativo come “diagramma di qualcosa di fantastico” (ma in realtà dì al visitatore quale cosa fantastica è mostrata nel diagramma)., Ci sono due modi diversi per integrare il breve testo alternativo con una descrizione estesa che fornisce molti più dettagli:
- Immediatamente sotto l’immagine, inserisci un link che dice qualcosa come La descrizione estesa del diagramma impressionante e collega a una pagina separata con una descrizione estesa.
- Immediatamente sotto o accanto all’immagine aggiungi una lettera maiuscola D e collegala alla descrizione estesa su una pagina separata. Questo collegamento è chiamato D-Link e alcuni esperti di accessibilità sostengono il suo utilizzo, ma preferiamo e raccomandiamo il metodo sopra descritto.,
Un altro modo per fornire una descrizione estesa in passato era quello di utilizzare l’attributolongdesc. Tuttavia, dovresti sapere che è stato deprecato in HTML5 e non è più un buon modo per fornire una descrizione estesa. Saltare longdesc e utilizzare uno dei due metodi sopra descritti per fornire una descrizione estesa di un’immagine complessa.
Fornisci un breve riassunto per le immagini che sono già state descritte
Ci saranno momenti in cui userai un’immagine e la descriverai nel testo del paragrafo sulla pagina., Per esempio, si potrebbe inviare una foto da un recente viaggio di pesca e includere nel testo paragrafo sulla pagina una descrizione dell’immagine che è qualcosa di simile a questo ” Ho avuto un grande momento di pesca lo scorso fine settimana e catturato il basso da 7 libbre che vedete nella foto!” In un caso come questo, è ancora importante fornire un’alternativa di testo all’immagine, ma il testo utilizzato può essere molto breve. Nel caso del nostro esempio di pesca, goodalt text potrebbe essere simile a questo:alt="weekend fishing trip".,
I punti da ricordare
L’uso corretto dell’attributoalt possono essere riassunti con quattro punti chiave:
- Utilizzare sempre l’attributo
alt, anche se lo si lascia vuoto. - Mantenere breve testo alternativo.
- Duplica le informazioni trasmesse dall’immagine.
- Indica ai visitatori dove vanno le immagini collegate.
Ora sai quanto sia importante fornire un’alternativa testuale per ogni immagine sul tuo sito web. Meglio ancora, sai come usare correttamente il testo alternativo in modo che sia il più efficace possibile.,
Lascia un commento