Alternative di testo per le immagini

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

Alice Boxhall
Alice Boxhall
Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

Le immagini sono un componente importante della maggior parte delle pagine web e, naturalmente, rappresentano un punto di criticità per gli utenti con disabilità visive. 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

gatto

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'alternativa di testo utile 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">

Lo screen reader può quindi annunciare una descrizione concisa dell'immagine (visibile nella barra nera di VoiceOver) e l'utente può scegliere se passare all'articolo.

un&#39;immagine con un testo alternativo migliorato

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, quando viene acceduta da un bot di scansione del web o quando 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 testo alternativo utilizzabile, deve trasmettere lo stesso concetto dell'immagine, nello stesso contesto.

Prendi in considerazione un'immagine del 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">

Potrebbe essere allettante fornire un'alternativa di testo più semplice come "home" o "pagina principale", ma questo è un servizio scadente sia per gli utenti ipovedenti sia per quelli vedenti.

Tuttavia, immagina un utente di screen reader che vuole individuare 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 che utilizza uno screen reader, ovvero 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, puoi semplicemente 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="".