Imagen con enlace y accesibilidad

pues es justo lo que busco, algo que sea accesible de verdad, y a la semántica que le den, que no es tan importante :P

no lo he mirado en detalle ¿para saber cómo va vale con indagar en el código fuente? ¿no será como el sistema de la página de ikea, no?

Yo tengo uno de cosecha propia, se pierde algo de semántica pero las imágenes escalan que para mi es más importante.

http://www.upm.es/estudios/ingreso/selectividad/

En general estoy bastante contento con el comportaminto elástico de este site. Son unas maquetas previas (luego las hemos mejorado, las han cambiado, repulido y 27 cosas más) del futuro site de la UPM que algún año de estos verá la luz.

reabro este hilo para ver si alguien conoce un sistema de reemplazo de imágenes que vaya bien al escalar la página construida con tamaños relativos, y que tenga todas las ventajas del sistema de http://wellstyled.com/css-replace-text-by-image.htmlwellstyled, que es el que uso. he estado planteándome usar el SFIR, pero eso de que el usuario no sepa adonde le lleva un enlace me ha terminado de tirar hacia atrás.

pues muchas gracias

Venga, le compro un coco :)

mmm, permiso concedido. PERO, puestos a ser finolis :) lo pondria d eeste modo:

imagenes que decoran: en CSS
textos "bonitos": reemplazo (CSS o sIFR)
resto de imágenes: img+alt[+longdesc]

zigotica

reemplazo: en textos que quieras poner bonitos
img+alt: en todas las demas imagenes

Con permiso del maestro, suelo explicarlo de otra manera:

1. Imágenes que 'decoran': reemplazo
2. Imágenes que aportan 'contenido': dentro del HTML con su correspondiente ALT (incluso longdesc si hiciera falta)

Gracias Sergi.

Un saludo

reemplazo: en textos que quieras poner bonitos
img+alt: en todas las demas imagenes

Una cosa más acerca de este tema. ¿En qué casos conviene usar imagen con alt en vez de reemplazo? Ya que en algún enlace que me pasaste vi que tenías algunas metidas con alt. (Borja)

Gracias Borja, yo aquí sigo peleandome con esto. Cuando tenga algo ya os pongo un link a ver como lo veis.

Un saludo.
Diego

Es mejor utilizar un reemplazo de imagen por:

- Semántica: Un texto dentro de un H3 siempre aporta más al código (amen de lectores de pantalla, motores de búsqueda, etc...) que una imagen

- Portabilidad: Al añadir la imagen por CSS puedes eliminarla (o variarla) dependiendo del medio. Por ejemplo puedes NO quererla al imprimir o en una posible versión para PDA o similares. Todas controladas con su CSS respectiva

- Accesibilidad: Si incluyes las imágenes por CSS siempre podrás eliminarlas por el mismo método (por ejemplo una CSS alternativa). Eso facilita lo que comentaba Sergi. Una imagen no escala bien con los tamaños de fuente relativos, ni se le pueden cambiar los colores a través de una CSS personalizada (situación típica en gente con deficiencias visuales, que no ceguera, con las hojas de alto contraste, etc...)

Técnicas para reemplazo hay varias, esa que comentas está bastante bien, yo es la que suelo utilizar.

¿Y dentro de image replacement la técnica más apropiada que sería esta?

<code>[h3 id="header" title="Revised Image Replacement"]
&lt;span&gt;&lt;/span&gt;Revised Image Replacement
&lt;/h3&gt;

/* css */
#header {
width: 329px;
height: 25px;
position: relative;
}
#header span {
background: url(sample-opaque.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}</code>

que me corrija borja, que está mas versado en esto de la consultoria, yo creo que el problema de las imagenes es que no se puede definir (por el usuario) una css de mas alto contraste, por ejemplo. entre otras cosas.

orange

El browser de texto accedería al ALT de la imagen. Aunque yo creo que utilizaría un reemplazo de imagen, depende un poco de la situación.

Ok gracias zigotica y borja, he mirado antes con lynx y si que se muestra el alt, pero no entiendo en que situaciones es mejor reemplazo o alt

El browser de texto accedería al ALT de la imagen. Aunque yo creo que utilizaría un reemplazo de imagen, depende un poco de la situación.

<code>&lt;a href="___"&gt;&lt;img src="___ width="24" height="50" alt="texto alternativo"&gt;&lt;/a&gt;</code>esto es totalmente accesible.