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

Rispondi

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.