Giorno 25: Usate barre orizzontali vere (o quasi)

Supponete di volere un divisore tra i vostri messaggi. Le normali barre orizzontali (tag


---

) 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
   

   ---

   , 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 . Dovreste aggiungere anche un attributo titlevuoto, per sopprimere, nei browser visuali, la presenza del tooltip. Quindi se avete:

Cambiatelo in:

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


---

. Però, poichè nei browser il supporto per righe con stile alternativo nel tag

---

è davvero scarso, useremo un tag