Alternative di testo per le immagini

Utilizzo dell'attributo alt per fornire alternative di testo per le immagini

Alice Boxhall

Dave Gash

Meggin Kearney

Le immagini sono un componente importante della maggior parte delle pagine web e, ovviamente, rappresentano un particolare punto critico per gli utenti ipovedenti. Per capire quale tipo di testo alternativo deve avere un'immagine, dobbiamo considerare il suo ruolo in una pagina. 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 silenziosamente i loro proprietari mentre dormono

Nella pagina è presente l'immagine di un gatto che illustra un articolo sul ben noto comportamento giudicante dei gatti. Uno screen reader annuncerà questa immagine utilizzando il suo nome letterale, "/160204193356-01-cat-500.jpg". È preciso, ma non è affatto utile.

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

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

Dopodiché lo screen reader può annunciare una breve descrizione dell'immagine (nella barra nera 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 riesce a caricarsi, viene acceduta da un bot di scansione del web o viene rilevata da uno screen reader.
• alt è diverso da title o da qualsiasi tipo di didascalia perché 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'immagine di un logo collegata nel masthead di una pagina come quelle mostrate sopra. Possiamo descrivere l'immagine con una certa precisione come "Logo Funion".

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

Potresti avere la tentazione di usare un'alternativa di testo più semplice, ad esempio "home" o "home page", ma ciò rappresenta un problema per gli utenti ipovedenti e ipovedenti.

Tuttavia, immagina un utente di screen reader che vuole trovare il logo del masthead nella pagina. Assegnare un valore alt di "home" crea un'esperienza più confusa. Un utente vedente deve affrontare la stessa sfida di un utente con uno screen reader: capire cosa succede quando fa clic sul logo del sito.

D'altra parte, non è sempre utile descrivere un'immagine. Ad esempio, immagina un'immagine di una lente d'ingrandimento all'interno di un pulsante di ricerca con il testo "Cerca". Se il testo non fosse presente, dovresti assegnare all'immagine un valore alt "ricerca". Tuttavia, poiché abbiamo il testo visibile, lo screen reader rileverà e leggerà ad alta voce la parola "ricerca". Pertanto, un valore alt identico sull'immagine è ridondante.

Tuttavia, sappiamo che se non includiamo il testo alt, probabilmente sentiremo il nome del file immagine, che è inutile e potenzialmente fonte di confusione. In questo caso è sufficiente utilizzare un attributo alt vuoto e lo screen reader ignorerà completamente l'immagine.

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

In sintesi, tutte le immagini devono avere un attributo alt, ma non devono necessariamente avere testo. Le immagini importanti devono avere un testo alternativo descrittivo che descriva in modo conciso che cosa rappresentano, mentre le immagini decorative devono avere attributi alt vuoti, ovvero alt="".