Botoneras armadas con listas e imágenes.

¿Por qué conviene armar las botoneras con listas?

HTML es un lenguaje basado en etiquetas donde las posiciones y funciones de cada elemento en la estructura del Sitio están indicadas mediante tags.

Un menú es un listado de links (verticales u horizontales) y deben estar contenidos con las etiquetas de listas <ul> u <ol>.

Por lo tanto:

  • En caso de que se desactiven los estilos (CSS) la botonera se visualizará como un conjunto de links agrupados.
  • Los lectores de pantalla – que no interpretan el Sitio visualmente, sino a partir de cómo está formulado el código – comprenderán y podrán transmitir correctamente la estructura al usuario no vidente.

¿Cómo creamos una botonera con una lista (ul / ol)?

Generamos una división (div) con una lista (ul / ol), donde cada ítem (li) será un link (a) con imágenes de fondo diferentes para cada uno de sus estados (esta técnica es conocida como Sprite).

Ejemplo de botonera:

Ejemplo de botonera con sprite, armada con una lista (ul)
Ejemplo de botonera armada con una lista (ul)

En este ejemplo, las imágenes de los botones cuentan con los rótulos.

<div id=’botonera’>
<ul>
<li><a href=’presentacion.php’  id=’presentacion’><span>Presentaci&oacute;n</span></a></li>
<li><a href=’centro.php’ id=’centro’><span>Centro de Documentaci&oacute;n</span></a></li>
<li><a href=’legislacion.php’ id=’legislacion’><span>Legislaci&oacute;n</span></a></li>
<li><a href=’estadisticas.php’ id=’estadisticas’><span>Estad&iacute;sticas</span></a></li>
<ul>
</div>

¿Qué pasaría si se desactivaran los estilos?

En caso en que se desactivaran los estilos y por lo tanto, se dejaran de mostrar las imágenes de los botones con sus rótulos, podríamos incluir dentro de cada botón un span con el texto (el cual podríamos hacer invisible mediante el estilo display:none).

<a href=’estadisticas.php’ id=’estadisticas’><span>Estad&iacute;sticas</span></a>

#botonera ul li span{
display:none;
}

Este texto se mostrará en lugar de las imágenes, en caso de que se desactive el CSS.

¿Los lectores de pantalla para no videntes interpretan un rótulo con display:none?

El NDVA sí los interpreta. Aparentemente no sucede lo mismo con JAWS. Pienso que una solución sería repetir el menú en el pie de página, pero sin imágenes (para seguir pensando).

¿Cómo le incorporamos una imagen a un link?

Indicando Display:block le generamos a los enlaces un alto y ancho y esto nos permitirá incluirles una imagen de fondo.

#botonera ul li a
{
display:block;
width:9em;
height:3.2em;
}

¿Cómo incluimos imágenes para los distintos estados?

Ejemplo de Sprite

Una opción sería incluir una imagen en el background de cada link y modificar su posición (background-position: top o bottom) según el estado del botón (a esta técnica se la llama Sprite).

#botonera ul li a#presentacion{
display:block;
width:9em;
height:3.2em;
background-image:url(../img/01presentacion.jpg);
background-repeat:no-repeat;
background-position: top;
}

#botonera ul li a#presentacion:hover{
width:9em;
height:3.2em;
display:block;
background-image:url(../img/01presentacion.jpg);
background-repeat:no-repeat;
background-position: bottom;
}

… y para concluir nuestra botonera, ¿cómo eliminamos los bullets de la lista?

#botonera ul
{
list-style: none;
padding: 0;
margin: 0;
}

¿Y cómo hacemos que la botonera sea horizontal?

La propiedad float, permite que los ítems “floten” uno al lado del otro.

#botonera li
{
float: left;
}

Así lograremos hacer una botonera con:

  • Imágenes para los distintos estados con la técnica sprite.
  • Que aparecerá como un listado de links, en caso de que estén desactivados los estilos.

Colaboración: Programadora Daniela Rositto