Attributo alt dell'immagine di sfondo CSS

Questo è uno che non ho dovuto affrontare prima. Ho bisogno di utilizzare i tag alt su tutte le immagini in un sito, comprese quelle utilizzate dall'attributo CSS background-image.

Non esiste una proprietà CSS come questa per quanto ne so, quindi qual è il modo migliore per farlo, per favore?

Le immagini di sfondo possono sicuramente presentare dati! In effetti, questo è spesso consigliato laddove la presentazione di icone visive è più compatta e facile da usare rispetto a un elenco equivalente di frasi di testo. Qualsiasi utilizzo di sprite di immagini può trarre vantaggio da questo approccio.

È abbastanza comune che le icone degli elenchi di hotel mostrino i servizi. Immagina una pagina che elenca 50 hotel e ogni hotel dispone di 10 servizi. Un CSS Sprite sarebbe perfetto per questo genere di cose: migliore esperienza utente perché è più veloce. Ma come si implementano i tag ALT per queste immagini? Sito di esempio .

La risposta è che non usano affatto alttesto, ma usano invece l' titleattributo sul div che lo contiene.

HTML

<div class="hotwire-fitness" title="Fitness Centre"></div>

CSS

.hotwire-fitness {
    float: left;
    margin-right: 5px;
    background: url(/prostyle/images/new_amenities.png) -71px 0;
    width: 21px;
    height: 21px;
}

Secondo il W3C (vedi i link sopra), l'attributo title ha lo stesso scopo dell'attributo alt

Titolo

I valori dell'attributo title possono essere resi dai programmi utente in una varietà di modi. Ad esempio, i browser visivi spesso visualizzano il titolo come un "suggerimento" (un breve messaggio che appare quando il dispositivo di puntamento si ferma su un oggetto). I programmi utente audio possono pronunciare le informazioni sul titolo in un contesto simile. Ad esempio, l'impostazione dell'attributo su un collegamento consente agli interpreti (visivi e non visivi) di informare gli utenti sulla natura della risorsa collegata:

alt

L'attributo alt è definito in un insieme di tag (vale a dire, img, area e facoltativamente per input e applet) per consentire di fornire un testo equivalente per l'oggetto.

Un equivalente testuale offre i seguenti vantaggi al tuo sito web e ai suoi visitatori nelle seguenti situazioni comuni:

• al giorno d'oggi, i browser Web sono disponibili in un'ampia varietà di piattaforme con capacità molto diverse; alcuni non possono visualizzare affatto le immagini o solo un insieme limitato di tipi di immagini; alcuni possono essere configurati per non caricare le immagini. Se il tuo codice ha l'attributo alt impostato nelle sue immagini, la maggior parte di questi browser visualizzerà la descrizione che hai fornito invece delle immagini
• alcuni dei tuoi visitatori non possono vedere le immagini, siano essi ciechi, daltonici, ipovedenti; l'attributo alt è di grande aiuto per quelle persone che possono fare affidamento su di esso per avere una buona idea di cosa c'è sulla tua pagina
• I bot dei motori di ricerca appartengono alle due categorie precedenti: se vuoi che il tuo sito web sia indicizzato come merita, usa l'attributo alt per assicurarti che non perdano sezioni importanti delle tue pagine.

In questo articolo di Yahoo Developer Network ( link archiviato ) si suggerisce che se è assolutamente necessario utilizzare un'immagine di sfondo invece dell'elemento img e dell'attributo alt, utilizzare gli attributi ARIA come segue:

<div role="img" aria-label="adorable puppy playing on the grass">
  ...
</div>

Il caso d'uso nell'articolo descrive come Flickr ha scelto di utilizzare le immagini di sfondo perché le prestazioni sono state notevolmente migliorate sui dispositivi mobili.

Penso che dovresti leggere questo post di Christian Heilmann. Spiega che le immagini di sfondo sono SOLO per l'estetica e non devono essere utilizzate per presentare dati, e sono quindi esenti dalla regola che ogni immagine dovrebbe avere testo alternativo.

Estratto (enfasi mia):

Immagini di sfondo CSS che, per definizione, hanno solo valore estetico, non contenuto visivo del documento stesso . Se hai bisogno di mettere un'immagine nella pagina che ha un significato, usa un elemento IMG e dagli un testo alternativo nell'attributo alt.

Sono d'accordo con lui.

Come accennato in altre risposte, non esiste un attributo alt (supportato) per un tag div solo per il tag img.

La vera domanda è perché è necessario aggiungere l'attributo alt a tutte le immagini di sfondo del sito? Sulla base di questa risposta, ti aiuterà a determinare quale percorso seguire nel tuo approccio.

Visuale / testuale: se stai semplicemente tentando di aggiungere un fallback testuale per l'utente se l'immagine non riesce a caricarsi, usa semplicemente l'attributo title. La maggior parte dei browser fornirà un suggerimento visivo (finestra di messaggio) quando un utente passa con il mouse sull'immagine e, se l'immagine non viene caricata per qualsiasi motivo, si comporta come un attributo alt che presenta il testo quando l'immagine fallisce. Questa tecnica consente comunque al sito di accelerare i tempi di caricamento mantenendo le immagini impostate su sfondi.

Lettori di schermo: l'opzione di mezzo della strada, varia perché tecnicamente mantenere le immagini come sfondi e utilizzare l'approccio dell'attributo del titolo dovrebbe funzionare come accennato sopra, "I programmi utente audio possono pronunciare le informazioni sul titolo in un contesto simile". Tuttavia non è garantito che funzioni in tutti i casi, inclusi alcuni lettori potrebbero ignorarlo insieme. Se finisci per optare per questo approccio, puoi anche provare ad aggiungere aria-label per assicurarti che gli screen reader li raccolgano.

SEO / motori di ricerca: ecco quello grande, se tu fossi come me, avessi aggiunto le tue immagini di sfondo, tutto andava bene. Poi, mesi dopo, il cliente (o forse te stesso) si è reso conto che ti stai perdendo un po 'di oro per la SEO non avendo alt per le tue immagini. Tieni presente che l'attributo title non ha alcun peso sui motori di ricerca , dalla mia ricerca e come menzionato in un articolo qui: https://www.searchenginejournal.com/how-to-use-link-title-attribute-correctly /. Quindi, se stai mirando alla SEO, dovrai avere un tag img con l'attributo alt. Un possibile approccio è caricare sul sito immagini reali molto piccole con attributi alt, in questo modo si ottiene tutto il SEO e non è necessario riadattare il CSS esistente. Tuttavia, questo può portare a un tempo di caricamento aggiuntivo a seconda delle dimensioni e Google guarda effettivamente il percorso delle immagini durante l'indicizzazione. In breve, se stai seguendo questa strada, accetta semplicemente ciò che deve essere fatto e includi le immagini reali invece di usare gli sfondi.

La convinzione generale è che non dovresti usare immagini di sfondo per cose con un valore semantico significativo, quindi non c'è davvero un modo corretto per memorizzare i dati alt con quelle immagini. La domanda importante è cosa farai con quei dati alt? Vuoi che venga visualizzato se le immagini non vengono caricate? Ne hai bisogno per qualche funzione programmatica nella pagina? Potresti memorizzare i dati arbitrariamente utilizzando proprietà CSS create che non hanno significato (potrebbero causare errori?) O aggiungendo immagini nascoste che hanno l'immagine e il tag alt, e poi quando hai bisogno di un'immagine di sfondo alt puoi confrontare l'immagine percorsi e quindi gestire i dati come preferisci utilizzando alcuni script personalizzati per simulare ciò di cui hai bisogno. Non c'è modo che io sappia per far sì che il browser gestisca automaticamente una sorta di attributo alt per le immagini di sfondo.

Il modo classico per ottenere questo risultato è inserire il testo nel div e utilizzare una tecnica di sostituzione dell'immagine.

<div class"ir background-image">Your alt text</div>

con l'immagine di sfondo che è la classe in cui si assegna l'immagine di sfondo e ir potrebbe essere la classe di sostituzione dell'immagine HTML5boilerplates, di seguito:

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

Questo articolo del W3C ti dice cosa pensano che dovresti fare https://www.w3.org/WAI/GL/wiki/ARIATechnique_usingImgRole_with_aria-label_forCSS-backgroundImage

e ha esempi qui http://mars.dequecloud.com/demo/ImgRole.htm

tra i quali

<a href="http://www.facebook.com">
 <span class="fb_logo" role="img" aria-label="Connect via Facebook">
 </span>
</a>

Tuttavia, se, come nell'esempio sopra, l'elemento contenente l'immagine di sfondo è solo un contenitore vuoto, personalmente preferisco mettere il testo lì e nasconderlo usando CSS; proprio dove mostri invece l'immagine:

<a href="http://www.facebook.com"><span class="fb_logo">
  Connect via Facebook
</span></a>

.fb_logo {
  height: 37px; width: 37px;
  background-image: url('../gfx/logo-facebook.svg');
  color:transparent; overflow:hidden; /* hide the text */
}

Ecco la mia soluzione a questo tipo di problema:

Crea una nuova classe in CSS e posizionala fuori dallo schermo. Quindi inserisci il tuo testo alternativo in HTML subito prima della proprietà che chiama la tua immagine di sfondo. Può essere qualsiasi tag, H1, H2, p, etc.

CSS

<style type="text/css">
  .offleft {
    margin-left: -9000px;
    position: absolute;
  }
</style>

HTML

<h1 class="offleft">put your alt text here</h1>
<div class or id that calls your bg image>  </div>

Non mi è chiaro cosa vuoi.

Se desideri che una proprietà CSS restituisca il valore dell'attributo alt, forse stai cercando la funzione dell'attributo CSS, ad esempio:

IMG:before { content: attr(alt) }

Se vuoi mettere l'attributo alt su un'immagine di sfondo, allora ... è strano perché l'attributo alt è un attributo HTML mentre l'immagine di sfondo è una proprietà CSS. Se vuoi utilizzare l'attributo alt HTML, penso che avresti bisogno di un elemento HTML corrispondente per inserirlo.

Perché "è necessario utilizzare tag alt sulle immagini di sfondo": è per una ragione semantica o per qualche motivo di effetto visivo (e se sì, allora quale effetto o quale motivo)?

Puoi ottenere ciò inserendo il alttag nel punto in divcui apparirà la tua immagine.

Esempio:

<div id="yourImage" alt="nameOfImage"></div>