La risorsa di IWA Italy sull'accessibilità del webLa risorsa di IWA Italy sull'accessibilità del Web

Webaccessibile.orgWebaccessibile.org

Accesso Rapido

Sei in: Home > Affrontare l'accessibilità > Articolo: Giorno 21 - Ignorate le immagini con funzione spaziatrice

Giorno 21 - Ignorate le immagini con funzione spaziatrice

A cura di Franco Carcillo | Giovedì 29 Maggio 2003
Link permanente

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. 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. 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



 

Continua l’argomento con…

Questo post è stato pubblicato il giorno: Giovedì 29 Maggio 2003 alle ore: 10:22 am ed è stato collocato in: Affrontare l'accessibilità.
È possibile seguire le risposte a questo post attraverso il feed RSS 2.0.
Le risposte sono attualmente sospese, ma puoi fare un trackback dal tuo sito.

I commenti sono chiusi.