Botones accesibles

Explicaré como hacer un botón con comportamiento sin perder la accesibilidad.

Existen varias maneras de crear un botón con rollover, por ejemplo con javascript y/o css.

Bueno la pregunta es ¿Que pasa si el navegador no soporta javascript?. Usamos CSS.
¿Y si tampoco soporta CSS? ¿Se nos acabaron la opciones?

Aquí una solución simple:

En realidad seguimos usando CSS pero preocupandonos de que el link siga "visible" aún si el navegador no soporta CSS.

EL código HTML:


<a href="#" title="Click Ac&aacute;!" id="miBoton"><span>Click Ac&aacute;!</span></a>



El CSS:


<style type="text/css">
#miBoton {
background-image: url(botonAccesible.gif);
height: 30px;
width: 130px;
display: block;
}
#miBoton:hover {
background-image: url(botonAccesibleH.gif);
}
#miBoton span {
display: none;
}
</style>


Explicación

El truco es la utilización de la etiqueta span, ya que al utilizarla tenemos la seguridad de que el usuario podrá ver el botón incluso cuando su navegador no soporte CSS.

Además estamos generando codigo compatible con las exigencias del W3C y WCAG AAA, algo muy importante en estos tiempos.

Para este ejemplo usé un botón pero puede ser aplicado a varios elementos con una clase CSS.
Deben preocuparse de que el tamaño del link debe ser igual que la imagen a utilizar.

Descarga el ejemplo