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 titlevuoto, 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:

  • tutti i browser più recenti visualizzeranno l’immagine al posto della normale riga orizzontale
  • Netscape 4 visualizzerà una normale riga orizzontale 
  • i browser testuali ignorano sempre i CSS, quindi visualizzeranno una normale riga orizzontale (resa normalmente come una serie di sottolineato o trattini)

Approfondimenti

  • Hiding CSS From Netscape 4 senza usare ulteriori fogli di stile. Questa è la tecnica usata qui sopra, nell’esempio avanzato.
  • CSS1 and the Decorative HR, se vi sentite particolarmente coraggiosi, potreste applicare le barre orizzontali in Netscape 4 con i CSS. Buona fortuna.