Paso 14.- Usar listas reales.

Las listas, en el código HTML, tienen sus propias etiquetas para marcarlas. Usamos la etiqueta <ul> para las listas aleatorias (esas que aparecen con bolitos) y <ol> para las ordenadas (que aparecen con números o letras consecutivos). La apariencia de las mismas puede resultarnos sosa o aburrida y queramos darle un "toque de diseño". Entonces pensamos sustituir esos feos bolitos que aparecen en nuestra lista con el menú de navegación por algo más atractivo, por ejemplo, un pequeño trébol. Nos olvidamos del marcado correcto y hacemos algo así:

<img scr="/imagenes/trebol.jpg" width="8" height="8" alt="*"><a href="principal.html" title="Página principal de la bitácora">Principal</a>< /br>
<img scr="/imagenes/trebol.jpg" width="8" height="8" alt="*"><a href="contenidos.html" title="Tabla de contenidos de la bitácora">Contenidos</a>< /br>
<img scr="/imagenes/trebol.jpg" width="8" height="8" alt="*"><a href="hoy.html" title="El artículo del día">Lo último</a>< /br>

Te preguntarás qué está mal en este código. Tiene atributo "alt" (del que más adelante hablaremos) para la imagen, tiene el atributo "title" para el vínculo y en principio parece que está todo correcto. Técnicamente sí, pero semánticamente no. El usuario visual puede que lo perciba como una lista aleatoria, pero los lectores de pantalla no la interpretan como tal, porque no lo es. Sería demasiado osado decir que esto la hace inaccesible, pero sí podemos afirmar que se puede hacer mucho mejor, ajustándose a los criterios semánticos, y, me atrevería a decir, que de forma mucho más sencilla.
Veamos como hacerla, aprovechando las características de la hoja de estilo. Lo primero que tenemos que definir es el estilo que le vamos a dar: queremos que aparezcan unos pequeños tréboles en lugar de los sosos puntos que aparecen por defecto en este tipo de listas. Vamos a definir un estilo para nuestra lista del menú en la hoja de estilo:

ul.menu {
list-style: url(/imagenes/trebol.jpg) disc;
}

A continuación, ya podremos escribir nuestra lista usando marcadores de lista apropiados:

<ul class="menu">
<li><a href="principal.html" title="Página principal de la bitácora">Principal</a></li>
<li><a href="contenidos.html" title="Tabla de contenidos de la bitácora">Contenidos</a></li>
<li><a href="hoy.html" title="El artículo del día">Lo último</a></li>
</ul>

Los resultados que obtendremos son:

• Los navegadores modernos mostrarán la imagen del trébol como viñetas de lista.
• Los navegadores más antiguos (por ejemplo, el clásico Netscape 4) y los que tengan las imágenes deshabilitadas mostrarán la lista con sus aburridas viñetas negras.
• Los navegadores sólo texto ignorarán la hoja de estilo y mostrarán la lista como tengan definido por defecto (normalmente con viñetas en forma de asterisco).
• Los lectores de pantalla y navegadores por voz interpretarán de forma semánticamente correcta que se encuentran ante una lista y así se lo dirán al visitante.

Pero lo que tú quieres es hacer una lista donde no se ven las viñetas y el texto esté alineado a la izquierda. Pues no hay problema. No tenemos que tocar el código fuente de la lista. Sólo tenemos que dar unos retoques a las características de la lista en la hoja de estilo para hacer desaparecer la viñeta y alinear el texto a la derecha. Del siguiente modo:

ul.menu {
list-style: none;
text-align: right;
}

Del mismo modo, podremos dar cualquier otro estilo a la apariencia de nuestra lista, sin tener que tocar el código fuente y sólo añadiendo o modificando características de la hoja de estilo. Fácil, bonito y, sobre todo, apropiado.

Siguiente paso.

Paso 15.- Equivalente textual para imágenes.