Alternative di testo per le immagini

Utilizzare l'attributo alt per fornire alternative di testo alle immagini

Alice Boxhall

Dave Gash

Meggin Kearney

Le immagini sono una componente importante della maggior parte delle pagine web e sono, ovviamente, un punto di riferimento particolare per gli utenti ipovedenti. Dobbiamo considerare il ruolo di un'immagine in una pagina per capire che tipo di testo alternativo dovrebbe avere. Dai un'occhiata a questa immagine.

<article>
    <h2>Study shows 9 out of 10 cats quietly judging their owners as they sleep</h2>
    <img src="imgs/160204193356-01-cat-500.jpg">
</article>

Uno studio mostra che 9 gatti su 10 giudicano tranquillamente il padrone durante il sonno

Nella pagina abbiamo l'immagine di un gatto, che illustra un articolo sul noto comportamento dei giudizi dei gatti. Uno screen reader annuncerà questa immagine utilizzando il suo nome letterale, "/160204193356-01-cat-500.jpg". È esatto, ma per niente utile.

Puoi utilizzare l'attributo alt per fornire un'utile alternativa di testo a questa immagine, ad esempio "Un gatto che fissa minacciosamente nello spazio".

<img src="/160204193356-01-cat-500.jpg" alt="A cat staring menacingly off into space">

Successivamente, lo screen reader può annunciare una descrizione concisa dell'immagine ( presente nella barra nera di VoiceOver) e l'utente può scegliere se passare all'articolo.

Un paio di commenti su alt:

• alt consente di specificare una stringa semplice da utilizzare ogni volta che l'immagine non è disponibile, ad esempio quando non si carica l'immagine, se l'immagine non viene caricata da un bot di scansione del web o se viene rilevata da uno screen reader.
• alt è diverso da title o da qualsiasi tipo di didascalia, in quanto viene utilizzato solo se l'immagine non è disponibile.

Scrivere un testo alternativo utile è un po' un'arte. Affinché una stringa sia un'alternativa di testo utilizzabile, deve trasmettere lo stesso concetto dell'immagine, nello stesso contesto.

Considera l'idea di collegare un'immagine del logo nel masthead di una pagina come quelle mostrate sopra. Possiamo descrivere l'immagine in modo abbastanza preciso come "Logo The Funion".

<img class="logo" src="logo.jpg" alt="The Funion logo">

Potresti avere la tentazione di dargli un'alternativa di testo più semplice a "home" o "pagina principale", ma ciò rappresenta un disservizio sia per gli utenti ipovedenti che per gli utenti vedenti.

Immagina, però, un utente di screen reader che desidera individuare il logo masthead nella pagina; attribuire il valore alternativo "home" crea in realtà un'esperienza più confusa. Un utente vedente affronta la stessa sfida, ovvero capire cosa fa clic sul logo del sito, come utente di screen reader.

D'altra parte, non è sempre utile descrivere un'immagine. Ad esempio, prendi in considerazione l'immagine di una lente d'ingrandimento all'interno di un pulsante di ricerca con il testo "Cerca". Se non fosse presente il testo, all'immagine assegneresti sicuramente il valore alternativo "ricerca". Tuttavia, poiché abbiamo il testo visibile, lo screen reader rileva e legge ad alta voce la parola "ricerca". Di conseguenza, un valore alt identico nell'immagine è ridondante.

Tuttavia, sappiamo che se lasciamo fuori il testo alt, probabilmente ascolteremo il nome del file immagine, il che è inutile e potenzialmente poco chiaro. In questo caso, puoi semplicemente utilizzare un attributo alt vuoto e lo screen reader salterà del tutto l'immagine.

<img src="magnifying-glass.jpg" alt="">

Riassumendo, tutte le immagini devono avere un attributo alt, ma non tutte hanno del testo. Le immagini importanti devono avere un testo alternativo descrittivo che descriva in modo conciso l'immagine, mentre le immagini decorative devono avere attributi alt vuoti, ovvero alt="".