Giorno 22 – Usate liste vere (o fatele sembrare tali)

Giorno 22: Usate liste vere (o fatele sembrare tali)

Supponete di avere un elenco di 3 link: “Slashdot”, “The Register”, e “dive into mark”. Al posto di noiosi punti elenco neri, preferireste un’immagine carina a fianco di ogni elemento. Come fare? La soluzione più comune è utilizzare il tag  <img> prima di ogni link. Questo funziona benissimo ed, anzi, può essere realizzato in modo più accessibile con l’aggiunta di un appropriato testo  alt su ogni immagine.

Tuttavia si può andare oltre ed usare dei veri segnalatori di elenco  (tag<ul> e <li>), e quindi usare i CSS per cambiare quei noiosi punti neri. Prima ancora di essere “il modo corretto per farlo” da un punto di vista, diciamo, accademico, di cui potrebbe non importarvi molto, questa tecnica ha ulteriori benefici a riguardo dell’accessibilità.

Vi farò qualche esempio su ambedue le tecniche più avanti.

A chi serve?

  • A Marcus. Come abbiamo visto ieri, Lynx visualizza il nome del file per ogni immagine che non ha l’attributo alt.
  • A Michael. Links non visualizza mai immagini, ma per difetto non visualizza nulla nel caso di immagini senza testo nell’attributo  alt . Se questo era accettabile ieri, quando volevamo ignorare le immagini spaziatrici , non lo è oggi poichè vogliamo essere sicuri della presenza di qualche indicazione che trattasi di una lista, così abbiamo bisogno di un testo nell’attributo alt.

Inoltre quando Michael naviga senza voler vedere immagini, Opera visualizza il testo alt invece dell’indicazione di “immagine mancante” . E se usate la seconda tecnica indicata, Opera farà di più; torna a far vedere il puntino nero al posto della nota di “immagine mancante”.

  • A Jackie. Come abbiamo visto ieri, JAWS legge il nome del file di ogni immagine senza attributo alt. I link si perdono in un mare di nomi di file irrilevanti. Ecco cosa sente Jackie:

fancy dot dot gif link slashdot, fancy dot dot gif link the register, fancy dot dot gif link dive into mark

Inserire un asterisco come  testo alt già aiuta molto.  JAWS capisce che l’immagine è usata come punto elenco e non la pronuncia. Tuttavia, Home Page Reader annuncerà esplicitamente l’asterisco, cosicchè l’utente sentirà questo:

asterisk link slashdot, asterisk link the register, asterisk link dive into mark

E’ meglio utilizzare i veri marcatori di lista. Poichè tutta la presentazione visuale è nelle declaratorie CSS, queste non confondono la pagina, così sia JAWS che Home Page Reader leggono la lista semplicemente per quello che è: un elenco. Ecco cosa viene letto:

link slashdot, link the register, link dive into mark

Come fare

Se il vostro elenco di link è così:

<img src="/images/fancydot.gif" width="8" height="8"> <a href="http://www.slashdot.org/">Slashdot</a> <br>
<img src="/images/fancydot.gif" width="8" height="8"> <a href="http://www.theregister.co.uk/">The Register</a> <br>
<img src="/images/fancydot.gif" width="8" height="8"> <a href="http://diveintomark.org/">dive into mark</a> <br>

Occorrerà inserire l’attributo alt per tutte le immagini. Usare un asterisco nel testo alt, per simulare come sarebbe la lista nel caso di veri punti. (per evitare che i browser visuali li rappresentino come tooltip inserite un attributo title vuoto.)

<img alt=”*” title=””src="/images/fancydot.gif" width="8" height="8"> <a href="http://www.slashdot.org/">Slashdot</a> <br>
<img alt=”*” title=””src="/images/fancydot.gif" width="8" height="8"> <a href="http://www.theregister.co.uk/">The Register</a> <br>
<img alt=”*” title=””src="/images/fancydot.gif" width="8" height="8"> <a href="http://diveintomark.org/">dive into mark</a> <br>

Come fare: tecnica avanzata

La tecnica più avanza, e preferita, usa i fogli di stile CSS per definire l’immagine utilizzata come punto elenco.

<style type="text/css">
ul.blogroll {
  list-style: url(/images/fancydot.gif) disc;
}
</style>

Quindi nel modello potete scrivere l’elenco utilizzando i veri marcatori di lista <li>:

<ul class="blogroll">
<li><a href="http://www.slashdot.org/">Slashdot</a></li>
<li><a href="http://www.theregister.co.uk/">The Register</a></li>
<li><a href="http://diveintomark.org/">dive into mark</a></li>
</ul>

Risultato:

  • I browser più recenti visualizzeranno l’immagine come punto elenco
  • I browser con la visualizzazione di immagine esclusa mostreranno il noioso punto nero
  • Netscape 4 mostrerà sempre e comunque il noioso punto nero
  • I browser testuali ignoreranno sempre i fogli di stile CSS, e pertanto visualizzerano la lista come normalmente fanno (di solito con l’asterisco quale punto elenco).

P.S.: liste senza punto

Un altro modo comune per creare l’elenco di link è quella di non utilizzare immagini, solo una pila di link, possibilmente allineati a destra, come questi:

<div align="right">
<a href="http://www.slashdot.org/">Slashdot</a><br>
<a href="http://www.theregister.co.uk/">The Register</a><br>
<a href="http://diveintomark.org/">dive into mark</a><br>
</div>

Potrebbe anche essere reso così, con fogli di stile CSS e veri marcatori di lista:

<style type="text/css">
ul.blogroll {
  list-style: none;
  text-align: right;
}
</style>

O, se preferite l’allineamento a sinistra, potete fare così:

<style type="text/css">
ul.blogroll {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}
</style>

In tutti i modi, il marcatore di lista non è cambiato rispetto all’esempio precedente:

<ul class="blogroll">
<li><a href="http://www.slashdot.org/">Slashdot</a></li>
<li><a href="http://www.theregister.co.uk/">The Register</a></li>
<li><a href="http://diveintomark.org/">dive into mark</a></li>
</ul>

Con ”list-style: none” l’usuale punto nero non è più mostrato nei browser visuali. Funziona con tutti i browser,  Netscape 4 compreso. Grazie a Tobias Schmidt per avermi segnalato questa tecnica.

Approfondimenti

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