Problema de accesibilidad - Prioridad 2 - 11.2

[bittxo]

Hola a todos:

Validando una web me he encontrado con esta anotación en el TAW on line, dentro de la prioridad 2:

11.2 Evite características desaconsejadas por las tecnologías W3C.Este elemento HTML utiliza atributos desaconsejados en HTML 4.01. (3)

Línea 89: <img src="/fotos/fondo_otros_imagenes.jpg" onmouseover="this.src='/fotos/fondo_otros_imagenes2.jpg';" onmouseout="this.src='/fotos/fondo_otros_imagenes.jpg';" border="0" alt="Galer&iacute;a de im&aacute;genes" width="125" height="75" />
Línea 89: <img src="/fotos/fondo_otros_enlaces.jpg" onmouseover="this.src='/fotos/fondo_otros_enlaces2.jpg';" onmouseout="this.src='/fotos/fondo_otros_enlaces.jpg';" border="0" alt="Enlaces de inter&eacute;s" width="125" height="75" />
Línea 89: <img src="/fotos/fondo_otros_prensa.jpg" onmouseover="this.src='/fotos/fondo_otros_prensa2.jpg';" onmouseout="this.src='/fotos/fondo_otros_prensa.jpg';" border="0" alt="Kiosko de prensa" width="125" height="75" />

Imagino lógicamente que es por el mouseover que tengo. Se trata de tres fotos que he usado para hacer un menú sencillo. Al pasar el ratón por encima consigo que cambien de color y es muy fácil de identificar.

Pero claro, si el efecto me da ese problema, querría resolverlo o quitarlo.

Pregunta: ¿hay algún código que haga lo mismo que estoy haciendo, pero que el validador acepte mejor? ¿Algún código nuevo o mejorado?

Muchas gracias a todos, cracks, que esta web es un gran apoyo para los diseñadores...

[Mikmoro]

Mira, esto no es difícil de hacer, pero sería mejor que pusieras el código del menú completo para poder decirte con exactitud cómo cambiarlo.

Si tienes un sitio donde ver además la simágenes, mejor que mejor.

Mikel.

[daPhyre]

Si lo que quieres es que la imagen cambie al pasar encima de este, puedes hacer esto como alternativa:

Código HTML:

<style>
a.imagen{background:url(fotos/fondo_otros_imagenes.jpg); width:125px; height:75px}
a:hover.image{background:url(fotos/fondo_otros_imagenes2.jpg); }
</style>

<a href="#" class="imagen"></a> 

Aunque no estoy seguro que sea la opción más factible, y posiblemente tenga sus inconvenientes, como que es posible que no las tomen en cuenta los buscadores por que no tendrán "Alt"; sería cuestión de peguntarle a alguien que sepa más.

Suerte!

[AlvaroG]

bittxo, estoy seguro de que la advertencia que te muestra no es por los eventos (mouseover y demás) sino porque estás usando width, height y border, que son atributos desaprobados en HTML 4.01


Saludos.

[Mikmoro]

Yo también lo creo, porque en el caso de los eventos el mensaje sería algo como que debes usar manejadores de eventos independientes del dispositivo.

Mikel.

[bittxo]

Hola chicos...

Gracias a todos por responder, perdonar por el retraso pero llevo unos días muy liado.

Bueno al tema, teníais razón. No era el mouseover, sino el border y demás... Efectivamente, la advertencia es la que mencionáis y al quitarlos y trabajar sobre css esos datos, se fueron ciertos errores.

La verdad es que ya cuando fui diseñando la web, fui teniendo en cuenta ciertas advertencias y precauciones en cuanto a accesibilidad, tratando de llevar todo lo más posible a los .css y no en el código, sin tablas, etc...

He intentado empaparme mucho sobre criterios de accesibilidad, validadores... y aunque creo que he avanzado bastante, me queda mucho por recorrer.

Estoy validando una web con el chequeador de css de w3, el de xhtml también de w3 y luego el nivel de accesibilidad trato de sacarlo con el TAW on line de Tawdis.

¿Me recomendáis que use otros validadores? ¿Que pase otras pruebas?

Por otro lado ya que abrí este post, por no abrir más, comentaros una cosa... Ahora mismo tengo validada la web para CSS 2.1 y XHTML 1.0 con los validadores que os comentaba (Sigo validando páginas, pero van cayendo todas más o menos a buen ritmo). Sin embargo el nivel de accesibilidad (A-AA-AAA), con Tawdis, me está dando más problemas.

He conseguido reducir a 0 los tres niveles de automático, pero aún tengo 18-31-14 errores en el apartado manual y tengo algunas dudas sobre ellos.

Abusaría mucho si os hago algunas preguntas?

Gracias...

[Mikmoro]

Pues la primera e importante pregunta ya la has hecho: lo que mencionas creo que no son errores, sino cosas que el analizador automático no puede analizar y te advierte para que las revises a mano, como: "¿son adecuados los títulos de sus imágenes?, o ¿es adecuado el título de la página para su contenido?" Esto el analizador no lo puede saber, así que te recomienda revisarlo a mano.

Si se trata de otros errores ya comentarás cuáles.

Yo suelo usar el de sidar.org

Mikel.

[talmente]

Una buena solución es: Define el link como si fueras a poner solo texto incluyes como es natural el atributo title algo como esto

<a href="http://www.labtestsonline.es/" title="La Web sobre pruebas de laboratorio clínico. Enlace externo">labtestsonline</a>

Después preparas las imágenes, que tienen que tener espacio en blanco por arriba (para el truquillo).

El truco: A ese link le defines un estilo "a" en el que el texto será blanco y un tamaño de 0.1ems y de fondo una de las imágenes y en el "a:hover" el negativo de la imagen. Espero que este claro.

[bittxo]

Hola, gracias a todos... El mouseover efectivamente no era el problema ahí, pero siguen apareciéndome esas mismas imágenes en otras advertencias, no sé si por eso o por otra cosa.

Si os parece, voy a recopilar unas cuantas dudas juntas, para no llenar mil posts y así en uno sólo salen varias cosas.

En cuanto al mouseover, probaré truquillos de css para hacer los links como quiero.

¿Debo poner resuelto o algo a este post? ¿Abro uno nuevo para las próximas dudas o continúo con este?

Un saludo!

[PatomaS]

Hola

Es mejor que pongas una duda por mensaje, no solo por claridad para ti, si no para otras personas cuando consulten el tema.

Felicidad