Hola,
seguramente, esto estará escrito en alguna página, pero a través de Google no he conseguido encontrar información sobre mi caso. No es nada del otro mundo, pero sí necesito algo muy concreto.
Resulta que estoy haciendo una especie de banner, diseñado en forma de imagen. Y que, cuando el ratón pase por encima, el hover transforme la imagen en otra. Y el banner, por supuesto, lo quiero enlazar a otro lugar.
Por cuestiones de accesibilidad, no quiero usar la opción de Javascript que me da Dreamweaver (usar la opción "imagen de sustitución") y poner el contenido de la imagen en un simple "alt". Prefiero hacerlo de forma que, si desnudo la página de css, el texto se lea.
Esto es, en versión reducida, lo que tengo:
Código HTML:
<html>
<head>
<style type="text/css">
<!--
div.banner {
background-image:url(background.png);
height:150px;width:500px;
}
div.banner:hover {
background-image:url(background-hover.png);
}
div.banner h1,div.banner p {
visibility:hidden;
text-indent:-999999px;
}
-->
</style>
</head>
<body>
<a href="enlace.html">
<div class="banner">
<h1>Título del banner</h1>
<p>Contenido del texto</p>
</div>
</a>
</body>
</html> A ojos de los navegadores, funcionar, funciona. Ahí tengo el banner con un hover, y un texto dentro que está oculto, sólo se puede leer si se quita el css (pensado también para navegadores de voz).
Lo dicho, me he apañado como bien he podido, pero parece que el W3 me prohíbe que ponga un <div> dentro de un <a>.
¿Cómo podría hacer lo mismo de forma accesible, sin usar una imagen <img y que sea código válido?
Muchas gracias.