alt attributo

Uno sguardo all’uso corretto dell’attributo alt

Tempo di lettura: 3 minuti

Ormai, la maggior parte del settore del web design conosce l’ importanza dell’accessibilità. Ne parliamo incessantemente e imploriamo i nostri clienti di prenderlo sul serio. Non si può negare l’impatto che ha sul web e coloro che lo usano.

Ma a volte i punti più fini si perdono nello shuffle. Ad esempio, spesso sentiamo delle grida dalla cima della montagna virtuale di “Usa testo alternativo sulle tue immagini!”. Questo è un consiglio buono e ben intenzionato. Tuttavia, è anche un po ‘vago.

Sebbene sia utile sapere che l’attributo alt può essere utile in termini di accessibilità, ciò di cui abbiamo veramente bisogno è il contesto. Qual è il modo giusto di usarli? Ci sono momenti in cui non dovremmo usarli?

Oggi, tenteremo di chiarire il corretto utilizzo di questo attributo vitale. Iniziamo!

Il ruolo mutevole delle immagini

Il modo in cui i web designer utilizzano le immagini è cambiato un po ‘nel corso degli anni. Nei primi giorni del web, le immagini è stato utilizzato in modi che probabilmente non pensare di fare ora. Li mettiamo a lavorare come titoli di pagina, sistemi di navigazione e (sussulto) anche intere pagine piene di contenuti.

Per gli utenti che fanno affidamento su screen reader o altre tecnologie assistive, ciò potrebbe rendere inutilizzabile una pagina. Nei casi in cui vaste porzioni di contenuto venivano visualizzate come immagine, anche un semplice attributo alt non sarebbe stato di grande aiuto.

Per fortuna, sono state apprese alcune lezioni importanti. L’esplosione della tipografia web ha portato via qualsiasi motivo legato al design per abusare delle immagini come in passato. E poiché l’ accessibilità è diventata all’avanguardia, molti ora si rendono conto che le immagini hanno ruoli specifici da svolgere.

L’importanza del testo alternativo

È ovvio che un uso più intelligente delle immagini dovrebbe consentire una migliore accessibilità. Sebbene ciò sia vero fino a un certo punto, abbiamo ancora la possibilità di rovinare le cose. Qui è dove può entrare testo alternativo e salvare la giornata, se usato correttamente.

Ricordare di utilizzare l’attributo alt da solo non fornisce necessariamente molti vantaggi agli utenti. Ad esempio, supponiamo che abbiamo un tag di intestazione che recita “Chi siamo”  in una foto di gruppo dei dipendenti dell’azienda. Se dovessimo semplicemente impostare l’attributo alt su alt=“Chi siamo”, diventa ridondante quando letto da tecnologie assistive. Pertanto, in realtà non dice agli utenti cosa sia l’immagine o cosa significhi.

Quindi, cosa dovremmo usare invece? Molto dipende dal contenuto della pagina stessa e dal ruolo dell’immagine all’interno. Ciò, tuttavia, fa sorgere un altro potenziale punto di confusione.

Per fortuna, il W3C ha una guida utile che suddivide le immagini in diversi concetti:

  • Informativo
  • Decorativo
  • Funzionale
  • Immagini di testo
  • Complesso
  • Gruppi di immagini
  • Mappe immagine

La guida offre brevi spiegazioni di ogni concetto, insieme ad esempi che possono aiutarti a determinare il percorso più pertinente per fornire testo alternativo. Se non sei ancora sicuro, dai un’occhiata all’albero decisionale alternativo per ulteriori indicazioni.

Non sempre necessario?

Una delle curiosità più interessanti nella guida del W3C è che non tutte le immagini necessitano di attributi alt.

Ma aspetta un secondo. Che dire di tutte quelle avvisi per usare alt ogni volta? Non stiamo ignorando l’accessibilità?

Si scopre che, nel caso di immagini decorative (che non aggiungono informazioni alla pagina), l’attributo alt diventa superfluo. In queste situazioni, fornire un testo alternativo può “aggiungere disordine sonoro all’output dello screen reader”. Quindi, proprio come la mancanza di spazi bianchi può portare a un layout di pagina visiva ingombra, questo pezzetto di testo in più può fare lo stesso per coloro che fanno affidamento su questi strumenti.

Ciò che rende questo difficile per i web designer è che strumenti di accessibilità automatizzati come le immagini di flag WAVE senza testo alternativo mentre leggono una pagina. Anche Google potrebbe inviarti fastidiose e-mail lamentando che una determinata immagine non è accessibile nella loro vista. Questo ci obbliga a compilare l’attributo, solo per superare un test automatizzato.

Pertanto, sta a noi prendere questi risultati con un granello di sale e, se necessario, spiegare la situazione ai clienti. Accade così che un attributo alt vuoto possa essere utile in circostanze specifiche.

Si tratta di aiutare gli utenti

Facendo un po ‘di ricerca su come usare l’attributo alt, sono arrivato a capire quante volte ho adottato un approccio sbagliato. Sospetto che molti designer abbiano fatto lo stesso.

In una certa misura, è comprensibile. Questo attributo, pur essendo in circolazione da molto tempo, non è esattamente eccitante. È utilitaristico e non sempre nella parte anteriore delle nostre menti.

Tuttavia, per molti utenti, è di vitale importanza. Considera che non tutti possono facilmente vedere le immagini che integriamo in una pagina. Per queste persone, l’attributo alt è lì per aiutare a dare contesto al contenuto che stanno consumando.

È qualcosa da tenere a mente mentre costruiamo una rete sempre più complessa.