ninobi ha scritto:conraid ha scritto:...Le immagini adesso sono in un css, come è giusto che sia secondo gli standard del w3c dal '99 a questa parte...
Dove c'è scritta questa cosa?
La mia non è polemica, mi interessa veramente.
Che io sappia, non esiste alcun obbligo in tal senso. Anzi, per ragioni di accessibilità, le immagini dovrebbero stare nel tag ed essere adeguatamente descritte, con
alt (obbligatorio e sufficiente se si tratta di immagini semplici) e con una
longdesc (se l'imagine è complessa e significativa). L'unico altro obbligo (da 1.0 strict in poi) consiste nel fatto che il tag
img deve stare all'interno di un
p o di un
div.
Inoltre, le immagini poste come sfondo si caricano più lentamente (credo perché non vanno nella cache, ma non ne sono sicuro)...
Scusate l'OT (anche se ormai questo 3d è tutto un OT).
In cache ci vanno sempre. Ed anzi, se usi la tecnica si dividere la stessa immagine per i rollover fai cache anche per quello, mentre prima ci voleva un javascript che precaricava
Allora. Se io ho <h3 id="accesso"><span class="ghost">Accedi al server</span></h3> dove ghost è segnalato come hidden nel css e il background di accesso è una immagine, io ho una struttura dove un web browser vede l'immagine che ho scelto mentre lo screen reader (o lynx per esempio) vede la scritta "Accedi al server". La immagini per pulsanti e cose simili non andrebbero mai usate, perché alcuni screen reader vanno in tilt. E poi perché consumano banda dove non serve. E poi perché un domani cambio il CSS e cambio immagini, senza cambiare il contenuto. Che resta sempre una intestazione.
Prendiamo il caso in questione
<li class="quote-icon"><a href="etc"><span>Rispondi citando</span></a></li>
Lynx, screen reader, etc.. visualizzazano "Rispondi citando" come parte di una lista, i browser una immagine messa come ti pare, anche con list-stype: none.
Se mettevi una immagine con alt giustamente segnalato ti trovavi una struttura non conforme quando toglievi il css. Provate con Lynx
Nelle specifiche WAI è segnalata questa cosa, non ricordo dove, quando parla del contesto e della separazione contenuto/grafica. Gli screen reader segnalerebbero "testo alternativo all'immagine Rispondi citando", mentre in questo caso segnalano solamente "Rispondi citando" nella lista.
Usando i CSS andrebbero usate le immagini poche volte, cioè quando sono realmente immagini con alt e londesc nel caso serva, e non per la navigazione, per i link o per le liste.
http://www.csszengarden.com/ è un bell'esempio di questa tecnica, una pagina perfettamente visibile anche senza CSS diventa in mille modi solamente cambiando un CSS. Se lasci l'immagini nella pagina la separazione contenuto e grafica non l'hai più.
Che poi sia validato dal W3 è altro discorso. Il codice è corretto ma non segue l'indicazione di separazione, o mi sbaglio?
Io faccio così da molti anni, vedo che tutti i maggiori siti di accessibilità e design by css fanno così.
Se mi sono sbagliato, i'm sorry. Io l'avevo sempre capita così.
Anche se così perdi la compatibilità con i browser vecchi o specifici. Gli screen reader ringraziano, Dillo e Netscape 4 no, tanto per dirne una.
Per fare una prova veloce, togliete il supporto ai CSS con firefox, non servono nemmeno le estensioni che accessibilità, basta andare in View -> Page Style -> No Style
P.S.
Tanto per chiarire. Io non ho i pinguini all'avvio, avvio in VGA senza framebuffer, odio l'antialiasing e sto con helvetica per tutti i siti. Era solo per chiarire un concetto di design e di separazione design e contenuto.
:cf
