Giorno 25: Usate barre orizzontali vere (o quasi)

Supponete di volere un divisore tra i vostri messaggi. Le normali barre orizzontali (tag<hr>) sono noiose, così al suo posto utilizzate un'immagine. Questo funziona, e può essere realizzato in modo più accessibile con l'aggiunta di un'appropriato alt text.

Però, se volete spingervi oltre ed utilizzare una vera riga orizzontale, allora usate un piccolo trucco con i CSS per visualizzarla, nei più recenti browser, come un'immagine. I vecchi browser e quelli solo testuali ignoreranno il CSS e visualizzeranno la riga orizzontale nel loro stile nativo. (I browser testuali usano generalmente una riga di trattini o sottolineati, espansi su tutta la riga dello schermo.)

Vi darò esempi di entrambi fra poco.

A chi serve?

  1. A Jackie. Come abbiamo già visto, JAWS legge il nome del file di ogni immagine che non ha l'attributo alt .
  2. A Marcus. Lynx visualizza il nome del file di ogni immagine che non ha l'attributo alt. Se usate una vera riga orizzontale, Lynx visualizzerà una serie di sottolineato (_) pari all'ampiezza dello schermo.
  3. A Michael. Links non visualizza nulla per le immagini senza alt text, così Michael non ha nessuna indicazione della presenza di un separatore. C'è dunque bisogno di un alt text, o ancora meglio, di un vero tag <hr>, che Links visualizzerà come una serie di trattini (-) pari all'ampiezza dello schermo.

Come fare

Se usate immagini come righe orizzontali, il modo più semplice per renderle accessibili è aggiungere l'attributo alt al tag <img>. Dovreste aggiungere anche un attributo title vuoto, per sopprimere, nei browser visuali, la presenza del tooltip. Quindi se avete:

<img src="/images/fancyrule.gif" width="442" height="25">

Cambiatelo in:

<img alt="--" title="" src="/images/fancyrule.gif" width="442" height="25">

Non diventati scemi ad aggiungere 80 trattini per l' alt text. Due o tre saranno sufficienti.

Come fare: tecnica avanzata

La tecnica avanzata (da preferire) usa il vero tag <hr> . Però, poichè nei browser il supporto per righe con stile alternativo nel tag <hr> è davvero scarso, useremo un tag <div> per visualizzare l'immagine. Inserite questo CSS nella vostra sezione <style> all'inizio del modello. (Se state usando un foglio di stile esterno come style-sites.css, inseritelo dove vi pare. Se usate fogli di stile multipli, inseritelo solo in quello per Netscape 4.)

div.hr {display: none}
/*/*/a{}
div.hr {
  display: block;
  height: 25px;
  background-image: url(/images/fancyrule.gif);
  background-repeat: no-repeat;
  background-position: center center;
  margin: 1em 0 1em 0;
}
hr {display:none}
/* */

(In height, sostituite il valore dell'altezza dell'immagine. In background-image, sostituite con il percorso ed il nome sul server dell'immagine voluta.)

Quindi nel vostro modello, dove volete la riga decorativa, inserite:

<div class="hr"></div><hr />

Risultato:

Approfondimenti

 
<< Giorno 24: Fornite testi equivalenti per mappe di immagini| Indice | Giorno 26: Usate dimensioni relative per i font >>