Giorno 21 – Ignorate le immagini con funzione spaziatrice

Giorno 21: Ignorate le immagini con funzione spaziatrice

Molti progettisti usano immagini trasparenti per spaziare gli elementi della pagina in modo da controllarne la disposizione nei browser visuali. Potete usarne quante ne volete, ma è opportuno specificare per ogni immagine  un attributo alt vuoto in modo che i browser non visuali le ignorino.

A chi serve?

  • A Marcus. Lynx è preimpostato in modo da visualizzare il nome del file di ogni immagine che non è associata ad un’attributo alt. Molti modelli, nei weblog, contengono molti immagini utilizzate per spaziare prima ancor del nome del sito. Non ve ne rendete conto in un browser visuale, ovviamente, ma ecco cosa vede Marcus:
  • [shim.gif] [shim.gif]
  • [shim.gif]
  • [shim.gif]
  • Welcome To My Web Site
  • [ciblueHeader2.gif]
[ciblueCurve2.gif]
  • A Jackie. JAWS è preconfigurato per leggere  il nome del file di ogni immagine non associata ad un’attributo alt. Se pensate che Marcus fosse seccato, immaginate come possa essere frustrante per Jackie ascoltare questi messaggi:

graphic shim dot gif graphic shim dot gif graphic shim dot gif graphic shim dot gif welcome to my web site graphic c i blue header two dot gif graphic c i blue curve two dot gif

Se vi presentaste così ad un’incontro, nessuno vi parlerebbe mai.

Come fare

Gli utilizzatori di Radio possono avere il giorno libero. Come lunedì scorso, Radio genera automaticamente attributi alt vuoti per tutte le immagini spaziatrici. (Grazie, Jake.) Se, guardando il codice sorgente della prima pagina non vedete nessun alt=""nelle immagini spaziatrici, aggiornate Radio.root e ripubblicate il sito.

Gli utilizzatori di altri strumenti devono cercare, nei modelli, il tag <img> con nomi quali, ad esempio,”spacer.gif“, “shim.gif“, “1.gif“, ovvero di qualsiasi immagine che è ripetuta più volte all’interno del modello stesso, anche con differenti attributi   width e heightogni volta.

Per esempio, per ogni immagine spaziatrice che appare così:

<img src="spacer.gif" width="1" height="10">

Cambiatela in:

<img src="spacer.gif" alt=””width="1" height="10">

Se riusate la stessa immagine spaziatrice più volte, è più semplice effettuare questa operazione con una funzione di cerca e sostituisci.

Da non fare:

  • Non definite alt=" ". L’attributo   alt deve essere vuoto, e non deve contenere uno spazio.
  • Non specificate l’attributo alt nel tag <body>, anche se definisce una immagine di sfondo. Questa infatti è sempre ignorata dai browser non visuali.  
    Come in:
    <body background="http://url/to/image.gif">
  • Non specificare l’attributo  alt in un tag <td>, anche se definisce una immagine di sfondo. Questa infatti è sempre ignorata dai browser non visuali. Come in:

<td background="http://url/to/image.gif">

Approfondimenti



 

Potrebbero interessarti anche i seguenti articoli

  • Giorno  5 – MarcusGiorno 5 – Marcus Giorno 5: Marcus Marcus, figlio di un tossicodipendente, è cieco dalla nascita. E' nato prematuro, di 6 mesi,  ed è stato in una incubatrice per […]
  • Giorno 27 – Usate intestazioni vereGiorno 27 – Usate intestazioni vere Giorno 27: Usate intestazioni vere Pensate al vostro sito come ad uno schema a livelli. Il livello principale è intestato con il nome del sito. Sulla vostra […]
  • Giorno 14 – Aggiungete titoli ai linkGiorno 14 – Aggiungete titoli ai link Giorno 14: Aggiungete titoli ai link Visto che tutto il web si basa sui link, penserete che tutti conoscano l'attributo title ma raramente questi è presente. […]
  • Giorno 12 – Usate i colori sicuriGiorno 12 – Usate i colori sicuri Giorno 12: Usate i colori sicuri Questo suggerimento è una regola generale applicabile a molte aree di progettazione web, ma mi concentrerò su uno […]
  • Giorno 18 – Date al calendario una vera didascaliaGiorno 18 – Date al calendario una vera didascalia Giorno 18: Date al calendario una vera didascalia "Ma come," vi sento gridare, "il mio calendario ha già  una didascalia. Eccola, mese ed anno in cima. Ed […]

Rispondi

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.