alt ad immagini in background

[evan75]

ciao a tutti,
spero di essere nella sezione adatta.

sempre più spesso vedo immagini online che anziché essere inserite con il classico tag html, sfruttano lo stile css background-image..

ora: lasciamo perdere la parte chiara relativa alla semantica: immagini che appartengono al contenuto dovrebbero essere inserite con il tag html, ed elementi di background come gradienti, pattern ecc dovrebbero essere inseriti con css.

parliamo di immagini che vengono usate come sfondi di div per ragioni di comodità di codice, interazioni con frameworks tipo jquery, ecc.

immagini che dovrebbero essere "lette" da screen readers per il discorso accessibilità, ed avere un alt per migliorare l'aspetto SEO.

facciamo un esempio: immaginiamo una foto che contenga del testo e venga usata come sfondo di un div.
il testo si può riscrivere e indentare a -9999px o nascondere con css, ma l'alt all'immagine come lo inserisco?

(ps. non ho bisogno che mi mostriate alternative per risolvere il quesito che ho usato come esempio, ma che mi aiutiate a trovare il metodo migliore per affrontare il discorso )

grazie a tutti anticipatamente,

E75

[ricman]

Originariamente inviato da evan75
il testo si può riscrivere e indentare a -9999px o nascondere con css, ma l'alt all'immagine come lo inserisco?

Non è che è proprio quel testo "allontanato" a fare da Alt?

[codencode]

Se parliamo di immagini che devono essere lette da screen reader (o da altre tecnologie assistive), non possono essere inserite come sfondi, in quanto non verrebbero rilevate.
Essendo sfondi, tra l'altro, non possono avere un alt.
Se invece si tratta solo di mostrare un tooltip, lo si può ottenere ricorrendo al title dell'elemento che ha come sfondo l'immagine (ovviamente non ha nulla di semantico).

[evan75]

Ciao Ragazzi,
innanzitutto grazie per le risposte

@Ricman: si, se hai solo del testo convertito in immagine, ma se hai una foto con del testo sovraimpresso, l'indent vale solamente per la parte testuale, non per la descrizione della foto.

@codencode: accessibilità, SEO e semantica non sempre si sposano con usabilità e semplicità di codice.

Se ogni volta che uso immagini sovrapposte e script che vanno ad influire su questi aspetti, devo usare posizionamenti assoluti e z index, il lavoro non si semplifica, e di conseguenza tutti gli aggiustamenti del caso richiesti da clienti ogni 2 minuti...

si parla tanto di minimizzare il codice, ma in questi casi, il risultato finale è: anziché una linea di CSS, una linea di codice in html e almeno 3 in CSS

Il discorso non è complicato da capire se parliamo per estremi:

immagini di sfondo --> css
immagini di contenuto --> HTML

C'è però un'area "grigia" dove le immagini sono usate come sfondo di div, più a titolo decorativo che di contenuto.

A che livello si ferma l'accessibilità?
Semanticamente è corretto usare una foto come immagine di back ground, se questa foto non ha rilevanza di contenuti?

Spero di non avere complicato il thread...

Grazie ancora

E75