Giorno 25 – Usate barre orizzontali vere (o quasi)

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.

Potrebbero interessarti anche i seguenti articoli

Condividi:

Informazioni sull'autore

Franco Carcillo
Franco Carcillo
Sono nato (1956) e vivo a Torino.  Da oltre 26 anni lavoro ('da sempre') presso il Comune di Torino, presso il Sistema Informativo. Mi occupo di web.  Sono infatti Direttore Responsabile dei siti internet della Città, sin dalla loro nascita, nel 1994. Prima del 1994 mi sono occupato di informatica gestionale classica, anche se in ambiente distribuito (mini e pc, sin dal loro apparire nella Civica Amministrazione).  Negli anni 80 mi sono appassionato, nel tempo libero, di telematica.  Mio è stato il primo nodo della rete Fidonet in Torino città (Fido_Torino e  TO_news) nel 1987.  Sono stato anche coordinatore nazionale della rete amatoriale, anche se solo per 6 mesi. Poi ho abbandonato:  troppe le pressioni intorno a quello che doveva essere, alla fine, un semplice hobby. Quando non ci si diverte più, meglio spegnere. Ma la passione telematica è rimasta.  Ed ecco che ho tenuto ogni settimana (sino alla chiusura del giornale!) la prima rubrica di telematica pubblicata  su un quotidiano italiano "StampaSera"; a quei tempi di internet se ne parlava vagheggiandola nei meandri universitari e militari americani. Ho pubblicato il primo speciale pubblicato in Italia riguardante i bbs su BIT della Jackson;  ho collaborato, con altre riviste, tra cui PCWORLD dove ho avuto per lungo tempo una rubrica fissa. Di interner e dei siti, che dire? C'è ancora tanta strada da percorrere: l'accessibilità ne è un'esempio. Ma anche rendere i siti davvero fruibili così come far 'trovare' la montagna di informazioni memorizzate tra le pagine, sono sfide  non da poco. Vi pare? All'Università di Torino, quest'anno, molti studenti hanno partecipato, interessatissimi, ad un mio breve seminario su 'Progettare siti web per la Pubblica Amministrazione, la sfida dell'accessibiltià e usabilità'.  E' stupefacente notare come le persone che usano tutti i giorni la rete e a cui spieghi come e perchè i siti non sono nè usabili nè accessibili si rendano immediatamente conto e capiscano: quasi un velo, un sipario sia stato loro svelato. Ecco perchè ho deciso di tradurre 'Dive into accessibility':  perchè affrontare l'accessibilità non è così difficile. Certo nei siti mastodontici le operazioni possono essere lunghe, ma non vi sono più scuse per partire con nuovi progetti 'alla cieca'.

Commenti

Nessun commento

    Rispondi

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Link e informazioni