Día 22: Usar listas reales (o simularlas de manera correcta)

Suponga que tiene un blogroll de tres vínculos: Slashdot, The Register, y dive into mark. En vez de usar una aburrida viñeta negra, quiere usar una lujosa imagen al lado de cada uno. Como hacerlo. La solución más sencilla es usar etiquetas de <img> junto a cada vínculo. Esto funciona, y puede hacerse fácilmente más accesible por medio de la adición de texto alt apropiado para cada imagen.

Sin embargo, puede ir mas allá y usar un marcaje de lista real (etiquetas <ul> y <li>), y luego usar CSS para cambiar la aburrida viñeta negra a una imagen. Además de ser "la manera correcta de hacerlo" en algún sentido académico que podría o no importarle, esta técnica tiene beneficios de accesibilidad adicionales.

Les daré ejemplos de ambas técnicas en un instante.

Quién se beneficia?

  1. Marcus se beneficia. Como vimos ayer, Lynx muestra el nombre de archivo de cualquier imagen que no tiene un atributo alt.

  2. Michael se beneficia. Links nunca muestra imágenes, pero por defecto no muestra nada en lugar de las imágenes si estas no poseen texto alt. Esto era aceptable ayer, cuando queríamos ignorar las imágenes espaciadoras, pero hoy queremos asegurarnos de que exista alguna indicación de que esto es una lista, así que necesitamos el texto alt.

    También, cuando Michael navega con las imágenes desactivadas, Opera muestra el texto alt en lugar de un bloque perteneciente a la "imagen faltante". Y si usa la técnica avanzada, Opera lo hará mucho mejor, ya que se revierte y muestra la viñeta negra tradicional en lugar del bloque de la "imagen faltante".

  3. Jackie se beneficia. Como vimos ayer, JAWS lee el nombre de archivo de cualquier imagen que no tenga un atributo alt. Los vínculos terminan perdiéndose en un mar de nombres de archivos sin importancia. Esto es lo que escucha Jackie:

    fancy punto punto gif vínculo slashdot, fancy punto punto gif vínculo the register, fancy punto punto gif vínculo dive into mark

    Proveer un asterisco como texto alt ayuda enormemente. JAWS notará que la imagen se está usando como una viñeta, y no la anunciará. Sin embargo, Home Page Reader anunciará el asterisco explícitamente, y los usuarios escucharan esto:

    asterisco vínculo slashdot, asterisco vínculo the register, asterisco vínculo dive into mark

    Usar el marcaje de lista real es lo mejor. Ya que toda la presentación visual está en las declaraciones de CSS, ninguna abarrota la página, y tanto JAWS como Home Page Reader leen simplemente su lista por lo que es: una lista. Ahora se escucharía así:

    vínculo slashdot, vinculo the register, vinculo dive into mark

Como hacerlo

Si tiene un blogroll que se ve así:

<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>

Debe proveer atributos alt para todas las imágenes de viñetas. Use un asterisco como texto alt, para simular como se vería la lista si estuviera usando marcaje real (Para prevenir que esto se muestre como una información de herramientas en los navegadores visuales, debería proveer también un atributo title vacío).

<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>

Como hacerlo: avanzado

La técnica avanzada (y preferida) usa CSS para definir la imagen que se va a usar como viñeta en la lista.

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

Luego en su plantilla, puede escribir su lista usando marcaje real:

<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>

Resultados:

  • Los navegadores modernos mostraran la imagen como la viñeta de la lista.
  • Los navegadores con imágenes desactivadas mostrarán la monótona viñeta negra.
  • El Netscape 4 mostrará siempre la monótona viñeta negra.
  • Los navegadores exclusivamente de texto ignorarán siempre el CSS, así que mostrarán la lista de la manera en que muestran las listas normalmente (usualmente usando un asterisco como viñeta para la lista).

Comentario: listas sin viñetas

Otra forma común de crear un listado de vínculos es sin usar imágenes de ningún tipo, solo un conjunto de vínculos, posiblemente alineados a la derecha, así:

<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>

Esto también se puede hacer con CSS y con marcaje de lista real:

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

O, si quiere vínculos alineados a la izquierda, puede hacerlo así:

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

De cualquier modo, el marcaje de la lista no ha cambiado en relación con el del ejemplo anterior:

<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>

La línea "list-style: none" suprime la viñeta negra habitual de los navegadores visuales. Esto funciona en todos los navegadores, inclusive en Netscape 4. Gracias a Tobias Schmidt por recordarme esta técnica.

Lectura añadida

 
<< Día 21: Ignorar las imágenes espaciadoras (spacer images) | Contenido | Día 23: Proveer texto equivalente para las imágenes >>