Creare risorse accessibili: Immagini e icone

Rendere accessibile il tuo sito web significa garantire che tutti i visitatori, compresi quelli con disabilità visive, possano fruire appieno dei tuoi contenuti. Questo articolo spiega come utilizzare le immagini e le icone in modo da rispettare gli standard di accessibilità, aggiungendo testi alternativi, utilizzando immagini significative ed evitando le insidie più comuni. Segui queste best practice per creare risorse inclusive e user-friendly per il tuo sito web o la tua landing page.

Requisiti

• Tutte le immagini e le icone contenenti informazioni devono avere un testo alternativo che descriva il contenuto dell’immagine o dell’icona
  • Il testo alternativo non deve includere parole che identifichino l’elemento come un grafico o un’immagine (ad esempio, evita frasi come “grafico di”, “immagine di”, ecc.) perché gli screen reader dichiarano già il ruolo (ad esempio, dicendo “grafico” e poi leggendo il testo alternativo).
  • Evita l’uso di tutte le lettere maiuscole, poiché alcuni lettori di schermo leggono ogni lettera
  • Richiesto per:
    • immagini che utilizzano <img
    • immagini attive
    • immagini di input del modulo
    • SVG con <img>
    • SVG con <SVG>
    • Tela HTML5
    • font di icone
• Le descrizioni del testo alternativo devono fornire un contesto all’utente e devono essere significative
  • L’immagine/icona dei link deve descrivere la destinazione del link.
  • L’immagine/icona dei link a pulsanti/controlli deve descrivere lo scopo del pulsante o del controllo e/o l’azione risultante.
  • La lunghezza del testo alternativo per le immagini/icone informative deve essere concisa (non più di 250 caratteri)
• Il testo alternativo deve essere localizzato in base alla lingua utilizzata nella pagina.
• Non usare il testo nelle immagini se puoi usare un testo vero e proprio, a meno che non sia essenziale (come un logo) o che non siano necessari font, dimensioni, colori o sfondi specifici.
• Se è necessario utilizzare un’immagine di testo, segui le linee guida per il colore e il contrasto.
• Se un’immagine di sfondo contiene informazioni utili, è necessario aggiungere il testo alt (ad esempio, tramite un normale testo visibile, aggiungendo role="image" e aria-label o con altri mezzi).
• Se c’è del testo sopra un’immagine, verifica il contrasto del testo sovrapposto con almeno 8 colori dell’immagine.
• Fornisci controlli (pulsanti di pausa, frecce) per i contenuti che si avviano automaticamente come: caroselli, cursori di immagini e video di sfondo.
• Non fare in modo che i caroselli si avviino automaticamente.
• Non utilizzare pulsanti fantasma sulle immagini (pulsanti senza sfondo o contorno).
• Nessun contenuto deve lampeggiare più di tre volte al secondo.
• Gli oggetti grafici come un’icona indipendente, un grafico o un’immagine devono avere un contrasto minimo di 3:1 tra l’oggetto e il suo sfondo.
• Le icone utilizzate in più pagine devono avere lo stesso significato e la stessa funzionalità.
• Se utilizziamo un’icona specifica per avviare un’azione (ad esempio, una freccia verso il basso per i menu a tendina o una fisarmonica/espansione), non usiamola in modo decorativo su un’altra pagina.

Eccezioni

Immagini o icone decorative o ridondanti

Quando le immagini non hanno alcuno scopo contenutistico, sono puramente decorative o duplicano informazioni già presenti in un testo, è consigliabile assegnare loro un testo alternativo nullo (vuoto)(alt="), designarle con ARIA role="presentation" o implementarle come sfondi CSS.

Immagini di sfondo decorative o ridondanti

Non assegnare un testo alternativo alle immagini di sfondo che non sono importanti e non forniscono informazioni all’utente.

Esempi

	FARE: Il testo in alt fornisce contesto e informazioni: “donna matura che lavora al laptop, indossa un abbigliamento da ufficio e sorride, in piedi su sfondo bianco”. NON: Una descrizione non è abbastanza specifica: “donna matura”.
	L’icona contiene informazioni importanti per l’utente. Testo in alt: “icona di Facebook”, “icona di Instagram”, “icona di Pinterest”.
	Nella pagina sono presenti sei descrizioni con un’icona illustrativa. Queste immagini sono immagini decorative. Lo impostiamo aggiungendo un attributo alt vuoto: <img src="filename.png" alt="">. Le tecnologie assistive, come gli screen reader, ignoreranno l’immagine. Senza l’attributo alt vuoto, uno screen reader potrebbe leggere il nome del file, il che non ha senso e confonde l’utente.
	In questo esempio, il logo ha due scopi: indicare agli utenti in quale sito si trova l’utente e fornire un collegamento alla pagina principale. FARE: Descrivi l’immagine e il suo ruolo, ad esempio utilizzando aria-label-"homepage di GetResponse".